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:
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]
.
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]
.
Last updated
Was this helpful?