How to add a chatbot to your website in 4 steps

To add a chatbot to your website, you give it the content it should answer from, list the domains it may run on, paste one script tag into the layout every page shares and check that a live page has loaded it. On most sites that takes a few minutes. After that you change the chatbot from its dashboard, and the tag on your site stays as it is.

Deacon is an AI customer support agent for founders who answer support themselves. It answers your customers in seconds from your own docs, says so when it doesn’t know, and shows you what they’re stuck on and what they want next. The code on this page is Deacon’s, and its free plan lets you add the chatbot to your website with no card and no end date.

Here are the four steps, in order.

1. Give the chatbot the content it should answer from.
2. List the domains it may run on.
3. Paste its script tag just before </body>, once, in your layout.
4. Open a live page and check the chatbot has been seen there.

Two extras are worth a few more minutes. You can tell the chatbot who’s asking when customers sign in, and open it from your own Help link.

Give it the content it should answer from

A chatbot answers from what you give it, so this step comes before any customer sees it. Your help pages, FAQ, pricing page and policies make a good knowledge base, and between them they cover most of what people ask.

In Deacon, you add content on the Knowledge Sources page, in four kinds. Add website reads a site’s home page and main pages, such as pricing and help, or on a paid plan crawls the whole site. The site you give when you sign up is read for you, and Deacon learns from those pages by itself, home page first, so it can answer within a minute or so. You can untick any you’d rather it left out. Add file takes PDF, Word (.docx), Markdown, text, CSV or HTML files of up to 10 MB each, and a scanned PDF works too. Add text takes anything you paste, such as a policy you never published, and Add Q&A takes a question with its answer. A file, pasted text or a single page added by its link is ready to answer from as soon as it’s been read.

Then ask it your customers’ real questions in the Playground. It’s the real widget inside your dashboard, you can fill in a visitor’s details to see how it answers them, and its chats never count against your answers.

List the domains it may run on

Deacon runs only on the domains you name, so nobody can put your chatbot on their own site by copying your tag. On a domain that isn’t on your list, the widget stays hidden, and the Install page tells you where it found your code.

Deacon asks for your website when you sign up and saves it as your first domain, which creates your snippet. Your domain covers its subdomains, www included, so the chatbot also runs on docs. or app. with nothing more to add. Add any other domain on the Install page, with no need to type https://. To try it on your own machine, add localhost, which covers every port, or your .test site. Chats from a development address like that never count against your answers.

Paste one script tag before the closing body tag

This is Deacon’s snippet. Yours carries your own key in place of the placeholder.

<script src="https://heydeacon.com/widget/v1/loader.js" data-key="pk_your_widget_key" async></script>

Paste it just before the closing </body> tag, in the layout, theme or footer that every page shares, so one edit covers the whole site. It loads with async, so your page never waits for it. The key in it is meant to be public, so it’s safe in your page source and in a public repository. Load the script from heydeacon.com rather than from a copy on your own server, because the chat window and the answers come from there.

On a website builder

Each builder has a place for code that runs on every page, and each guide below walks through it. Some builders run custom code only on their paid plans. Framer and Wix run it only on your published site, and Webflow only there or in a preview you switch it on for, so look for the chatbot on the live site.

In an app you built

In your own code, the tag goes in the layout that wraps every page, just before </body>.

• Next.js: the root layout, app/layout.tsx, or src/app/layout.tsx in a project with a src folder, as a plain script tag in the body or through next/script with the afterInteractive strategy.
• Rails: app/views/layouts/application.html.erb.
• Laravel: resources/views/app.blade.php, or whichever layout your pages extend.
• A single-page app in React, Vue or anything else: the one HTML file that hosts it. Deacon notices route changes by itself, and counts a new page view when the path or query string changes, though not when only the part after # does.

An app made with Lovable, Bolt, v0, Replit or Base44 takes the tag the same way, and each has a page with the steps for that builder. If you’d rather have your builder make the chatbot itself, see what that takes as a Lovable chatbot or a Replit chatbot. If you’re weighing what running Bolt or v0 costs once the tag’s live, Bolt.new pricing and v0 pricing cover their plans, tokens and credits.

