Using the Freshworks Widget with Rails, Javascript, and Turbolinks

[nadia]

Hello,

I’ve been using the Freshworks widget on my production app for a while now. Now that I have paid users, I want to be able to set the priority for paid users to ‘High’ in the background, whenever they support a ticket.

I have embedded the code in the necessary place and use the API like so:

Essentially, fill out the current user’s email if they are logged in, hide the priority field, and then set priority to ‘high’ if they are paid, or ‘low’ if they aren’t.

When I first load a page, everything works as expected.

However, as soon as users navigate to any other page, the Javascript is no longer fired.

I’ve tried many different things, from trying to call the code in different places, to trying to manually do what I want, but to no avail.

Has anyone successfully got the Freshworks widget working with the API on an app that is built with Ruby on Rails and has Turbolinks enabled?

How do you ensure that no matter what page you’re on, the code you need to run does so?

Also, before I started using the API recently, I would always see this error message in the Console when navigating to new pages after the first page:

VM2797 79000000776.js:1 Uncaught TypeError: Cannot read property 'postMessage' of null
    at Object.postMessage (VM2797 79000000776.js:1)
    at Object.widgetRenderComplete (VM2797 79000000776.js:1)
    at Object.handleMessage (VM2797 79000000776.js:1)

When I resolved it earlier, by putting the embed code elsewhere in the app, it meant the widget didn’t load again beyond the initial page load. So I put everything back to where it should be and have just been ignoring the message. I wonder whether it has any bearing on the problems I’m having now I’m trying to customise the widget with the API some more.

Thank you in advance for any help I get! Let me know if you have any more questions or need to see more parts of the code.

[Saif (Saif Ali Shaik)]

@nadia,

Thank you for sharing the issue in a very elaborative way. From what I understand, the FreshworksWidget(..) doesn’t create tickets with higher priority (for paid customers) beyond the initial page where widget is loaded first.

Meanwhile, I will try to see if I could get some help/advice from the Freshdesk team.

Just thinking out loud, did you try adding Widget Script Tags in multiple pages? I’m not sure even if that’s possible though.

[thanashyam (Thanashyam Raj)]

This widget relies on 2 Iframes. Can you try to make both of them as persistent elements. Ref: GitHub - turbolinks/turbolinks: Turbolinks makes navigating your web application faster

IDs of the iframes: launcher-frame and freshworks-frame.
You could probably do that by listening one of the Turbolinks events like turbolinks:request-start

[nadia]

Hi @Saif and @thanashyam,

Thank you for attempting to help.

Saif, I’m trying to load it on every page, and the code is on every page, it’s just that the Javascript API isn’t being triggered. If you could get me some technical help from the team, that would be incredible. Especially from someone familiar with Ruby, Rails, and Turbolinks.

Thanashyam, I tried making your suggestion work, but no success so far. Even when I manually put in data-turbolinks-permanent to the right iframes, the JS API isn’t triggered again.

I’m essentially looking for a solution similar to the ones posted here — Turbolinks Compatibility with Zendesk Web Widget — that works for the Freshdesk widget. I’ve used the Zendesk one successfully in the past. The problem is that the code for the Freshdesk widget does not follow the same pattern with its three blocks of <script> tags, especially this one:

<script type='text/javascript' src='https://euc-widget.freshworks.com/widgets/xxxxxxxxxxx.js' async defer></script>

Thank you,

Nadia

[Philippe_dp (Philippe Gillès)]

Hello, @nadia I’m facing the same issue. Did you manage to make it work ? I’m losing hope.

[ben (Benjamin udink ten cate)]

I ran into this issue too with Rails and turbolinks and fixed it by moving the javascript for the widget to the end of the body instead of the head

[Philippe_dp (Philippe Gillès)]

@ben It does not work. Event destroying and rebooting the widget will give the error.

FreshworksWidget('destroy'); //undefined
FreshworksWidget('boot'); //undefined

VM3804 xxxxxxx.js:1 Uncaught TypeError: Cannot read properties of null (reading 'postMessage')
  at Object.postMessage (VM3804 xxxxxxx.js:1:6091)
  at Object.widgetRenderComplete (VM3804 xxxxxxx.js:1:5849)
  at Object.handleMessage (VM3804 xxxxxxx.js:1:5972)

There is definitely a bug in the javascript code. They are looking into it but the ticket had been ongoing for 5 months now waiting for developer fix...

[Rahul_Katikineni]

This error can safely be ignored. Just moving the script tags to the body will suffice.
This is happening because every reinitialize of the freshworks help widget is binding its own window onmessage event handler on navigation to a new route with no means to destroy it cleanly.
Therefore, every FreshworksWidget call is invoking previously bound handlers as well, leading to this issue. Apart from the error log, there will not be any side effects.