How to add an AI chatbot to your website

How to add a chatbot to your website in 4 steps

1. 1.

   Create the agent

   Open the editor, pick a template and enter your website URL. The chatbot reads your pages and builds its first knowledge base from them.

2. 2.

   Add what it should know

   Upload policies and catalogs, write Q&A pairs for the answers that must be exact, and fill in your business details.

3. 3.

   Set its behavior and look

   Give it a role, tone and greeting, turn on the skills you need — collecting contacts, contacting a human — and match the colors to your site.

4. 4.

   Paste the code into your site

   Click Add to website, copy the code and paste it into your site builder. It works on any website that accepts custom HTML.

What to decide before you add a chatbot

A chatbot answers from what you give it. Five decisions made before you open the editor save hours of fixing answers later.

1. 1.

   Pick its main job

   Answering questions, capturing leads, booking appointments or routing visitors to the right page — choose one as the priority. A lead-capture bot asks for contact details early; a support bot needs a deep knowledge base more than a form. See AI chatbot use cases.

2. 2.

   Gather the knowledge

   Your top 20 questions with answers, current prices, shipping and return policies, contact details and product or service descriptions. Write them the way customers ask, not the way your marketing pages read.

3. 3.

   Remove contradictions

   If an old and a new return policy are both loaded, the AI may quote either or mix them. Delete outdated versions and duplicates before you train.

4. 4.

   Set the limits

   List the topics the chatbot answers and the ones it hands to a person — billing disputes, refunds that need a decision, account-specific problems.

5. 5.

   Choose the voice

   Write two or three sample answers in the tone you want. A skateboard shop and a law firm shouldn’t sound the same.

Set up the agent and its knowledge

In the Elfsight editor the Agent tab defines who the chatbot is:

• Name, caption and picture — your business or agent name, a short caption and a logo or avatar.

• Role — what the agent is an expert in, so it answers in character.

• Tone — Friendly, Professional, Casual, Direct, or your own description.

• Answer length — short, medium or long replies.

• Welcome message and suggested questions — tell visitors what the chatbot can help with and give them one-click questions to start.

• Conversation rules — say explicitly what the agent should do and what it should avoid.

The Knowledge tab holds everything the chatbot answers from:

• Web pages — up to 200 pages of your site, added from its URL.

• Files — PDF, DOCX, PPTX, TXT, JSON, HTML or MD, such as policies and product catalogs.

• Q&A pairs — for answers where the wording matters: prices, refund terms, legal notes.

• Text blocks — anything that isn’t on your website, like a seasonal offer.

• Business info — hours, address and contacts.

When the agent doesn’t know an answer, it asks you and learns from your reply. More on this in how to create a chatbot knowledge base.

Add skills: contacts, follow-ups and a human fallback

Skills extend the chatbot beyond answering questions:

• Collect contacts — a short form for name, email and phone with a consent checkbox. Show it before the chat, after the first reply, or make it required.

• Follow-up message — a message sent when a visitor goes quiet, to bring them back or share an offer.

• Action buttons — WhatsApp, email, call, Instagram, Telegram, Messenger and more, shown when the conversation calls for them.

• Contact a human — a card with a team member’s photo, name and contacts. It appears when the visitor asks for a person, the agent can’t answer, a keyword comes up, an answer gets a dislike, or the visitor is inactive.

Contact a human sends the visitor to your own channels — WhatsApp, email, phone — rather than switching the chat to a live operator. Set it up before launch, at least for “asked for a human” and “can’t answer”: visitors don’t mind talking to AI, they mind feeling trapped by it. See human handoff.

Match the design and choose where it shows

Pick one of six themes and an accent color, then fine-tune the colors of every part, the background, corner radius and font so the chat looks like part of your site.

In Settings choose how it appears:

• Placement and layout — a floating chat or one embedded in the page; a button, text button, quick input field or agent profile as the launcher; left, right or bottom center.

• Start — open on click, show the greeting and suggested questions first, or open automatically.

• Visibility — show or hide the chat on specific pages and devices.

• Footer text — a note that answers are AI-generated, or a link to your privacy policy.

• Language and time zone — the chat’s interface in any of 76 languages; sounds, custom CSS and JS.

• Email notifications — every chat’s transcript with the visitor’s contact details sent to your inbox.

If you have visitors from the EU, update your privacy policy to mention the chatbot and the data it collects. The EU AI Act also expects people to be told they are talking to an AI — the footer text is a simple place for both.

How to integrate the chatbot into your website

Click Add to website, copy the code and paste it once. For a floating chat on every page, put it in the site-wide code area; to embed the chat in one page, use that page’s HTML element.

Wix needs a Premium plan and Squarespace a Business plan or higher to run custom code. For React, Next.js, Vue or Angular, see AI chatbot for developers.

Test before you go live

• Ask 10–15 real questions taken from your support inbox or contact form, not invented ones. Real visitors write “my order hasn’t arrived and nobody answers”, not “what are your hours?”.

• Check that it declines off-limits topics politely and offers a way to reach your team: “That’s something our team handles directly — here’s how to reach them” works better than “I can’t help with that”.

• Open the site on a phone and make sure the launcher doesn’t cover buttons or the cart.

• In the first week read the chats in your dashboard every day and fill the gaps in the knowledge base.

Mistakes that hurt chatbot answers

How to tell if your chatbot is working

Chatbots do best on frequent, repeatable questions whose answers already exist in your content: prices and plans, policies, setup and troubleshooting steps. They struggle with tasks that need judgment or access to a customer’s account — billing disputes, refund decisions — so route those to a person.

Chats and leads are in your Elfsight dashboard, analytics reports arrive by email, and chat events can be sent to Google Analytics. See analytics.

Other ways to add AI to a website

• Build your own with an AI API — the most control over behavior and data, but you write the chat interface, host the backend and maintain both.

• Help desk suites — AI agents bundled with live chat, ticketing and routing. Useful for a large support team; more setup and cost.

• AI site search and recommendations — understand what a visitor means and suggest pages or products. A chatbot trained on your catalog can do both in a conversation: see AI site search and product recommendations.

• AI content and analytics tools — draft pages and spot trends in your traffic; they help you run the site but don’t talk to visitors.

For most small and medium businesses a no-code chatbot is the fastest way to put AI in front of visitors: no code to maintain, and the same agent works on any platform.