Integrated app widget details have disappeared and the content is now blank

Aaron_Ehrensberger · June 13, 2023, 2:27pm

The widget on the bottom right is blank. It should not be. It was working yesterday. We had a meeting with Freshdesk on Wednesday actually and demonstrated this feature. And we made no changes. And now it’s ‘gone’ and blank.

The bottom right corner. Notice the difference between ‘missing’ and ‘working’ screenshots.

The widget’s not going missing. It’s loading in its default state, and then not loading any data correctly. From my code, that makes it looks like app.activated event is not being triggered. Upon further investigation while it’s in this broken state, I can see in the javascript console that there is indeed an error from freshdesk:

Uncaught (in promise) ReferenceError: app is not defined
at init (app.js:6:5)
at app.js:3:1

This very basic code was taken from the freshdesk provided examples in creating your first widget. See below, and please let me know what I can change to make this behave more reliably (The renderLinks method just never gets called, when we see the widget not loading - but it’s not consistent - oftentimes, it DOES load):

code

Any reason why?

Raviraj · June 16, 2023, 3:52am

Hi @Aaron_Ehrensberger,

Yes, the app content is not appearing because of the same error.

Our platform expects a script file loaded into the HTML file that helps to load this app. Could you please share the head section of the HTML file that you have on your app under the /app folder?
It should have the app client script file loaded like this for platform version 2.3. You can find the platform version of your app in the manifest.json file.

github.com

freshworks-developers/say-hello/blob/main/Freshdesk/app/index.html

<html>

<head>
  <script async src="{{{appclient}}}"></script>
  <link rel="stylesheet" type="text/css" href="styles/style.css" />
  <link rel="stylesheet" type="text/css"
    href="https://static.freshdev.io/fdk/2.0/assets/freshdesk.css" />
  <script type="module"
    src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.esm.js"></script>
  <script nomodule
    src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.js"></script>
</head>

<body>
  <div class="fw-widget-wrapper">
    <span class="text-with-margin" id="agentName"></span>
    <fw-button class="text-with-margin" id="btnSayHello" color="primary"> Say
      Hello
      👋 </fw-button>
    <p>to Freshdesk!</p>

This file has been truncated. show original

Aaron_Ehrensberger · June 16, 2023, 12:22pm

Thanks for the reply.

Yes, we are on platform-version 2.3.

This is the head section of the index.html file. It has not been touched from the sample code that was generated with the sample app generated by freshworks:
code

Raviraj · July 21, 2023, 2:18pm

@Aaron_Ehrensberger Where is the app.js file imported?
Could you move it to the last line in the head section and see if the issue disappears? Also, add the defer attribute to the app.js script to ensure that the script is loaded only after all the other files are imported first.