Or hand it to your coding agent

If you build with Claude Code, Cursor or Codex, press Copy the prompt on the Install page. The prompt carries your snippet and your domains, and sends your agent to Deacon’s install instructions, which say where the tag goes in each kind of app and how to pass who’s signed in. Your agent isn’t finished until a real page has loaded the tag.

Check that a live page has loaded it

A chatbot can’t tell it’s installed until a real page loads its tag, so open one yourself. Use a private window, so your browser doesn’t show you a copy of the page from before the change.

Deacon’s Install page says so at the top. Once a page has loaded the tag, it reads Live on your domain, with how long ago it was seen. A page on localhost or a .test address counts as a test, never as live. If nothing has been heard from your site for a day, it reads Quiet, with when it was last seen. It keeps checking by itself, so there’s nothing to press.

Then ask it two questions, one your content answers and one it doesn’t. The first should get an answer in seconds. The second should get a plain “I don’t know” and a box for the visitor’s email, and that second reply is the one to judge any chatbot by.

Telling it who is asking

If customers sign in to your site, your app already knows their plan, their role and when their trial ends. A chatbot that isn’t told has to ask, or answer for everyone at once. Pass those details to Deacon, and it takes them into account when it answers and shows them beside the conversation in your dashboard.

Put this above the snippet, in the same layout, and fill it from the session your app already has.

<script>
  window.deaconContext = {
    plan: 'Pro',
    role: 'owner',
    seats: 4,
    trial_ends: '12 Aug',
  };
</script>

Deacon keeps the first 12 keys. It cuts a key at 40 characters and a value at 200, drops any nested object or list, and sends nothing at all if the whole thing runs past 1,500 characters of JSON. So stick to short strings, numbers and true or false. Build it with your framework’s JSON helper rather than by joining strings, so an odd character in a customer’s details can’t break the script.

When something changes without a page load, such as a sign-in or an upgrade in a single-page app, merge the change in from your code.

window.Deacon.setContext({ plan: 'Team', state: 'active' });

It changes only the keys you name. A key set to null is removed, and Deacon.setContext(null) clears the lot, which is the call to make when someone signs out.

The visitor can read every value, because it sits in your page. So send what helps answer a support question, and never a password, a token, an API key or an internal id. Deacon treats the details as a hint rather than proof, since anyone can edit a page in their own browser. They never open up an account question, either. Deacon declines any question about a visitor’s own account, invoice or data, whatever the details say, and asks for their email so you can reply.

Open it from your own Help link

Deacon puts a Help button in a corner of every page. If your site already has a help menu, you can open the chat from there instead.

<button onclick="Deacon.open()">Ask a question</button>

Deacon.open(), Deacon.close() and Deacon.toggle() work as soon as the script has run. To use only your own link, hide the Help button on the Appearance page. Deacon then draws nothing until something opens it, so add your link first, or the install will look broken. Put it where your customers already look for help, such as your account menu or your footer.

When the chatbot doesn’t show up

Open your browser’s console first. When Deacon won’t run, it leaves a line there starting [Deacon] that says why. These are the usual causes.

• The domain isn’t on your list. The console names the address it won’t run on, and so does the Install page, with a button to add it when it’s plainly yours. Check for a staging address on another domain, or a page served over plain http when you listed the https address.
• The key is wrong. The console calls it unknown, so copy the snippet again from the Install page.
• Your site’s Content-Security-Policy blocks it. The browser reports the block in the console, and a blocked chat window stops at Still loading…, with Try again and Close buttons. A strict policy needs four changes. Allow https://heydeacon.com under script-src for the script, connect-src for its settings request and the page views, goals and errors it reports, and frame-src for the chat window. Then add 'unsafe-inline' to style-src, for the style sheet the script adds to draw its button and window, which a nonce can’t reach. The replies stream inside the chat window, under Deacon’s own policy, so they need nothing more.
• You’re seeing an old copy of the page. Clear your caching plugin or your CDN, then reload in a private window.
• The page has a template of its own. A landing page or a checkout that doesn’t use your main layout needs the tag too, where your platform allows it.
• A speed plugin is holding scripts back. Some delay JavaScript until the visitor scrolls or taps, and the Help button waits with it. The WordPress guide shows how to exclude the script in WP Rocket.
• You’re looking at your builder’s preview. Check the published site instead.

