Add the IotaBot chatbot to your website

Any website — one script tag

Any site you can edit the HTML of — React, Angular, Vue, plain HTML, or any CMS.

First grab your Widget Key from the dashboard: open Websites → your site → the Embed tab. Each website gets its own key (it looks like live_xxxxxxxx). Then paste the snippet below into your site, replacing YOUR_WIDGET_KEY.

<!-- IotaBot widget -->
<script>
  (function(w,d,s,o){
    w.IotaBot=w.IotaBot||function(){(w.IotaBot.q=w.IotaBot.q||[]).push(arguments)};
    var j=d.createElement(s);j.async=1;
    j.src='https://cdn.iotabot.com/v1/iotabot.js';
    j.dataset.iotabot=o;d.head.appendChild(j);
  })(window,document,'script','YOUR_WIDGET_KEY');
</script>

What each part does

• The queue stub — creates the global IotaBot() command function. Any calls you make (like IotaBot('identify', …)) are pushed into IotaBot.q and replayed once the real script finishes loading — so your calls never fail due to timing.
• d.createElement(s) with j.async=1 — injects the widget <script>asynchronously, so it never blocks page rendering.
• j.src = '…/v1/iotabot.js' — loads the actual widget bundle from the IotaBot CDN.
• j.dataset.iotabot = o — writes your Widget Key onto the script tag as data-iotabot="YOUR_WIDGET_KEY". The widget reads this to know which website (tenant) it belongs to; the backend validates it as the x-iotabot-key on every request.
• (window, document, 'script', 'YOUR_WIDGET_KEY') — the arguments passed into the function as w, d, s, and o. Only the last one — your key — ever changes.

Where to place it

• Paste it just before the closing </body> tag on every page where you want the chat widget to appear.
• It's framework-agnostic — works on any site, CMS, or SPA (React, Angular, Vue, plain HTML).
• The script loads asynchronously and will not block your page.

That's the entire installation — the chat bubble appears automatically in the corner of your site.

Identifying logged-in users (optional)

