Product update · Widget
Put the chat right on your page with the inline embed
Besides the usual floating chat button, you can now place your chatbot inside your page, on a contact or support page, as part of the layout.
· 3 min read
- Shipped
- Area
- Widget
- Available on
- Every plan
The floating chat button works well across a whole website. But on some pages you want the chat to be the page: a "Contact us" or "Ask us anything" page, a help centre, or a booking page where the conversation is the main thing visitors came for. Now you can put your chatbot inside the page itself, sized and placed where you want it, with no button to click first.
What's new
The install code dialog now has two options:
- Popup is the embed you already know: a chat button in the corner that opens the chat window.
- Inline shows the chat inside an element on your page. It is open from the start, scrolls with the page like any other content, and has no launcher button or close button.
It's the same chatbot either way. The answers, knowledge, lead form and design all come from Studio. Only the snippet you paste is different, so you can use the popup across your site and the inline version on one page.
How to use it
- Open your chatbot in Studio and click Integrate, then Integrate to Website.
- Choose the Inline tab.
- Copy the snippet. It has two parts: an empty
divthat marks where the chat goes, and the script that loads it. - Paste it into your page where you want the chat to appear.
- Change the
div's width and height to fit your layout. The snippet starts at 100% wide, up to 480 pixels, and 640 pixels tall.
Good to know
- You set the size. The chat fills whatever element you put it in, so its size, rounded corners and shadow come from that element and your page's styles.
- Button settings don't apply. The launcher button, its position and offsets, and the message bubble that appears above the button before the chat opens are all for the popup. Inline mode skips them, and it doesn't auto-open because it's already open.
- If the spot isn't found, it falls back to the popup. If the snippet's script can't find the element it's meant to fill, the chatbot loads as the normal floating button instead of failing.
- Your domain still needs to be on the allowlist. As with the popup, the chatbot only runs on domains you've added in your organization settings.
- One chatbot, two embeds. You don't need a second chatbot for an inline page. Leads and conversations from both land in the same place in Studio.
For developers
Inline mode is chosen in the embed snippet, not stored on the chatbot. Add inline: { container: "#your-element" } to window.userChatbotConfig, where container is any CSS selector. The script looks up the element after it loads the chatbot's settings, so a container rendered later by a single-page app still works. If the selector matches nothing (or is invalid), the script logs a console warning and uses popup mode.
<div id="hyperleap-chatbot" style="width: 100%; max-width: 480px; height: 640px;"></div>
<script>
window.userChatbotConfig = {
chatbotId: "YOUR_CHATBOT_ID",
privateKey: "YOUR_EMBED_KEY",
inline: { container: "#hyperleap-chatbot" },
};
// ...then load the chatbot script, exactly as in the snippet Studio gives you
</script>