Fix Chatbot Blocking Background

If your Stack AI chatbot is blocking elements behind it after embedding it, you need to replace the script with standard HTML.

Prerequisites

• Have a project ready, or create a new project.

• Have your project chatbot published.

Step-by-step Guide:

1. Get chatbot URL

To begin the process, you must go to the export section.

- Navigate to Export.
- Select Website Chatbot.
- Get the `data-project-url` from the "Embed in Website" section.

The chatbot url will have the form https://www.stack-ai.com/embed/[org_id]/[public_key]/[flow_id].

1. Modify Script

In your HTML website, replace the chatbot script for the following HTML code:

<!-- Iframe code -->
<iframe
  id="iframeId"
  src="[YOUR_CHATBOT_URL_HERE]"
  width="350"
  height="600"
  frameborder="0"
  style="position: fixed; z-index: 1; bottom: 15px; right: 15px; max-width: calc(100vw - 15px); max-height: calc(100vh - 15px);"
></iframe>

<!-- Script for handling the resizing -->
<script>
  function handleMessage(event) {
    if (event.data.type === 'chatbotStateChange') {
      const iframe = document.getElementById('iframeId')
      if (iframe) {
        if (event.data.isClosed) {
          iframe.style.width = '60px'
          iframe.style.height = '60px'
        } else {
          iframe.style.width = '350px'
          iframe.style.height = '600px'
        }
      }
    }
  }

  // Attach event listener
  window.addEventListener('message', handleMessage)

  // If you want to clean up the event listener when the page unloads (optional)
  window.addEventListener('beforeunload', function () {
    window.removeEventListener('message', handleMessage)
  })
</script>

Finally, replace your project url in place of [YOUR_CHATBOT_URL_HERE].