Embedding the widget.

The widget is a small JavaScript snippet that adds a 56px chat bubble to the bottom-right of your page.

Install from your dashboard

The recommended path

The dashboard builds your snippet with the right data-chatbot-id already baked in and walks you through the install for your specific platform — no copy-pasting an ID by hand.

Dashboard → Support Chatbot → Overview → Widget Installation

Open the install panel.

The Widget Installation card holds everything you need — your snippet, per-platform steps, and a test button.

Pick your platform.

Choose your website builder from the tabs: WordPress, Shopify, Webflow, Squarespace, Wix, Google Tag Manager, or Custom HTML. Each tab shows numbered steps, the exact snippet with your ID filled in, and a Copy button.

Paste, publish, then Test installation.

Paste the snippet where the tab tells you and publish your site. Then click Test installation — Tenlo pings your domain and confirms the bubble is live. (Open your site in another tab first, then test.)

Manual install (fallback)

Prefer to copy-paste by hand? Here’s the raw snippet and where it goes on each platform — the same thing the dashboard generates.

The snippet


<script
  src="https://app.tenloai.com/widget.js"
  data-chatbot-id="YOUR-CHATBOT-ID"
  defer
></script>

Your data-chatbot-id is unique to your account — copy the ready-made snippet from the Widget Installation card on the chatbot dashboard.

Where to paste it

Drop it before the closing </body> tag on any page where the bubble should appear. Common patterns:

Site-wide — add to your global footer/template; bubble appears everywhere
Support pages only — add to specific landing pages (e.g. /help, /contact)
Logged-in pages only — add inside an authenticated section so prospects don’t see it

Platform	Where to paste
WordPress	Appearance → Theme File Editor → `footer.php` (before `</body>`), or a Custom HTML widget, or the Insert Headers and Footers plugin
Shopify	Online Store → Themes → Edit Code → `theme.liquid` (before `</body>`)
Webflow	Project Settings → Custom Code → Footer Code
Squarespace	Settings → Advanced → Code Injection → Footer
Wix	Settings → Custom Code → Add Custom Code → Body — End
Google Tag Manager	New tag → Custom HTML → trigger All Pages → Submit, then publish the container
Custom HTML	Before `</body>` in your HTML file

What the bubble looks like

56px round button in the bottom-right corner
💬 emoji when closed; ✕ when open
Default colour #1B3A5C (deep navy) — see Theming & branding to override
Click expands a 380×580px chat window
On mobile (under 440px wide), the chat fills nearly the full screen
z-index is high enough to sit above almost any site chrome

Lazy loading

The chat window doesn’t load until the visitor clicks the bubble. The script tag adds essentially zero weight to your page on first paint — just the 5KB widget loader.

Same-origin iframe (architecture note)

Deliberate isolation

The chat itself runs inside an iframe served from app.tenloai.com. This means your site’s CORS headers, CSP, and cookie policies don’t affect the chat — the bubble is on your domain, but the chat conversation runs in Tenlo’s domain. Visitors can’t extract data from your site through the bot, which is a deliberate security choice.

Unlike the Sales Assistant (P05) which uses Shadow DOM, the Support Chatbot uses an iframe. The trade-off is stronger isolation for slightly less style flexibility — see Theming & branding.