Freshworks - CSS Full Page App

App Platform
, , , ,
1

I am trying to open the iframe inside Full Page, please find the code below for index.html.

<html>
  <head>
    <script src="{{{appclient}}}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script src='https://code.jquery.com/jquery-1.9.1.min.js'></script>
    <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshdesk.css">
  </head>
  <body>
    <iframe id="myIframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="YES" width="100%" height="100%"></iframe>
    <script src="app.js"></script>
  </body>
</html>

The iframe is not opening and there is no such error in console also. Can someone help us to resolve the issue.

Thanks in advance!

2

Hello @Chaitanya

Welcome to the Freshworks Developer Community…!

Please check if the path to your app.js file is correct and add all the script tags to your body tag, as it is best practice

3

Hi Arokiya,

Thanks for noticing. The path is correct.
Below is the code for the app.js:

$(document).ready(function() {
    app.initialized().then(function(_client) {
        var client = _client;
        var dataObj = {};
        console.log("App instializing started")
        function callError(description, error_type) {
            client.interface.trigger("showNotify", {
                type: error_type,
                message: {
                    title: error_type,
                    description: description
                }
            });
        }
        client.events.on('app.activated', function() {
            
            client.data.get('loggedInUser').then(function(loggedInUserData) {
                dataObj.email = loggedInUserData.loggedInUser.contact.email;
                console.log(dataObj.email)
            }).catch(function() {
                var description = "GDL-011: Retrieving user details";
                callError(description, "info");
            });
            
            client.iparams.get().then(function(iparams) {
                var godeskless_url = iparams.audetemi_domain;
                client.request.invoke('sendInfoToMiddleware', {
                    email: dataObj.email,
                    name: 'goDeskless'
                }).then(function(data) {
                    var token = data.response.token;
                    console.log(token)
                    $('#myIframe').attr('src', godeskless_url + ':8443/incident/?token='+token);
                }).catch(function() {
                    var description = "GDL-012: SMI Request failed";
                    callError(description, "info");
                });

            }).catch(function() {
                var description = "GDL-013: Retrieving iparam data";
                callError(description, "info");
            });

        });
    }).client.interface.trigger("showNotify", {
        type: "info",
        message: "GDL-014: Intializing the app"
    });
});
4

Hello @Chaitanya

Are you able to see the token value in your browser console while retrieving iparam values? If not, was your callError function invoked?

If you are trying to access an API key or access token in your front-end app, please use a secure iparam.

5

No i am not getting log of token.
Also i am not getting any error.

I am getting log only till “App instializing started”

we haven’t use currently any secret token in our code

6

Reference for logs

Screenshot from 2024-05-29 19-49-40
Screenshot from 2024-05-29 19-49-40825×797 171 KB

7

Hi @Chaitanya

Did your app.activated get triggered while opening the app?

8

Hi Arokiya,

Thanks for noticing that. I have checked that, it is not getting triggered.

When i removed that then iframe opened, i guessed client.events.on(‘app.activated’) doesn’t work for CSS but works for Freshdesk.

Please find below updated code which works well for full page app.

Thanks for the support!

$(document).ready(function() {
    app.initialized().then(function(_client) {
        var client = _client;
        var dataObj = {};
        console.log("App initializing started")
        console.log(client)
        function callError(description, error_type) {
            client.interface.trigger("showNotify", {
                type: error_type,
                message: {
                    title: error_type,
                    description: description
                }
            });
        }
        
        client.interface.trigger("showNotify", {
            type: "info",
            message: "GDL-014: Intializing the app"
        });  
            
        client.data.get('loggedInUser').then(function(loggedInUser) {
            console.log(loggedInUser);
            dataObj.user_email = loggedInUser.loggedInUser.email;
            console.log(dataObj.user_email);
        }).catch(function() {
            var description = "GDL-011: Retrieving user details failed";
            callError(description, "info");
        });
        
        client.iparams.get().then(function(iparams) {
            var godeskless_url = iparams.audetemi_domain;
            client.request.invoke('sendInfoToMiddleware', {
                email: dataObj.user_email,
                name: 'godeskless'
            }).then(function(data) {
                var token = data.response.token;
                console.log(token)
                $('#myIframe').attr('src', godeskless_url + ':8443/incident/?token='+token);
            }).catch(function() {
                var description = "GDL-012: SMI Request failed";
                callError(description, "info");
            });

        }).catch(function() {
            var description = "GDL-013: Retrieving iparam data";
            callError(description, "info");
        });
    });
});
9

Hi @Chaitanya

Thanks for the update… :handshake:
Happy coding… :tada:

10

Would be good to see such CSS specifics in documentation.
Currently, CSS is more or less not really mentioned in the documentation.

11

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.