How it worksWhy it worksPricingQuestionsBlog

How to add a chatbot to your website with one script

To add a chatbot to your website, paste one script tag into your site's HTML, just before the closing </body> tag, on every page you want it. It is the same mechanic as adding Google Analytics. No plugin, no build step, and no code beyond copying five lines.

Whatever you use to add chatbot to website pages, hand-written HTML or a hosted site builder, the mechanics underneath are identical, and knowing them is what turns a failed install into a two-minute fix. So this is how to add a chatbot to your website generically, with the platform walkthroughs linked at the end. The wider question of whether you want one at all is answered in the ecommerce chatbot guide.

What is a chatbot script tag?

A chatbot script tag is a single line of HTML that tells the browser to download a small JavaScript file from the chat provider and run it on your page. That file draws the launcher, opens the chat panel, and talks to the provider's servers. Your site's own code is not touched.

Here is the real thing, as chatfor.site issues it:

<script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR-BOT-ID"
  defer
></script>

Three parts matter. src is where the file lives. data-bot-id is which assistant to load, and it is the only required attribute; without it the script logs an error and stops. defer tells the browser to download the file alongside the page and run it once the HTML has finished parsing, so it never delays your page rendering.

Everything the widget draws lives inside a Shadow DOM, which is a sealed subtree of the page. Your site's CSS cannot reach into it and its styles cannot leak out onto your site. That is why a chat widget does not need testing against your stylesheet, and why it cannot break your layout.

Add a chatbot to your website in five steps

  1. Create an account and an assistant. On chatfor.site this is a magic link to your email address; there is no password to set and no card needed for the Free plan.
  2. Give it something to answer from. Upload your delivery, returns and sizing documents as PDF, plain text or Markdown, or paste the text straight in. Do this before you install, so the first visitor who tries it gets a real answer.
  3. Copy the snippet. The dashboard shows it with your assistant's id already filled in, and a copy button. Do not retype it: a mistyped id produces a widget that loads and then silently removes itself.
  4. Paste it into your site's HTML, immediately before the closing </body> tag, in a template that every page uses. Save and publish.
  5. Reload the page and confirm it appears. Details on exactly what to look for are in the next section but one.

Worth knowing: step two is the one people skip, and it is the one that decides whether the thing is any good. Installation takes five minutes; writing material an assistant can actually retrieve from takes an afternoon and is the whole job. The guide to preparing your source documents covers how to structure it.

Where does the script tag go in an HTML document?

Anywhere in the document, technically. In practice there is one right answer and several wrong ones.

An HTML page has two sections. <head> holds metadata, stylesheets and scripts; <body> holds everything a visitor sees. A deferred script works from either, because defer guarantees it runs after the HTML is parsed, and this widget additionally waits for the browser's DOMContentLoaded event if the document is still loading. So placement does not change whether it works.

Put it immediately before </body>, in your site-wide template. Two reasons. It is the conventional home for third-party tags, so the next person to look at your site finds it where they expect. And the site-wide template is what gets it onto every page.

    <footer>...</footer>

    <script
      src="https://chatfor.site/widget.js"
      data-bot-id="YOUR-BOT-ID"
      defer
    ></script>
  </body>
</html>

The wrong places:

  • Inside one page's content, which puts the chat on that page only. This is the single most common mistake, and it usually happens because a site builder offers a "custom HTML" block inside the page editor rather than a site-wide code injection field.
  • Inside a Markdown or rich text field. Many content editors escape or strip <script> tags. The tag will show up as visible text or vanish entirely.
  • Twice. A duplicated tag is harmless here, because the script sets a flag on window the first time it runs and the second copy exits immediately. You will get one widget, not two. Still worth cleaning up.

These are the optional attributes, all of which go on the same tag:

Attribute Values What it does
data-bot-id Your assistant's id Required. Which assistant to load
data-mode bubble (default) or inline Corner launcher, or embedded in a page
data-target A CSS selector Inline only. Which container to fill
data-position right (default) or left Which corner the launcher sits in
data-auto-open true Opens the panel on page load
data-persist false Starts a fresh conversation on every load

By default the conversation is kept in the visitor's own browser storage, so it survives a page navigation and a reload, and the last ten turns are replayed when the panel reopens. Setting data-persist="false" turns that off.

How do you check the chatbot loaded?

Four checks, in the order that narrows the problem fastest. Open your browser's developer tools first: F12, or Cmd and Option and I on a Mac.

  1. Look at the page. Hard reload, ignoring the cache: Ctrl and Shift and R, or Cmd and Shift and R. A launcher should appear in the bottom corner within a second or so.
  2. Check the Network tab. Reload with the tab open and filter for widget. You want widget.js with status 200, followed by a request to /api/widget/ and your bot id. A 404 on widget.js means the src is wrong. A missing request altogether means the tag is not in the served HTML at all.
  3. Check the Console tab. Type window.__chatforWidgetLoaded and press enter. true means the file downloaded and ran. undefined means it never executed.
  4. Confirm it mounted. Type document.querySelector('[data-chatfor-widget]'). A <div> comes back if the widget attached itself to the page. It will look empty in the inspector, because the contents live in a shadow root rather than in the normal document.

