How to Add an AI Chatbot to Your Website: A Step-by-Step Guide

Adding an AI chatbot to your website takes minutes. Getting good answers takes preparation. Most disappointing chatbot launches are not a technology problem: the owner pasted the code, skipped the preparation, and the assistant then had nothing accurate to say. This guide gives you the order that works, the exact steps to install the widget on any site, and the tests to run before real visitors see it.

It applies to any modern chatbot product. Where a step is specific to Crescelo we say so. If you are still deciding whether you need one, read what an AI website assistant is and how it works first.

Before you start: what you need

• Access to your website's code or settings. Either your CMS (WordPress, Wix, Squarespace, Webflow, Shopify) or the ability to edit the HTML of your pages.
• Your business content. Price list, service descriptions, policies, opening hours and FAQs, as documents or web pages.
• About an hour. Half of it collecting content, half of it testing.

You do not need a developer for a standard installation. If your site is built on a hosted platform, you will paste a single snippet into a settings box, and the platform-specific guides for WordPress and Webflow, Squarespace and Wix cover each one.

Step 1: Decide what the chatbot is for

Write one sentence. For example: 'Answer questions about services and prices, and book consultations.' A narrow job produces a better assistant than 'do everything'. The job decides what content to load and which features to switch on.

Step 2: Gather and clean your content

The assistant can only be as accurate as what it reads. Collect the documents your team already uses to answer customers, then read them with a critical eye.

1. Remove anything out of date: old prices, expired offers, former staff.
2. Make sure each service has a clear name, a price or price range, and what is included.
3. State policies plainly: cancellation, refunds, deposits, late arrivals.
4. Add the answers to the ten questions your team hears most often. If they are not written down anywhere, write them now.
5. Prefer several short, clearly titled documents over one enormous PDF. Short pages are easier to search accurately.

Formats that usually work: PDF, Word, plain text, Markdown, CSV and web page addresses. If a page is only an image, check the product supports text recognition (OCR) or retype the key facts.

Step 3: Create the assistant and add your content

In Crescelo, open the dashboard, go to the Knowledge Base, and upload files, paste text or add your website address. The system reads and indexes them, usually within a minute. Then set the assistant's name, greeting and tone under its settings. Keep the greeting short and specific: 'Hi, I can answer questions about our services and book you in' works better than 'How can I help you today?'.

Connect an AI provider if your plan requires one. With a bring-your-own-key setup you paste your provider's API key once and pay the provider directly; the guide to choosing which AI model to connect explains the options. To try things first, the free engine is enough for testing.

Step 4: Test before you publish

Use the testing area inside the product, not your live site. Ask questions the way real customers do.

• Your ten most common questions, in different wording, with typos and in slang.
• A question that is not in your content. The assistant should say it does not know and offer a person or a form.
• A request for something you do not offer, such as a discount. It should not promise it.
• A booking from start to finish, including a time that is already taken.
• A request to speak to a person.

Fix each failure by changing the content, not the assistant's settings. If it answered wrongly, find the source passage and correct it. If it could not answer, add the missing answer to your documents.

Step 5: Install the widget on your website

The install is one snippet of code, usually a `script` tag. Where you paste it depends on your platform.

WordPress

Use a plugin that lets you add code to the footer, or paste the snippet into your theme's footer through the theme editor. Full steps are in the WordPress installation guide.

Wix, Squarespace and Webflow

Each has a 'custom code' or 'code injection' area in the site settings. Paste the snippet into the footer or 'before the closing body tag' box and publish. Details are in the site builder guide.

Shopify and other platforms

Add the snippet to the theme's main layout file just before the closing body tag. Many platforms have a 'scripts' or 'header and footer' setting that does the same job without editing files.

A custom-coded site

Paste the snippet into the HTML of every page where you want the chat, just before the closing body tag, or into a shared layout file so it appears everywhere.

After publishing, open your live site in a private window and clear your cache if the chat does not appear. Ad blockers and cookie banners can also hide it during testing.

Step 6: Check it on real devices

1. Open the site on a phone. The chat window should fit the screen, scroll and not cover your call-to-action buttons.
2. Check the page speed before and after. A well-built widget loads without blocking your page. See our note on performance of embedded chat widgets.
3. Try the chat with a screen reader or keyboard only, if accessibility matters to you. The accessibility guide for chatbots lists what to check.
4. Send yourself a test booking and lead and confirm the emails arrive.

Step 7: Be honest with visitors

Say it is an AI assistant, link to your privacy policy, and offer a way to reach a person. This is good practice and in many places a legal requirement. If you serve visitors in Europe or California, run through the GDPR checklist for website chatbots.

Step 8: Keep it accurate after launch

Launch is the beginning. Put a weekly ten-minute review in your calendar. Read the conversations, note every question the assistant could not answer and add the answers to your knowledge base. Update the content whenever prices, hours or policies change. The habit is described in how to review your chatbot's conversations each week.

Common mistakes to avoid

• Pasting the code without loading any content.
• Loading everything, including outdated pages, without reading it.
• Never testing questions the content cannot answer.
• Hiding the option to reach a human.
• Placing the chat where it covers important buttons on mobile.
• Forgetting to update the content after a price change.
• Judging success by chat volume instead of bookings and leads.

Bubble, full page or inline: choose how visitors meet the chat

Most chatbots offer three ways to show up, and the right choice depends on the job.

A bubble is the easiest to start with. Once it works, add a full-page link to your Instagram bio, email signature and Google Business Profile, so visitors from those places land straight in the conversation. Crescelo offers the floating bubble, an inline frame and hosted business pages, described on the website widget page.

What it costs to add a chatbot

The install itself is free. What you pay for is the product. Expect a monthly subscription that scales with the number of conversations, the number of assistants and the amount of content you store. On top of that comes the AI usage, either bundled or billed to you directly. As a reference point, Crescelo's Starter plan is $49 a month for one assistant and 100 chat sessions, and the Growth plan at $149 adds appointment booking and calendar sync. Check the pricing page for current numbers. A useful way to judge value is to compare the monthly cost with the value of one extra booking per month; our ROI calculation shows how.

What to measure in the first 30 days

• Conversations started and how many reached a useful answer.
• Bookings and leads created from the chat.
• Unanswered questions, which tell you what your content is missing.
• Handover requests, which show where a person is needed.
• Drop-off, meaning where visitors stop replying. Our guide to tracking in-chat funnel drop-off explains the stages.

Do not judge the first week on volume. A quiet chat that converts is better than a busy one that does not. After a month you will have enough conversations to see patterns, and the biggest improvements usually come from adding ten missing answers to the knowledge base.

Security and access basics

• Keep your API keys private and store them only in the product's settings, never in page code.
• Give team members their own logins and turn on two-factor authentication for the account that controls the assistant.
• Restrict which domains the widget is allowed to load on, if your product offers it.
• Ask the vendor how conversations are stored, how long they are kept and how to delete them.

For more on protecting the account, see setting up team access and two-factor authentication.

Accessibility and inclusion

A chat window is part of your website, so it should work for people who use a keyboard, a screen reader or magnification. Check that the chat can be opened and closed with the keyboard, that messages are announced to screen readers, that text has enough contrast and that nothing depends on colour alone. The Web Content Accessibility Guidelines are the standard reference. Our checklist for accessible chatbots turns them into practical checks.

Frequently asked questions

When you are ready, try it on your own documents in the playground, then start a free trial to put it on your site.

Further reading

• Google Search Central: creating helpful, people-first content: What Google looks for in useful pages.