Solved

frontchat iframe not finished initializing

  • 21 December 2023
  • 3 replies
  • 86 views
davidtanner

We are having an issue with our widget loading and not getting notifications when a chat messages is sent to the user.

We are using the frontchat widget and we are loading through a script and accessing it through a custom react component. When the react component loads the “front-chat-iframe” isn’t loaded with it.

Here is our code in the react component.

    if (window.FrontChat) {
      window.FrontChat('onUnreadChange', unreadCount => {
        this.updateNotificationCount(unreadCount);
      });
    }

    this.openLauncher = this.openLauncher.bind(this);

 

We get the following error.

chat.bundle.js:2 Error: [FrontChat] Have not finished setting up FrontChatApp
    at T (chat.bundle.js:2:47077)
    at x (chat.bundle.js:2:46893)
    at window.FrontChat (chat.bundle.js:2:46488)
    at new FrontLauncher (web-bundle.js:498:332)
    at constructClassInstance (react-dom.development.js:12880:18)
    at updateClassComponent (react-dom.development.js:17100:5)
    at beginWork (react-dom.development.js:18620:16)
    at beginWork$1 (react-dom.development.js:23179:14)
    at performUnitOfWork (react-dom.development.js:22154:12)
    at workLoopSync (react-dom.development.js:22130:22)
    at performSyncWorkOnRoot (react-dom.development.js:21756:9)
    at scheduleUpdateOnFiber (react-dom.development.js:21188:7)
    at updateContainer (react-dom.development.js:24373:3)
    at eval (react-dom.development.js:24758:7)
    at unbatchedUpdates (react-dom.development.js:21903:12)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757:5)
    at Object.render (react-dom.development.js:24840:10)
    at eval (react_phoenix.js:43:27)
    at NodeList.forEach (<anonymous>)
    at Function.value (react_phoenix.js:35:31)
    at HTMLDocument.eval (react_phoenix.js:49:16)

 

icon

Best answer by jason 21 December 2023, 21:39

View original

3 replies

jason
Userlevel 4
Badge +7

Hey David,

We have a new callback you can use to help with this; `onInitCompleted`. 

 

Something that might work for you is;

  function onInitCompleted() {
    window.FrontChat('onUnreadChange', unreadCount => {
      this.updateNotificationCount(unreadCount);
    });
  }

  function initFrontChat() {
    window.FrontChat('init', {
      chatId: 'your-chat-id',
      useDefaultLauncher: true,
      onInitCompleted: () => onInitCompleted()
      });
  };

This will ensure you don’t try to call FrontChat(‘onUnreadChange’, ...) until after the widget has been initialized. 
We have docs on this available here → https://dev.frontapp.com/docs/chat-sdk-reference 

 

Roberto

Hi, 

Thank you for this now function. 
i see now when the user reloads the page, the unread message is reset to null.. 
How can i resolve this, by showing the unread message until the message is read? 

 

jason
Userlevel 4
Badge +7

Hi Roberto,

This is something controlled by Front. I do see that the behavior here is perhaps not the most effective, so I’ll report this to our engineers and see what we can do to improve this experience and keep the unread bubble present until the visitor views the message. 

Reply


Terms & ConditionsCookie settings