Skip to main content
s5der_clothing
s5der_clothing
Helper
May 21, 2025
Solved

Hide chat button on init and every time on close widget

  • May 21, 2025
  • 2 replies
  • 297 views

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.

 

    Best answer by Andy

    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.

    2 replies

    Andy
    AndyAnswer
    Fronteer
    May 21, 2025

    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.

      s5der_clothing
      s5der_clothingAuthor
      Helper
      May 22, 2025

      Hi Andy! What a nice solution! Much appreciated.

      Terms & ConditionsAccessibility statement