Website Embed

This is the universal way to add your chatbot to any website. You paste two short lines into your site's HTML: a <script> tag that loads the widget, and a <web-chat-agent> element that tells it which chatbot to show. That's it — the floating chat bubble appears in the corner of every page where the code runs.

If you're on WordPress, Shopify, Wix, Squarespace, or Webflow, use the dedicated guide for your platform instead — it shows exactly where to paste this same code.

Where to find your Chatbot ID

You never have to type the ID by hand. In the WebChatAgent dashboard:

1. Open your chatbot.
2. Go to the Widget Integration tab.
3. Click the copy button on the code box.

The copied snippet already contains your Chatbot ID, so just paste it. (If you ever need the raw ID on its own, it's the long string in your dashboard URL: /dashboard/<your-chatbot-id>.)

The code to paste

Paste this just before the closing </body> tag of your site:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Replace YOUR_ID with your Chatbot ID (or, easier, copy the ready-made snippet from the dashboard so the ID is already filled in). The widget loads asynchronously, so it won't slow down your page, and it appears as a floating chat button in the bottom corner.

Optional attributes

The widget pulls its colors, title, welcome message, and behavior from your dashboard settings, so you normally only need chatbot-id. To override a few things directly in the HTML, add these attributes to the <web-chat-agent> element:

• chatbot-id — Your Chatbot ID. Required.
• theme — Visual style: "default" or "modern". Defaults to "default".
• initially-open — Set to "true" to open the chat automatically when the page loads. Defaults to "false" (closed).

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Everything else — brand color, avatar, fonts, position, persona — is configured in the dashboard under Widget Customization, so you don't have to touch the code again to restyle the widget.

Embedding the chat inside the page

The snippet above gives you a floating button. If you'd rather place the chat inside your page layout — for example a full chat panel on a dedicated support page — use the inline widget. It loads a different script and a different element:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

The inline widget renders wherever you place the element, so put it inside the container where you want the chat to live. See the Inline Widget guide for layout details.

Works everywhere

Both snippets are plain HTML and a custom element, so they run on any website platform — WordPress, Shopify, Wix, Squarespace, Webflow, and hand-coded HTML/JS sites. Paste the code into your site's HTML and publish.

Troubleshooting

• Widget doesn't appear? Make sure the code is in the page HTML (before </body>) and that you published or cleared any caching plugin. Check the browser console for blocked scripts.
• Showing on only one page? Place the snippet in a site-wide location (footer / global code), not on a single page.