Embedding on Website

Your assistant is ready. Now let's put it where your visitors can actually use it. This page covers the no-code ways to get the chat live: copy-paste snippets, plugins, and a ready-made share link. None of them require writing JavaScript.

No-code page
Everything here works by copying a snippet or pasting an Assistant ID — no code. If you're a developer and want full control over appearance, behavior, events, and programmatic control, see the SDK Integration Guide.

On this page

Before you start

You need two things to embed an assistant:

  • A public assistant in EchoAI.
  • Its Assistant ID — found on the assistant's Embed page, with a copy button to put it on your clipboard.
Public assistants only
Only public assistants can be embedded. Internal knowledge-base and contract assistants are accessed through the dashboard.

Which method should I use?

Pick the method that fits where your assistant should appear and what platform you're on:

MethodBest forCode needed
Floating chat buttonA chat launcher in the corner of any pageNone copy-paste snippet
Inline widgetChat built into a specific page (support, contact)None copy-paste snippet
Direct share linkSharing the chat without touching your site at allNone just a URL
WordPressWordPress sitesNone plugin
FramerFramer sitesNone component
Facebook MessengerChatting directly inside MessengerNone dashboard connect

Floating chat button (most popular)

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

  1. Open 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. The snippet uses HTML data attributes, so no JavaScript is involved. If you don't set a custom icon, the launcher shows the assistant's uploaded profile image.

Position options: bottom_right (default), bottom_left, top_right, top_left — set them on the Embed page.

On desktop, the chat panel opens next to the button. On mobile (below 700px), it opens fullscreen.

Inline widget

Don't want the chat to float — want it built into a page instead? Mount it in a container, on your support, contact, or any other page.

  1. Open your assistant's Embed page and copy the inline widget snippet.
  2. Paste it where you want the chat to appear on the page.

The widget fills the container's width and uses the height you set on the Embed page. If no height is set, it fills the container's full height.

Inline starts in preview on mobile
On mobile, the inline widget starts in preview mode and expands to fullscreen when opened. See Preview Mode for what the welcome screen looks like.

Direct share link

The fastest way to share your assistant — no embedding, no website changes. EchoAI hosts a standalone full-page chat for every public assistant at:

https://app.echoaichat.com/share/YOUR_ASSISTANT_ID

Open your assistant's Embed page and use the copy button next to the share link, or the Open button to preview the page. Then:

  • Send it in an email, a newsletter, or a chat message.
  • Put it behind a button or a QR code.
  • Share it on social media.

Visitors get the full chat experience on a clean, dedicated page — no setup on your side. Like every embed method, the link only works for public assistants.

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. Open EchoAI Settings in the WordPress admin menu.
  5. Enter your Assistant ID.
  6. Configure appearance: position, colors, size.
  7. Save changes.

The chat widget appears on every page of your site. To embed it on specific pages only, use the [echo_ai] shortcode.

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 chat button in the corner.
  4. Drag the component onto your canvas.
  5. Enter your Assistant ID in the component's properties.
  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. Sign in 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 also synced as content sources.

Gradual rollout
Messenger is currently available only for selected organizations; we're turning it on for everyone gradually.

Troubleshooting

  • Chat not appearing? Check that the Assistant ID is correct and that the assistant is a public type.
  • Styles look broken? The chat uses its own isolated styling, so your page's appearance doesn't affect it — and the chat doesn't change your page either. There's nothing to fix here.
  • Font not loading? The chat brings its own font. If the network won't let it load, it automatically falls back to the visitor's system font — that's not an error.
  • Conversation not kept between pages? The chat remembers the conversation in the visitor's browser, tied to the Assistant ID. Use the same ID on every page.

Looking for more?

  • Preview Mode — the welcome screen visitors see before they start chatting.
  • SDK Integration Guide — full control over appearance, behavior, events, and programmatic control (user context, URL context, starter questions, text customization, header, window.echoInstance / resetThread).