What the tag sets, and what it counts

The same tag runs Deacon’s website analytics, so without a second script you also see your visitors, where they came from, the pages they read and the goals and funnels you set up, on Analytics › Website. Page views are counted without a cookie, from a hash that changes every day, and nothing is counted from localhost.

The widget itself sets one cookie, deacon_visitor_id, when the script loads, and keeps the same id in local storage, so a conversation can follow a visitor from page to page. It asks for 90 days, and Safari cuts it to about 7 days. List it in your cookie policy. The chat keeps a visitor’s IP address for 30 days, and the website analytics keeps none. Deacon doesn’t read Do Not Track or Global Privacy Control.

To keep your own clicks out of the numbers, add data-no-page-views to the tag on your signed-in pages. It stops page views and JavaScript errors being counted there, and never stops a goal.

What Deacon does once it’s on your site

Most of what customers ask, your docs already answer. They ask you anyway, and every repeat question pulls you away from building. Deacon answers those questions in seconds, at any hour and in the language the customer writes in, from the content you gave it. An answer taken from a page on your site usually links to that page, so they can read on.

When your content doesn’t cover a question, Deacon says it doesn’t know instead of guessing, and asks for the visitor’s email. If they leave it or ask for a person, you get an email. Reply from the dashboard, and if they still have the chat open, your reply appears there under your name. There’s no helpdesk to set up and no flows to build before it answers anything.

Then Deacon gets better. Every question your content didn’t cover waits in your dashboard with an Answer this button. What you write becomes part of what Deacon knows, so it can answer the next person who asks. Save & check shows you the reply it now gives and how many other open questions your answer covers. The more you answer, the less it needs you.

It also shows you what your customers need, instead of leaving you to hear from the few who email. Every conversation is saved and searchable by what visitors asked. Topics groups their questions, counts how many people asked and labels most of them as a how-to, a bug report, a feature ask and so on, so you know what to fix and what to build next.

Every feature is on every plan, the free one included. The free plan gives you 50 answers a month, needs no card, has no end date and deletes nothing if you go quiet. There’s no badge to pay to remove, nothing is billed past your plan’s answers and no plan upgrades itself. AI chatbot for your website shows everything Deacon does on your site, and the pricing page has the paid plans.

Questions about adding an AI chatbot to your website

Do I need to know how to code?

No. On WordPress, Shopify, Webflow, Framer, Wix, Squarespace and HubSpot, you paste the tag into a box in your settings, and the table above says where. If a coding agent writes your app, the prompt from Deacon’s Install page has it do the whole install.

Can I add ChatGPT to my website?

Not ChatGPT itself. OpenAI’s help centre says GPTs “are not a way to embed ChatGPT in an external website or application”, and it points developers to its API instead. That’s the route of building your own. A hosted chatbot such as Deacon comes with its AI included and goes on with one tag.

Should I build my own AI chatbot?

Only if chat is what you sell. Calling a model is the easy part. You also have to find the right passages in your docs for each question, decide what the bot says when they don’t cover it, keep every conversation, hand chats to a person, stop abuse and keep it all running. A hosted chatbot has done all of that already.

Will an AI chatbot slow my site down?

Deacon’s won’t hold your page up. The script loads with async, and it came to about 7 KB compressed when we measured it on 23 September 2026. The chat window only loads when a visitor points at the Help button, tabs to it or opens it.

Can I show the chatbot on only some pages?

Yes. It appears on the pages that load the tag, so put the tag in the layout those pages share rather than in your site-wide footer. Or hide the Help button and open the chat from a link on just the pages you choose.

What happens when the free plan’s answers run out?

Visitors get a short reply saying Deacon can’t look into that one right now, and are asked for their email unless they’ve already left it. You can still read and reply to every conversation, nothing is billed and your plan never upgrades itself.