To let IotaBot greet signed-in users by name and keep their conversation history across sessions, call identify after the snippet loads. The identity hash must be computed on your server (an HMAC of the user's ID with your secret key) — never in the browser.

// After the embed snippet, on authenticated pages:
IotaBot('identify', {
  externalUserId: currentUser.id,
  name:           currentUser.name,
  email:          currentUser.email,
  identityHash:   currentUser.identityHash  // computed server-side
});

// On logout / unauthenticated pages:
IotaBot('clearIdentity');

Full server-side (Node.js) hashing examples for JavaScript, React, and Angular are available in the dashboard's Embed tab.

Shopify

Install the app — the widget, plus product search and order status for signed-in shoppers.

Shopify will mention the app isn't on the App Store yet. That's expected — the listing is in progress, and the app installs and works exactly the same either way.

Connect it

1. After installing, the app opens on one screen in your Shopify admin.
2. In IotaBot, add this store under Websites → New Website, using the domain your customers actually see. If you sell on yourbrand.com, use that, and add yourstore.myshopify.com too so previews from the admin work.
3. Open that website's Embed tab, copy the Widget Key, paste it into the Widget key field on the Shopify screen, and click Save.

Turn the widget on

The app's screen has an Open theme editor button — it opens your theme with IotaBot chat already selected under App embeds. Switch it on, save, and the chat is on every page of your storefront. Nothing is pasted into your theme, and uninstalling the app removes it again.

Answering about products and orders

Once connected, the assistant can search your catalogue and show products as cards with prices and a link. A shopper signed in to your store can also ask where their order is — Shopify tells us who they are, so nobody can look up somebody else's order.

Products need to be published to the Online Store for the assistant to show them. A product that isn't published has no storefront page to link to, so it's left out rather than shown with a dead button.

Or paste the snippet yourself

Prefer not to install an app? The widget also works as a plain script tag.

1. In your Shopify admin, go to Online Store → Themes.
2. On your live theme, open the ⋯ menu and choose Edit code.
3. Under Layout, open theme.liquid.
4. Paste the snippet just above the closing </body> tag, with your key in place of YOUR_WIDGET_KEY.
5. Click Save.

<!-- IotaBot widget -->
<script>
  (function(w,d,s,o){
    w.IotaBot=w.IotaBot||function(){(w.IotaBot.q=w.IotaBot.q||[]).push(arguments)};
    var j=d.createElement(s);j.async=1;
    j.src='https://cdn.iotabot.com/v1/iotabot.js';
    j.dataset.iotabot=o;d.head.appendChild(j);
  })(window,document,'script','YOUR_WIDGET_KEY');
</script>

Two things to know about this route: a theme update or a theme switch replaces theme.liquid, so you'll need to paste it again — and product and order answers need the app, because they depend on a connection to your store that a script tag doesn't have.

Editing theme code on a live store is a real edit to a live store. From Online Store → Themes → ⋯ → Duplicate you get a copy you can paste into and Preview first. Worth the thirty seconds.

What it won't cover

• Checkout. Shopify's checkout does not render your theme, so the widget will not appear there unless you're on Shopify Plus with checkout customisation.

If the bubble doesn't appear

• Check the app embed is on.Online Store → Themes → Customise → App embeds, then save. This is the usual one.
• Check the domain. The widget only loads on domains listed on the website in IotaBot. Compare the address bar against that list — yourstore.myshopify.com missing from it is the common mismatch.
• Hard-refresh, then view the page source and search for iotabot.

WordPress

Install the plugin, paste your key — and on WooCommerce, answer about products and orders too.

Install it

1. In your WordPress admin, go to Plugins → Add New and search for IotaBot.
2. Click Install Now, then Activate. (Using the zip instead? Choose Upload Plugin on the same screen.)
3. An IotaBot item appears in the left-hand admin menu. Open it.

Needs WordPress 5.8 or newer and PHP 7.4 or newer.

Connect it

The settings screen walks you through the same three steps and shows your site's exact domain so you can copy it straight across:

1. Add this website in IotaBot — in the dashboard, Websites → New Website, using the domain shown on the plugin screen.
2. Copy your Widget Key — open that website in IotaBot and go to its Embed tab.
3. Paste it into the Widget key field and save. The widget goes live immediately; nothing loads for your visitors until this field is filled in.

No theme files, no functions.php, no snippet plugin. The plugin enqueues the widget on every front-end page for you, and the settings screen shows a live status badge — it checks your key against IotaBot and tells you whether the key is valid and whether this site's domain is on its allowlist, which is the usual reason a widget silently never appears.

Pin the key per environment

If you run staging and production from the same database or a shared config, define the key in wp-config.php so the two never share one. A key set this way takes precedence and the settings field is shown read-only, so it can't be overwritten from the admin by mistake.

Multisite

Each site in a network keeps its own key and its own settings screen, so a network of five sites can be five separate websites in IotaBot — each with its own knowledge base and its own inbox.

Wix

One click from the App Market, then save your key on the app’s dashboard screen.

Or install it manually

Prefer to do it from inside your own dashboard, or managing several sites at once?

1. In your Wix site dashboard, open Apps → App Market.
2. Search for IotaBot and click Add to site.
3. Approve the permissions Wix asks for. The app needs to manage embedded scripts — that's how it puts the widget on your pages.

Both routes install exactly the same app and land you on the same setup screen.

Connect it

1. Open IotaBot from your dashboard's apps list. It opens on a single screen: Set up in three steps.
2. In IotaBot, add this site under Websites → New Website, using your published Wix domain (your own connected domain if you have one, otherwise the *.wixsite.com address).
3. Open that website's Embed tab, copy the Widget Key, paste it into the Widget key field on the Wix screen, and click Save.

Saving writes the widget onto every page of your site. The screen then shows a Connected banner, plus shortcuts that open this website's knowledge base and conversations in IotaBot directly.

Publish first

The widget appears on your published site, not in the Wix editor's preview. If you've just saved the key on a site you've never published, hit Publish and then open the live URL.

If the bubble doesn't appear

• Check the domain. The app screen lists the domains on your key's allowlist. Compare it against the URL your live site actually serves on — a site published on *.wixsite.com and an allowlist holding only yourbrand.com is the most common mismatch.
• Check functional cookies. The widget is registered with Wix as a functional script, because it keeps a conversation session. A visitor who declines functional cookies in your Wix cookie banner will not be shown the widget — that's the honest classification, and it's the correct one.
• Check the app is enabled under Settings → Apps on the site.

Zoho Sites & Zoho Commerce

Paste the snippet once as site-wide custom code in Zoho Sites or Zoho Commerce.

1. Add your site in IotaBot

Go to Websites → New Website and enter the domain your Zoho site is published on — your own domain if you've connected one, otherwise the *.zohosites.com (or *.zohocommerce.com) address. The widget only loads on domains listed here.

2. Copy your Widget Key

Open that website's Embed tab and copy the key.

3. Add the snippet as site-wide custom code

1. In the Zoho site builder, open Settings and find the Custom Code section (called Code Injection or Header & Footer code in some plans).
2. Paste the snippet into the Footer / body box, not the head one, with your key in place of YOUR_WIDGET_KEY.
3. Save, then Publish the site.

<!-- IotaBot widget -->
<script>
  (function(w,d,s,o){
    w.IotaBot=w.IotaBot||function(){(w.IotaBot.q=w.IotaBot.q||[]).push(arguments)};
    var j=d.createElement(s);j.async=1;
    j.src='https://cdn.iotabot.com/v1/iotabot.js';
    j.dataset.iotabot=o;d.head.appendChild(j);
  })(window,document,'script','YOUR_WIDGET_KEY');
</script>

Site-wide custom code renders on every page, so this is a single paste. If your plan only offers per-page code, add it to each page you want the widget on.

Zoho Marketplace

There's no IotaBot extension in the Zoho Marketplace yet — the snippet above is the supported route, and it's the same one-line install as any other site. If you want IotaBot to reach into Zoho CRM or Zoho Desk, do it the other way around: build a tool pointing at the relevant Zoho API and the assistant can look up and create records mid-conversation.

Check it worked

Open the published URL (not the builder preview) and look for the chat bubble. If it's missing, view the page source and search for iotabot — a missing script tag means the code block didn't publish, and a present script tag with no bubble means the domain isn't on the allowlist.