Landing Page Chatbot

The Landing Page Chatbot is a great export option if you'd like your users to be able to optionally interact with a chatbot while on your website. The chatbot will be available as an icon that opens a window.

Publish your project first, then embed your chat assistant in your website by clicking the Embed button on the top right of the page. Paste the HTML or React code into the UI of your website. Each time you make changes to your project, remember to Publish them first so that the changes populate to the user side.

Configuration

You can customize some of the options for this interface:

• User feedback: allow the user to give thumbs up or thumbs down feedback on chat responses, you will be able to see this feedback in the Manager View

• Related results: shows the user suggestions for follow-up inputs to the chat assistant

• Show steps: shows the user what parts of your project are processing

• Show attachment icon: allows the user to attach files by clicking the attachment icon on the bottom left of the chat box

• Show audio icon: allows the user to do voice-to-text instead of typing

• Default loading message: shows a message while the chat assistant is thinking

• Welcome Message: shows the user a welcome message before they've queries the chat assistant

• Enable clear chat: allows the user to clear the chat

• Conversation Starters: shows the user example queries before the user has begun interacting

• Icon Message: shows a message above the icon of that chat assistant

If your chatbot is blocking your 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].