Docs/Quick Start

Quick Start Guide

Get a working chatbot on your website in under 5 minutes. No coding required.

Create your chatbot

Hit "New Chatbot" from the dashboard.
Pick a name (e.g. your company name or something your visitors will recognize).
That's it. The chatbot is created with smart defaults. You can customize everything later.

Add your content

Give your chatbot something to talk about. Paste a URL and we'll crawl up to 10 pages on that domain automatically.

Go to the "Sources" tab on your chatbot.
Paste your website URL (e.g. https://yoursite.com). We'll crawl it and pull text from up to 10 pages.
Or upload a PDF, TXT, CSV, or DOCX file (max 10 MB).
You can add multiple sources. The chatbot combines everything it knows.
Processing takes a few seconds. You'll see the status change to Ready.

Review the system prompt

We auto-generate a prompt based on your content. Tweak it if you want.

Go to the "Settings" tab.
The system prompt tells the chatbot who it is and how to behave. We generate one automatically from your content, but you can edit it.
A good prompt is specific: "You are the support agent for Acme Corp. Only answer from the provided context. If you don't know, tell the user to email support@acme.com."
Bad prompt: "You are a helpful assistant." That's too generic and the bot will make stuff up.

Test it

Use the playground to make sure it answers correctly before going live.

Click "Test" in the top bar to open the playground.
Ask it questions your customers would ask.
If the answers are off, check your sources (is the info actually in there?) or adjust the system prompt.

Embed the widget

One line of HTML. Paste it into your site and the chat widget appears instantly.

Go to the "Widget" tab.
Copy the embed snippet.
Paste it into your website's HTML, right before the closing </body> tag.
That's it. A chat bubble appears in the bottom-right corner of your site.

The embed snippet

This is the only code you need. Replace YOUR_CHATBOT_ID with the ID from your dashboard.

HTML

<!-- Paste this before </body> -->
<script
  src="https://xtell.io/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  defer
></script>

Platform-specific setup

WordPress

Go to Appearance > Theme File Editor > footer.php. Paste the snippet before </body>. Or use the "Insert Headers and Footers" plugin.

Shopify

Go to Online Store > Themes > Edit Code > theme.liquid. Paste the snippet before </body>.

Wix

Go to Settings > Custom Code > Add Code. Paste the snippet, set placement to Body End, and apply to All Pages.

Squarespace

Go to Settings > Advanced > Code Injection. Paste the snippet in the Footer field.

Webflow

Go to Project Settings > Custom Code. Paste the snippet in the "Before </body> tag" field.

Next.js / React

Add a <Script> tag in your root layout.tsx with strategy="afterInteractive" or just drop the snippet in your public index.html.

Plain HTML

Open your HTML file. Paste the snippet right before the </body> tag. Done.

Troubleshooting

Widget not showing up?

Check that the snippet is before the closing </body> tag (not in the <head>). Open your browser console and look for errors. Make sure the chatbot ID is correct.

Bot gives generic answers?

Your sources might not contain the info. Go to Sources, check the chunk count. If it's 0, the page might not have had extractable text (e.g. JavaScript-rendered pages). Try uploading a text or PDF file instead.

Bot makes things up?

Make your system prompt stricter. Add something like: "Only answer from the provided context. If you don't have the information, say so and suggest contacting us directly."

Widget color not updating?

The widget fetches the color from the server on each page load (cached for 60 seconds). Do a hard refresh or wait a minute.

What's next?

Add more sources to improve coverage. The more content your bot has, the better it answers.
Check conversations in the dashboard to see what visitors are asking and how the bot responds.
Use the API if you want to integrate the chatbot into your own app. API docs