Skip to main content
Front Developer
Front Developer
Fronteer
December 20, 2022
Solved

Problems showing the Chat JS widget

  • December 20, 2022
  • 3 replies
  • 610 views

Hi,

 

We're using the JS Chat Widget API. I found an issue when using the `show` command. If the 'show' command is run too soon after the 'init' command, it has no effect. Delaying the 'show' command by using setTimeout seems to work around the problem.

 

Is this a bug? There doesn't appear to be a way to tell if the chat is ready to be shown or not.

 

Thanks for your help

Best answer by Support Engineering

I can create a feature request to make the init request return a Promise indicative of its asynchronous nature.  Until then, you'll need to wait 1 second before calling show.

It's not something documented, although I should be able to make a case for something like this to be publicly documented.  However, we find this to be a good code snippet to prevent 'init' errors.  Please note the async property in the script; this blocks the call to onload until the script is finished loading.

 

<script src="https://chat-assets.frontapp.com/v1/chat.bundle.js" onload="initFrontChat()" async></script>
<script>
  function initFrontChat() {
   window.FrontChat('init', {chatId: 'YOUR_CHAT_ID', useDefaultLauncher: true});
  };
</script>

--Evan

3 replies

S
Support Engineering
Community Manager
December 20, 2022

Hi,
 

Would you pleae check for the existence of a document element with the id "front-chat-iframe" before calling FrontChat('show') and let me know if that helps?

 

--Evan

Front Developer
Front DeveloperAuthor
Fronteer
December 20, 2022

Thanks for your response. I tried the change but still have the same issue. It looks like if the 'show' command is called within about 500ms of the 'init' command, it has no effect even if id is present.

S
Support EngineeringAnswer
Community Manager
December 20, 2022

I can create a feature request to make the init request return a Promise indicative of its asynchronous nature.  Until then, you'll need to wait 1 second before calling show.

It's not something documented, although I should be able to make a case for something like this to be publicly documented.  However, we find this to be a good code snippet to prevent 'init' errors.  Please note the async property in the script; this blocks the call to onload until the script is finished loading.

 

<script src="https://chat-assets.frontapp.com/v1/chat.bundle.js" onload="initFrontChat()" async></script>
<script>
  function initFrontChat() {
   window.FrontChat('init', {chatId: 'YOUR_CHAT_ID', useDefaultLauncher: true});
  };
</script>

--Evan

Terms & ConditionsAccessibility statement