A AtomicX Chat
Help Sign in

Updated October 5, 2026

Embed the chat widget

Overview

Once your widget is set up, you put it on your website by adding a short snippet of code. The Widget Generator page builds that snippet for you. It's based on the configuration you choose, plus a few display options. You then copy the snippet into your site, or send it to whoever manages your website.

To open it, go to Insights → Widget generator.

Steps

Generate your embed code

  1. Go to Insights → Widget generator.
  2. Under 1. Select Configuration, choose a configuration from the list. If you don't have one yet, click Create Configuration. See Configure your chat widget.
  3. Under 2. Display Mode, choose:
    • Floating: a corner bubble that opens a popup chat.
    • Full Page: a large chat window, 90% of the page's width and height, in the centre of the page.
  4. Under 3. Button Position, choose where the chat button appears: Bottom Right, Bottom Left, Top Right, or Top Left. It starts on the position saved in the configuration, and all four corners work with either integration method.
  5. Under 4. Widget Theme, choose Light (white background) or Dark (dark, see-through background).
  6. Under 5. Integration Method, choose:
    • Auto-Initialize: a single snippet that starts the widget as soon as the page loads. This is the best choice for most websites.
    • Manual Setup: two snippets, for web developers who want more control over when and how the widget starts.
  7. Under 6. Generated Code, click Copy. You'll see "Code copied to clipboard!"

The Live Preview panel shows the choices you made under Configuration Details (name, theme, display mode, button position, and status), along with a preview of the widget.

Add the code to your website

  1. Open your website's page template or site-wide settings. Most website builders have a place for "custom code" or "footer scripts."
  2. Paste the snippet just before the closing body tag of the page. To show the chat on every page, add it to a template or footer area that every page shares.
  3. Publish your changes, then visit your site. The chat button (or full-page chat) should appear.

The copied snippet looks roughly like this. Always use the one you copy from the page, because it contains your own widget's details:

<!-- AtomicX Chat Widget -->
<script
    src="...your widget script address..."
    data-atomicx-config-id="...your configuration ID..."
    ...
></script>

What visitors see when a conversation ends

When a conversation ends (the workflow finishes, the chat times out, or your team closes it), the chat stays on screen:

  • If the visitor types another question, the chat carries on in a new conversation, with the earlier messages still visible. No welcome message is shown again.
  • If the visitor closes the chat, the ended conversation is cleared. Opening the chat again starts a fresh conversation.
  • At any time, the visitor can click the circular-arrow icon in the chat header (tooltip: Start New Conversation) to clear the chat and start over.

In View conversations, each of these appears as a separate conversation.

Match the website's language

The widget reads the page's <html lang> declaration when starting a new conversation. It uses that language, whichever it is. Without one, it checks browser preferences, then the configuration's default language. Ask your website developer to keep the page language declaration accurate; you can use the same embed snippet across pages in different languages.

If the visitor writes in another language, the chat switches to it. Reloading resumes the saved conversation language, and a page-language change affects the next new chat rather than switching an active one. See Chat languages and translations for defaults and translation review.

Tips

  • Both Auto-Initialize and Manual Setup snippets include your Button Position choice, so the chat button appears in the corner you picked.
  • Changes you make later under Chat → Configurations, such as colours, logo, or workflow, show up on your site without changing the snippet. If you change the display mode, theme, or button position, generate and paste a new snippet.
  • Make sure the configuration is Active, or the widget won't work for visitors.
  • Using several widgets? Generate a separate snippet for each configuration, and add only one snippet to each page.
  • Try the widget on the Chat test page first. See Test your chat.
  • If the widget doesn't appear after you publish, clear your browser cache, check that the full snippet was pasted, and then contact support.
  • While a visitor has a chat open, the widget tells AtomicX which pages they visit, where they came from, and their browser time zone. Your team sees this on the Visitor page of the AtomicX mobile app. Anything after a ? or # in a link is left out.

Page content in AI answers

To let AI explain or summarize the page containing the widget, enable Use Page Content for AI Answers in Chat → Configurations → Edit → Additional Settings, save, and reload the widget. The widget sends a limited snapshot of the page text with each AI message. Review which pages should share their text before enabling it. Your web developer can exclude a section with data-atomicx-private, or exclude an entire page with data-atomicx-page-context="off" on its body. See Page content in AI answers for examples and limits.

An unhandled error has occurred. Reload ×