How to create an AI chatbot for a website

How to create a chatbot for your website in 6 steps

With a no-code builder like Elfsight AI Chatbot you set everything up in a visual editor. No HTML, CSS or JavaScript is needed — the only code is the one snippet you paste into your site at the end.

1. 1.

   Create the agent from your website

   Enter your website’s address. The agent reads your pages and comes back with a knowledge base, a name, a role and tone, a welcome message and skills. You can also create it by hand.

2. 2.

   Check what it knows

   In Knowledge, add or remove web pages, upload files, and add Q&A pairs, text blocks and your business info.

3. 3.

   Shape how it talks

   In Agent, set its role, tone and answer length, and write rules for what it should and shouldn’t do.

4. 4.

   Add skills

   In Skills, turn on contact collection, a follow-up message, action buttons (WhatsApp, email, call…) and a card to contact a person from your team.

5. 5.

   Make it look like your site

   In Settings, pick a floating bubble or an embedded chat, a theme and colors, the position and when the chat opens.

6. 6.

   Add it to your website

   Copy the installation code and paste it into your site: a Custom HTML block, a code injection field or your page template. Every platform has its own steps — see how to add an AI chatbot to your website.

Decide what the chatbot is for

A chatbot that answers support questions, one that helps shoppers choose and one that qualifies leads are built in the same editor, but each needs different content, instructions and opening questions. Pick one main job before you start.

More ideas, with example conversations: AI chatbot use cases.

Train the chatbot on your own content

A chatbot gives vague answers when its knowledge is thin. Give it the content visitors actually ask about:

• Web pages — up to 200 pages of your site: products, pricing, FAQ, contact. Skip blog posts and team bios that dilute the answers.

• Files — PDF, TXT, JSON, DOCX, PPTX, HTML or MD, up to 100 MB each: catalogs, manuals, price lists.

• Q&A pairs — exact answers to the questions that matter most: prices, terms, guarantees.

• Text blocks — policies and announcements that aren’t on any page, written in plain words.

• Business info — hours, address, phone.

When the agent doesn’t know an answer, it asks you and learns from your reply, and its knowledge gaps are listed for you to review. More in how to create a chatbot knowledge base.

Write instructions that shape its answers

Instructions decide who the chatbot is and how it behaves. Cover three things:

1. 1.

   Role

   “You are the support assistant for [Company]. You help visitors with orders, delivery and returns.”

2. 2.

   Style

   Pick a tone — Friendly, Professional, Casual, Direct or your own — and an answer length. Describe the tone with an example, not just an adjective: “Use short sentences, address the visitor by name, avoid phrases like ‘We regret to inform you’.”

3. 3.

   Boundaries

   Say what it must not do: “Don’t invent products, prices or policies. Don’t quote prices for custom projects. If the answer isn’t in your knowledge, offer to connect the visitor with our team.”

You can add up to 100 conversation rules. See how to train an AI chatbot for examples.

Get visitors to start a conversation

The welcome message sets the tone; suggested questions show what the chatbot can do and where to start. “Hi! Ask me anything about our products” with “Track my order” and “Return policy” works far better than a bare “Hello”.

• Choose how the chat starts: the button only, a greeting with suggested questions, or opening automatically on desktop.

• Show the greeting after a short delay so visitors can look at the page first.

• Give the agent a name, a picture and a caption so it looks like part of your brand.

• Add a footer line saying answers are AI-generated and may contain mistakes.

• Show or hide the chat by page URL and device, and check on a phone that it doesn’t cover buttons.

Collect leads and hand off to a person

• Collect contacts — ask for a name, phone or email after the first reply (good for support: visitors share more once they got help), before the chat, or make it required (good for lead generation).

• Follow-up message — re-engages a visitor who went quiet.

• Contact a human — a card with a team member’s photo, name and buttons, shown when a visitor asks for a person, the agent can’t answer, a keyword comes up or a visitor dislikes an answer.

• Chats by email — every chat’s transcript and lead data can be sent to your inbox; all chats and leads are also in your dashboard.

More on handoff: human handoff.

How to create a chatbot with ChatGPT (with code)

If you need full control over the model, interface and data, build the chatbot yourself on the OpenAI API — the API behind ChatGPT. You’ll need a developer and a server.

1. 1.

   Get an API key

   Create an account on the OpenAI platform, add billing (the API is paid by usage) and create an API key.

2. 2.

   Set up a backend

   Use Python or Node.js on a server. Keep the key in an environment variable on the server — never in your page’s JavaScript, where anyone can read it.

3. 3.

   Send messages to the model

   Your backend sends the conversation with a system message (the bot’s role and rules) and returns the reply.

4. 4.

   Build the chat window

   Make a chat box in HTML, CSS and JavaScript that posts the visitor’s message to your backend and shows the answer.

5. 5.

   Give it your content

   The model doesn’t know your business. Put key facts in the system message, or search your documents and send the matching parts with each question (retrieval).

6. 6.

   Test and maintain

   Try odd and incomplete questions, handle errors and rate limits, store conversations, and keep up with API changes.

A minimal backend call in Python:

from openai import OpenAI

client = OpenAI()  # reads OPENAI_API_KEY from the environment

def reply(history):
    response = client.chat.completions.create(
        model="your-model",
        messages=[{"role": "system", "content": "You are the support assistant for Acme. Answer only about Acme."}] + history,
    )
    return response.choices[0].message.content

Build it yourself or use a no-code chatbot?

Build your own when the chatbot is part of your product or needs deep access to your systems. For answering visitors, capturing leads and supporting customers on a website, a no-code chatbot gets you there faster.

Test, launch and keep improving

1. 1.

   Test before you share it

   Ask the questions real visitors ask, including vague and off-topic ones, and check the route to a person.

2. 2.

   Read the chats

   Look for questions it answered poorly or couldn’t answer, and add them as Q&A pairs or text.

3. 3.

   Keep the knowledge current

   Old promotions, prices and policies lead to wrong answers. Review the knowledge every month.

4. 4.

   Tune the opening

   Swap suggested questions and compare which ones visitors tap: “Help me choose” often beats “Product recommendations”.