Skip to main content

I want to have my own button placed on page, on click it opens chat widget. And when chat is closed, again set iframe to 1px height and width. I didnt find any events for this.

var chatFrontLoaded = false;
		let chatBtnFront = document.querySelector(".spider-front-chat-btn");
		chatBtnFront.addEventListener("click", function(e) {
		e.preventDefault();
		if(!chatFrontLoaded) return;
		window.FrontChat("show");
		});
		setTimeout(()=>{
		window.FrontChat("init", {chatId: "",shouldHideExpandButton:true, useDefaultLauncher: true, onInitCompleted: () => {
			chatFrontLoaded = true;
			window.FrontChat("hide");
			const chatIframe = document.querySelector("#front-chat-iframe");
			chatIframe.style.height = "1px";
			chatIframe.style.width = "1px";
		}});
		if(chatFrontLoaded) {

		} 

	}, 1500);

It is also very sad that I need wrap it all in setTimeout, because window.FrontChat returns error.

 

Hi there! The window.FrontChat error is most likely happening because your code is trying to call the Front Chat SDK before it has fully loaded in the browser.

To avoid this, I recommend using a small helper function that waits for the SDK to be available:

// Helper function -> Waits until the Front SDK is loaded in browser
  function waitForFrontChat(callback) {
    const interval = setInterval(() => {
      if (window.FrontChat) {
        clearInterval(interval);
        callback(); // Once ready, run your SDK code
      }
    }, 100);
  }

  // Safely initialize Front Chat after DOM and SDK are ready
  document.addEventListener('DOMContentLoaded', () => {
    waitForFrontChat(() => {
      window.FrontChat('init', {
        chatId: 'your-chat-id',
        useDefaultLauncher: true,
        shouldHideExpandButton: false,
        onInitCompleted: () => {
          // Safe to interact with the widget here
        }
      });
    });
  });

While setTimeout can work, this polling approach is much more reliable. It ensures that your code only runs once the SDK is fully available, regardless of how fast or slow the script loads.

Regarding your main question I’ve put together a demo that demonstrates how you can close/hide the widget completely from view. You can view that here. Note: What you’re trying to do isn’t officially supported so your mileage may vary. The chat widget is not meant to be hidden completely from view, so we have no native SDK functions that allow for this.

Hi Andy! What a nice solution! Much appreciated.

Reply


Terms & ConditionsCookie settings