Those four separate the three things that can go wrong: the tag is not on the page, the file did not load, or the file loaded and then failed.

Worth knowing: if the Console shows [chatfor.site] Could not load widget config: then the file loaded fine and the assistant id was rejected. The widget removes itself from the page when this happens rather than sitting there broken, which is why "nothing appears" and "wrong id" look identical from the outside. Almost always it is a typo in data-bot-id, or an id copied from a deleted assistant.

The chatbot is not appearing: what to check

Work down this table. The console messages quoted are the exact strings the widget logs.

What you see Likely cause Fix
No launcher, no widget.js request The tag is not in the served HTML View page source and search for widget.js. If it is absent, your editor stripped or escaped the tag
No launcher, tag visible as text on the page Pasted into a rich text or Markdown field Move it to a site-wide code injection or footer field, not a content block
widget.js returns 404 Wrong src Copy the snippet again rather than retyping the URL
Console: Missing data-bot-id on the widget script tag. Attribute absent or misspelled Check for a typo such as data-botid or data-bot_id
Console: Could not load widget config: Bot id rejected, so the widget removed itself Re-copy the id from the dashboard
Console: data-mode="inline" but no container found The selector in data-target matches nothing The message names the selector it tried; check it against your HTML
Launcher on the home page only The tag went into one page rather than the template Move it into the site-wide footer or header include
Old behaviour after an edit A CDN or page cache is serving the previous HTML Purge the cache, then hard reload

Two things that are usually not the cause, despite being the first suspects. Your site's CSS is not hiding it, because the widget renders inside a Shadow DOM your stylesheet cannot reach. And an existing analytics or cookie script is not conflicting with it, because the widget defines no globals beyond one load flag and depends on no libraries.

One genuine external cause is worth knowing about: an aggressive ad blocker or a strict Content Security Policy on your site can block a third-party script outright. If the Network tab shows the request as blocked rather than failed, test in a private window with extensions disabled, and check for a script-src directive in your site's CSP headers.

Putting the chat inside a page rather than a corner bubble

Sometimes you want the chat as the content of a support page rather than a floating launcher. That needs a container and two extra attributes:

<div id="chatfor-chat" style="height: 560px"></div>

<script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR-BOT-ID"
  data-mode="inline"
  data-target="#chatfor-chat"
  defer
></script>

The container decides the size, so give it a height. If you leave it unsized the widget falls back to 520 pixels tall rather than collapsing to nothing, but an explicit height is better. Leave off data-target and the widget fills the script tag's own parent element instead, which is handy inside a template. In inline mode the launcher is hidden and the panel is open from the start.

Placing the chat inside a page rather than in a corner bubble is listed as a Growth plan feature. The corner bubble itself works on every plan, including Free.

If your site runs on Shopify, WordPress, Squarespace or BigCommerce

Every hosted platform has a field designed for exactly this, and the difficulty is finding it rather than using it. The field is usually called code injection, custom code, or theme footer, and it is almost never in the page editor. Each of these has its own walkthrough with the menu path, the field name and the platform-specific traps:

If your platform is not one of those, look for a settings area named custom code, code injection, header and footer scripts, or third-party integrations. If there is genuinely no such field, and no way to edit the theme's HTML, the platform cannot host any third-party script, chat or analytics, and the answer is a platform change rather than a workaround.

Once it is live, expect visitors to be limited to 30 messages a minute each, enforced centrally rather than in the browser, so a single bored visitor cannot exhaust your monthly answers.

Frequently asked questions

Do I need a developer to add a chatbot to my website?

No. Adding the script tag is copy and paste into one field, and most hosted platforms have a field made for it. You need a developer only if your site has no code injection field and no editable theme file, which is rare.

Will a chatbot script slow down my website?

Not measurably, if the tag carries defer. A deferred script is downloaded alongside your page and executed only after the HTML has been parsed, so it never blocks rendering. The chatfor.site widget also loads no external libraries, which is where most third-party scripts spend their weight.

Where exactly do I paste the script tag?

Immediately before the closing </body> tag, in a template used by every page, such as your theme footer or a site-wide code injection field. It works from <head> too, but the footer is the convention and the site-wide template is what puts it on every page rather than one.

Can I put the chatbot on only some pages?

Yes. The widget appears wherever the tag appears, so putting it on one page's HTML rather than the site template limits it to that page. Some platforms also allow conditional code injection per template, which is the cleaner way to exclude checkout pages.

How do I remove it again?

Delete the script tag and republish. Nothing else is left behind on your site: the widget adds one element at run time and stores the conversation only in the visitor's own browser, so removing the tag removes the widget completely on the next page load.

Does adding a chatbot affect my SEO?

Not directly. Googlebot renders pages in a headless Chromium and indexes the rendered HTML (Source: Google Search Central, 2026), so a deferred widget is rendered but adds no indexable text: its answers only exist once a visitor types, and they are drawn inside a shadow root rather than the document. Treat it as a conversion tool, not a content one.

Sources

Try it on your own documents

Upload what you already have and ask it something. The free plan needs no card, and it will tell you when your documents do not cover a question.

Start free