Floating Chat Button (Most Popular)

A small chat icon in the corner of your page. Visitors click it, the chat opens.

1. Go to your assistant's Embed page in the sidebar.
2. Copy the code snippet.
3. Paste it before the closing </body> tag on your website.

That's it. Your assistant is live. On desktop, clicking the button opens a fixed chat panel next to it. On mobile, the chat opens fullscreen.

Position options: bottom_right (default), bottom_left, top_right, top_left.

Inline Widget

Want the chat built into a page instead of floating? Mount it inside a container element.

Place a <div> where you want the chat to appear, then initialize the SDK with the container option pointing to your element. The widget fills the container's width and uses the height you specify. If no height is set, it defaults to 100% of the container.

Great for support pages, contact pages, or anywhere you want the chat front and center.

Preview Mode

Preview mode shows a welcome screen instead of the full chat. Visitors see the greeting, starter questions, and a "Start chat" button. The full chat opens when they click.

Set mode: 'preview' in the SDK configuration.

• New visitors see the greeting message, starter questions, and an animated "Start chat" button.
• Returning visitors see the assistant icon and name, "Last message X ago" timestamp, and a "Continue chat" button alongside starter questions.
• On mobile, preview mode is the default for inline widgets. Floating buttons always open in full mode.

Data Attributes (No JavaScript)

You can configure the SDK entirely with HTML data attributes instead of writing JavaScript:

• data-echo-container -- Marks the element for auto-initialization.
• data-echo-assistant-identifier -- Your Assistant ID.
• data-echo-floating-enabled -- Enable floating button mode.
• data-echo-floating-position -- Button position.
• data-echo-floating-tooltip -- Tooltip text.
• data-echo-height -- Widget height in pixels.

The SDK auto-initializes when it finds an element with data-echo-container. No JavaScript needed.

WordPress

1. Download the official EchoAI Chat WordPress plugin.
2. In your WordPress admin panel, go to Plugins > Add New > Upload Plugin.
3. Upload the file and click Install Now, then Activate Plugin.
4. Go to EchoAI Settings in the WordPress admin menu.
5. Enter your Assistant ID and configure appearance options.
6. Save changes.

The chat widget appears on all pages. To embed on specific pages only, use the shortcode [echo_ai].

See the WordPress Plugin guide for detailed instructions.

Framer

1. Open your Framer project.
2. Go to Assets > Add Asset > From URL.
3. Paste one of the component URLs (found on the Embed page):
   • Chat Widget Component -- A full chat widget you can place anywhere.
   • Floating Button Component -- A floating chat button in the corner.
4. Drag the component onto your canvas.
5. Enter your Assistant ID and customize appearance in the properties panel.
6. Publish your Framer site.

Facebook Messenger

Connect your public assistant to a Facebook Page so visitors can chat with it directly in Messenger.

1. Open your assistant's detail page and go to the Channels tab.
2. Click Connect Facebook Page.
3. Authenticate with Facebook and select the Page you want to connect.
4. Grant the requested permissions (manage pages, send and receive messages).

Once connected, your assistant responds automatically to Messenger conversations. Threads appear in the Threads list alongside web chat threads. Facebook Page posts and about info are synced as additional content sources.

Customization Options

These options work across all SDK integration methods.

User Context

Pass metadata about the current visitor to help the AI personalize responses. For example, you can pass a membership tier, company size, or user ID.

• Maximum 1000 characters.
• The AI receives this context and can use it to tailor responses. A premium member might get a different greeting than a free trial user.

URL Context

Let the assistant know which page the visitor is currently viewing. The SDK can auto-detect the current URL, or you can pass a custom URL.

This helps the AI provide page-relevant answers. On a pricing page, the assistant can proactively address pricing questions.

Starter Questions Override

Replace the default starter questions (configured in the dashboard) with custom ones for a specific page. Maximum 5 questions.

Useful for showing different starter questions on different pages of your website. For example, your pricing page could suggest "How does pricing work?" while your features page suggests "What can I do with Echo?"

Text Customization

Override the default text labels to match your brand voice:

• inputPlaceholder -- Input field placeholder text
• sourcesLabel -- Label for source citations
• searchingText -- Text shown while searching
• toolsText -- Label for tools section
• loadingText -- Loading indicator text
• startButtonLabel -- Preview mode button text

Header Configuration

Control whether the chat header is visible. Set header.enabled to true or false. Hiding the header gives you more chat space, useful for inline widgets where context is already clear.

Mobile Behavior

The SDK handles mobile devices (screen width 700px or less) automatically:

• Floating button -- Opens the chat fullscreen. The button shrinks when the chat is open and is hidden entirely on mobile. A backdrop covers the page behind the chat.
• Inline widget -- Preview mode is the default. When expanded, the chat goes fullscreen with body scroll lock.
• Keyboard handling -- The chat panel resizes when the mobile keyboard opens and closes. The header hides to maximize space.
• iOS safe areas -- The SDK handles notch and home indicator areas automatically.

Programmatic Access

The SDK instance is stored on window.echoInstance for programmatic control:

• resetThread() -- Reset the conversation.
• resetThread({ userContext: '...' }) -- Reset with updated user context.

Troubleshooting

• Chat not appearing? Check that the Assistant ID is correct and the assistant is a public type.
• Styles look wrong? The SDK uses Shadow DOM for complete style isolation. Your page's CSS won't affect it.
• Fonts not loading? The SDK loads the Inter font independently. Network restrictions on font CDNs may cause fallback to system fonts.
• Chat not persisting between pages? Conversations are stored in localStorage using the assistant identifier. Make sure the same identifier is used across all pages.

Need More Control?

The SDK Integration Guide has the full reference with all configuration options, code examples, and advanced usage patterns.