Embedded Chat

Display the chat widget inline on your page instead of as a floating bubble

All Plans

Overview

By default, the Asyntai chat widget appears as a floating bubble in the corner of your website. With Embedded Chat, you can also display the chat directly on your page — for example, in a "Chat with us" section on your homepage.

The floating bubble still works alongside the embedded chat. Visitors who don't scroll to the embedded section can still use the bubble. Both share the same conversation.

How It Works

Add one script tag Place it wherever you want the chat to appear in your HTML

Chat renders inline The widget appears at that position, always visible, same size as the regular chat

Bubble stays active The floating bubble remains in the corner for visitors who don't see the embedded chat

Shared conversation Messages sync between the embedded chat and the floating widget in real-time

Setup

Add this single line of HTML wherever you want the chat to appear on your page:

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Replace YOUR_WIDGET_ID with your widget ID. You can find your embed code with your ID pre-filled on the Embedded Chat setup page.

Note: The main chat-widget.js script must also be on the page. If you've already installed the Asyntai widget on your site, this is already taken care of.

Example

Here's how you might use it on a homepage:

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

Details

Sizing

The embedded chat renders at the same size as the floating widget: 400px wide and 650px tall on desktop, full-width and 550px tall on mobile. You can control where it sits by styling the parent container.

Floating Bubble Behavior

When the embedded chat is visible on screen and a visitor clicks the floating bubble, it scrolls to the embedded chat. If the embedded chat is not in view, the bubble opens the regular floating chat overlay.

Message Sync

Both the embedded and floating chat share the same conversation. Messages sent from either one appear in both. The same session, AI context, and chat history are used.

Multiple Pages

You can use embedded chat on some pages and the regular floating widget on others. Just include the embed script on the pages where you want the inline chat. The conversation carries over between pages as usual.

Live Preview

Here's a live embedded chat so you can see how it looks:

Requirements

The main Asyntai chat widget (chat-widget.js) must be installed on the page

Works on all plans — no upgrade required

Compatible with all browsers that support Shadow DOM (all modern browsers)

Tip: Test the embedded chat by placing it on a staging page first. Make sure it looks right within your page layout before pushing to production.

Documentation