How to Add an AI Chatbot to Any Website in 5 Minutes

Why add an AI chatbot to your website?

Visitors expect instant answers. A well-trained AI chatbot helps you capture leads, deflect repetitive questions, and keep people on your site longer. If you have been searching for how to add an AI chatbot to your website or embed chatbot experiences without hiring a developer, you can do it end-to-end with ChatCraft in a few minutes.

What you need before you start

• A ChatCraft account (free to start)
• Access to your website HTML or your site builder’s “custom code” block
• A short description of what you want the bot to do (optional but recommended)

Step 1: Sign up and create your first bot

1. Go to ChatCraft and create your account.
2. Open the dashboard and choose Create bot.
3. Give your bot a clear name that matches your brand (for example, “Acme Support Bot”).
4. Write a system prompt that explains tone, boundaries, and what the bot should help with.

Tip: mention languages, products, refund policy links, and anything you never want the bot to guess.

Step 2: Shape personality and knowledge

ChatCraft lets you tune how your bot sounds using the personality controls, then ground answers with documents:

• Upload PDFs, Word files, or spreadsheets so responses follow your materials.
• Preview the widget to confirm the tone feels on-brand.
• Iterate on the prompt until answers are concise and accurate.

This step is what separates a generic chat window from a bot that actually helps customers.

Step 3: Copy the embed script

In your bot’s deploy section, choose Website embed. ChatCraft gives you a single script snippet similar to:

<script src="https://chatcraft.co.uk/widget.js" data-bot-id="YOUR_BOT_ID" defer></script>

Place it near the end of your page, just before the closing </body> tag, so it does not block rendering.

Step 4: Publish on your site

Where you paste the snippet depends on your stack:

• Static site / HTML: paste into your layout template.
• WordPress / Webflow / Shopify: use a “custom code” or “embed” element that allows scripts in the footer.
• Next.js / React: add the script with your framework’s Script component or a layout file, using the same src and data-bot-id attributes.

After you deploy, open your site in an incognito window and confirm the launcher appears.

Step 5: Test and monitor

Run through common questions customers ask. Adjust the prompt or documents if answers drift. Use ChatCraft analytics to see which topics come up most often so you can improve your knowledge base over time.

FAQ

Will the widget slow down my site?

Load the script with defer and keep it in the footer. The widget is designed to stay out of the critical rendering path.

Can I change the bot later?

Yes. Update prompts, documents, and styling from the dashboard; changes apply without another deploy if you keep the same bot ID.

Is this the same as “embed chatbot” tutorials that use iframe-only widgets?

ChatCraft combines a hosted widget with Claude-powered responses and optional knowledge retrieval, so you are not limited to a static FAQ tree.

Next steps

When you are ready to go beyond the website, connect the same bot to Discord, Minecraft, or Roblox from the same ChatCraft project.