Jasper•6h ago

Hide launcher on click (x)

Hi, my client is about to launch their chatbot on their webshop, and they’re using the voiceflow widget for it. Unfortunately, we can't go live just yet because the launcher is overlapping some buttons in the checkout process. Is there a way to add a close (X) button above the launcher to allow users to hide it? Or any other solutions? Thanks!!

1 Reply

Tico | Voiceflow Assistant•5h ago

You can – the web-chat widget exposes a small JS API you can call from your site. 1) Load the widget as usual

<script type="module">
  import "https://cdn.voiceflow.com/widget/bundle.mjs";
  window.voiceflow.chat.load({
    verify: { projectID: "<PROJECT_ID>" },
    versionID: "production",
    url: "https://general-runtime.voiceflow.com"
  });
</script>

<script type="module">
  import "https://cdn.voiceflow.com/widget/bundle.mjs";
  window.voiceflow.chat.load({
    verify: { projectID: "<PROJECT_ID>" },
    versionID: "production",
    url: "https://general-runtime.voiceflow.com"
  });
</script>

2) Add your own button (or any element) and call the API when it’s clicked

<!-- close icon placed wherever you like -->
<div id="vf-close-launcher" style="position:fixed;bottom:115px;right:24px;cursor:pointer;z-index:9999;">✕</div>
<script>
  // hide the launcher + widget when the X is pressed
  document.getElementById('vf-close-launcher').addEventListener('click', () => {
    window.voiceflow.chat.hide();     // <- hides the bubble and the chat if open
  });
</script>

<!-- close icon placed wherever you like -->
<div id="vf-close-launcher" style="position:fixed;bottom:115px;right:24px;cursor:pointer;z-index:9999;">✕</div>
<script>
  // hide the launcher + widget when the X is pressed
  document.getElementById('vf-close-launcher').addEventListener('click', () => {
    window.voiceflow.chat.hide();     // <- hides the bubble and the chat if open
  });
</script>

The relevant API methods are: • window.voiceflow.chat.hide() – hides both the launcher bubble and the chat window • window.voiceflow.chat.show() – shows the launcher again (useful if you want to give users a way to reopen it later) Other practical work-arounds ──────────────────────────── • Re-position the bubble with CSS instead of hiding it:

.vfrc-launcher { bottom: 30px; right: 30px; }  /* move it away from the checkout CTA */

.vfrc-launcher { bottom: 30px; right: 30px; }  /* move it away from the checkout CTA */

• Automatically hide the bubble on specific pages (e.g. your checkout) so no extra button is needed:

if (location.pathname.startsWith('/checkout')) {
  window.voiceflow.chat.hide();
}

if (location.pathname.startsWith('/checkout')) {
  window.voiceflow.chat.hide();
}

Docs: https://docs.voiceflow.com → Custom Triggers → window.voiceflow.chat API

Voiceflow

Welcome to Voiceflow's docs

Build, manage, and deliver chat and voice agents for customer support and beyond.

Hide launcher on click (x)

Did you find this page helpful?