How to add an AI chatbot to your website (step by step)

An AI chatbot on your website can answer the questions your customers ask every day, in seconds, at any hour. Adding one is no longer a development project: if you can paste a line of code into your site, you can do it this afternoon. This guide walks through the whole process, from choosing the content it should answer from to pasting the code into WordPress, Wix, Webflow, Squarespace, Shopify or plain HTML.

We use Aidfolk for the examples, because the steps are the same ones you would follow with any good AI chatbot: give it your content, test it, make it look like your brand, then embed it.

Before you start

You need three things:

• Content for the chatbot to answer from: your help center, documentation, FAQs, pricing and policies. The chatbot answers from this, so it's the most important part.
• A way to add a script to your site: access to the HTML, or a site builder with a “custom code” setting.
• 20 real customer questions from your inbox, to test with before launch.

Step 1: Gather the content your chatbot will answer from

An AI support chatbot doesn't invent answers; it looks them up in the content you give it (our guide to training a chatbot on your own data explains how). The better the content, the better the answers. Gather:

• Your help center or documentation site (the chatbot can read it by following its links or sitemap)
• Files such as manuals, guides and policies (PDF, DOCX, PPTX, XLSX, HTML, MD, TXT, CSV, ODT, RTF, EPUB)
• Answers that only live in your team's heads, written down as short notes

Step 2: Create your agent and add the content

1. Create a free Aidfolk account and confirm your email address. The Free plan includes 50 AI credits a month (about 100 answers), enough to try everything on your own content.
2. Create an agent and pick its purpose, such as Customer support. The purpose sets sensible starting instructions that you can change later.
3. Open Knowledge and add your sources. For a website, enter its address and choose Find pages (or Read sitemap), then pick the pages to keep. Upload files and add notes the same way.

Reading and indexing take a few moments per page. When it's done, every page and file is searchable by your agent.

Step 3: Test it with real customer questions

Open the agent's test chat and ask your 20 real questions. Each answer shows the sources it used, the model that answered and the credits it cost. Look for three things:

• Wrong or incomplete answers. Usually a page is missing or unclear: fix the content, then ask again.
• Questions it can't answer. It should say so rather than guess. You can write the exact reply it gives, such as how to reach your team.
• The tone. Adjust the agent's instructions if answers are too long, too formal or not formal enough.

Step 4: Make the widget look like your brand

Under Widget & embed, set the chat window's title, welcome message, colour, light or dark theme, the corner it sits in, and your icon. A live preview shows the result. Saved changes reach your site without touching the code again.

Then list the websites the agent may answer on. This is a security feature: the widget answers only on the websites you allow (or your workspace's website), so nobody can copy your code onto another site and spend your credits. A website includes its subdomains.

Finally, set the agent's status to Live. Only live agents answer visitors.

Step 5: Add the chat widget to your website

Copy the snippet from Widget & embed. It looks like this, with your agent's ID:

<script async src="https://app.aidfolk.com/widget/v1/aidfolk-widget.js"
  data-agent-id="YOUR-AGENT-ID"
  data-agent-api-url="https://app.aidfolk.com/api"></script>

Paste it once, just before the closing </body> tag, on every page where the chat should appear. The script loads asynchronously, so it doesn't slow your page down. Here is where that goes on popular platforms (menus change from time to time, so check your platform's help if one has moved):

Plain HTML or a custom site

Paste the snippet before </body> in your page template or shared layout, so it appears on every page, then deploy.

WordPress

The simplest way is a header-and-footer code plugin such as WPCode: add a new snippet in its footer section and save. Editing your theme's files works too, but a theme update can overwrite the change, so use a child theme if you go that way.

Wix

In your site's dashboard, open Settings › Custom Code, add the snippet, choose to load it on all pages, and place it in Body - end. Wix runs custom code only on a published site with a connected domain.

Webflow

Open Site settings › Custom code and paste the snippet into Footer code, which Webflow places before </body>. Save and publish. Custom code needs a paid site plan.

Squarespace

Use Code Injection and paste the snippet into the Footer field. Code Injection is available on Squarespace's higher plans, not the entry-level ones.

Shopify

Go to Online Store › Themes, open your theme's menu and choose Edit code. In layout/theme.liquid, paste the snippet just before </body> and save.

If the chat doesn't appear

• Is the agent live? Draft and paused agents don't answer visitors.
• Is your website on the agent's list? A site that isn't gets “This chat isn't available on this website.”
• Does your site have a Content Security Policy? Allow https://app.aidfolk.com for scripts and connections.
• Does your site hide where requests come from? A Referrer-Policy: no-referrer setting stops the widget from telling which website it's on. The browser default works.
• Caching plugins may serve an old copy of your pages: clear the cache after adding the code.

After launch: watch, learn, improve

For the first few weeks, read a sample of conversations every few days. Filter for conversations with unanswered questions, and check Analytics for the questions customers ask most. Each gap you fill makes every future answer better. Keep an eye on your credits too: workspace admins get an email when 80% of the month's credits are used, and again if they run out.

When you're ready for more answers, more agents or your whole team, compare the plans on our pricing page.