Issue on Freshdesk Library V2 does not initialize when loading freshdesk library dynamically from angular App

Hi Team,
When I am dynamically loaded “https://static.freshdev.io/fdk/2.0/assets/fresh_client.js” file from the angular App, app.initialize is not working properly. I am not getting any success and failure log information, after the app initialization. I have attached screenprints for your reference. If you have any query please let me know.

Hi @Dhurgeswari_Ganesan

Welcome to the community :wave: ! Ideally, app should be accessible on the corresponding placeholder location. You can confirm that by selecting the HTML (it is of the same name as the HTML in the app) from the DevTools & accessing it from console like so:

image

Can you add further details on which placeholder you are targeting, code snippet & screenshot?

Can you attach them again? Unfortunately, it seems to be missed out & I am not able to see them in the topic description.

Hi Hemchander,
sorry for this. I have attached the screenprints below
screenprint1|690x341

Hi @Dhurgeswari_Ganesan

It seems like this custom Angular app is running inside an iframe within the Freshworks app. Fun fact: A Freshworks frontend app is already running inside an iframe :smiley: ! The client object obtained by including fresh client assumes that it is running inside the Freshworks app’s iframe. By including it inside a child iframe, the client won’t be able to communicate with the parent, and a gap is created between product and app. Hence the initialization failure.

You can initialize the app at the parent iframe / template.html level and pass messages to the child (say event trigger, etc) like so

document.getElementById("app-child").contentWindow.postMessage({ "data": true }, "*");

The corresponding listener can be like this:

window.addEventListener('message', function (e) {
  // some logic
});

For instance,

Note that by posting messages to the contentWindow, only the concerned child iframe receives the message. As a general recommendation, you can move the code from child iframe to app to leverage complete functionality. It would also be secure and simple.

Hi Hemchander,
Thanks for your Reply. Could please update the above comment on the below support ticket.
https://support.freshdesk.com/support/tickets/7491008

Hi Hemchander,
I have tried above your suggested way. Here I have initialized the app at the parent frame and also pass messages to the child using the window listener. But still, I am not able to get FDK Client value from the FDK app to the angular App. I have attached screenshots for your reference. Please check and if you have any query please let me know.