Quick Answer
To add an AI chatbot to a website, create a chatbot in your RSFlowHub dashboard, attach a knowledge base with your FAQs or documents, copy the one-line script tag from its Widget tab and paste it before the closing </body> tag. It works on plain HTML, WordPress, Shopify, React, Next.js and Laravel, needs no backend code, and answers visitors from your own content.
A website chatbot used to mean choosing a vendor, wiring an iframe, and hoping the answers were not made up. Today you can have a chat window on your site in about ten minutes, as long as you set it up around your own content instead of a generic model. This guide walks through the whole process with the RSFlowHub chat widget: what to prepare, how to install it on each platform, how to keep it from guessing, and how to check that it works.
What a website chatbot actually needs
A useful chatbot is three things working together, and only one of them is the chat window:
- Knowledge: the documents, FAQs and policies the bot is allowed to answer from. This decides whether answers are right.
- A model and a rulebook: the AI that writes replies, plus rules such as "answer only from the knowledge base" and "offer a human when unsure".
- A widget: the floating window on your pages. It should be light, safe to embed and unable to break your site's styling.
With RSFlowHub the dashboard handles the first two, and the widget is a single script tag. The widget is a tiny loader (about 4 KB gzipped) that only draws the chat button; the chat itself downloads the first time a visitor points at or taps the button, so pages where nobody chats pay almost nothing.
Step 1: Prepare the content the bot may use
Do this before touching any code, because the knowledge base is the biggest factor in answer quality. Gather:
- Your most-asked support questions with their real answers.
- Shipping, refund, pricing and booking policies, in plain language.
- Product or service descriptions, including what you do not offer.
- Opening hours, contact methods and how to reach a person.
A chatbot repeats what it reads. A page that says "industry-leading support" teaches it nothing, while "we reply to email within one business day, Monday to Friday" gives it a fact it can quote. Short, specific, factual sentences work best.
Step 2: Create the chatbot and attach the knowledge
- Sign in and open Dashboard → Chatbots, then create a chatbot.
- Attach a knowledge base with your FAQs or uploaded documents.
- Choose a mode. In the support and FAQ modes the bot answers only from the attached knowledge, so add content before you go live.
Creating a chatbot is free. Replies use credits from your RSFlowHub wallet at the same rates as the Chatbot API, and answers found directly in your FAQ cost little or nothing.
Step 3: Install the script tag
Open the chatbot's Widget tab. The "Install on your website" box shows your personal code. It looks like this, with your own token:
<script src="https://rsflowhub.com/widget/v1/rsflowhub-widget.js"
data-widget-token="wt_sec_YOUR_WIDGET_TOKEN"
async></script>The wt_sec_ token is public by design. It can only chat with that one chatbot, and it is not your API key, so it is safe to appear in your page source. Never put your private API key in website code.
Where to paste it on each platform
| Platform | Where the tag goes |
|---|---|
| Plain HTML | Just before </body> on every page that should show the chat. |
| WordPress | A header/footer plugin such as WPCode (footer section), or footer.php just before wp_footer(). |
| Shopify | Online Store → Themes → Edit code → layout/theme.liquid, just before </body>. |
| React | Easiest: public/index.html before </body>. Or add the script from a component with useEffect. |
| Next.js | The Script component in app/layout.tsx with strategy="afterInteractive". |
| Laravel | Your main Blade layout, just before </body>. |
Add it once per page, not once per component, otherwise you get two chat buttons. Full copy-paste snippets for each platform are in the chat widget docs.
Step 4: Customize it and put guardrails around it
Every setting lives in the Widget tab and loads on the next page view, so you never reinstall the code to change something. The settings worth your time:
- Title, brand colour, greeting and up to 4 quick replies so the first impression matches your site.
- Allowed websites: list your own domains (
example.comalso coverswww; use*.example.comfor every subdomain) so nobody else can use your token. - Daily message limit: caps visitor messages per day so a traffic spike or a bot cannot drain your credits. You are emailed at 80% and when it is reached.
- Monthly spending limit: an additional safety net on credit use.
- Privacy notice and retention: tell visitors that replies are AI-generated and choose how long chats are kept (30, 90, 180 or 365 days, or until you delete them).
Keeping the bot accurate
No AI can promise zero mistakes, so aim for a setup where mistakes are rare and easy to spot:
- Ground it. Keep the bot in a mode that answers from your knowledge base instead of general knowledge.
- Review what it could not answer. Questions the bot could not answer are listed in your dashboard. Answering them once adds that knowledge for next time, which is the fastest way to improve quality.
- Offer a human. Turn on Talk to Human so a visitor who is stuck can open a support ticket instead of arguing with a bot. The ticket is linked to the conversation, so your team sees what was already said.
- Keep content current. When a price or policy changes, update the knowledge base the same day.
Say plainly that the replies are AI-generated, and give a way to reach a person. Visitors forgive a bot that admits its limits far more readily than one that confidently invents an answer.
Testing before you go live
- Use the live preview and the dashboard test chat first. Ask the ten questions your customers ask most and check every answer against your own policies.
- Ask three things that are not in your content. The bot should say it does not know or offer a human, not improvise.
- Paste the script onto a staging page, then onto the live site. Check the chat opens on mobile and that your allowed-websites list includes the real domain.
- Look at the conversation in your dashboard to see exactly what visitors would see.
Common problems and fixes
| Symptom | Likely cause |
|---|---|
| No chat button appears | The token attribute is missing, or an ad blocker, a Content-Security-Policy or a cache plugin is blocking the script. |
| Button shows but clicking does nothing | The second file, rsflowhub-widget-chat.js, did not load. Check the network tab; clicking again retries. |
| 403 "Origin not allowed" | Your domain (or its www or subdomain variant) is missing from Allowed websites. |
| "Temporarily unavailable" | Out of credits, the monthly spending limit was reached, or the AI provider is down. |
| Changes do not show | A page cache or CDN in front of your site. Settings load on each page view, so clear that cache. |
Next, capture visitors' details and hand tricky chats to your team in Chatbot Lead Capture and Support Tickets. Need to write the replies your bot should give? See AI Prompts for Customer Support. Want a form as well? Read Contact Form Without a Backend.
Add the Chat Widget to Your Website
Creating a chatbot is free, and the install is one script tag. Read the install guide or capture leads and support tickets with the same widget.
See the Chat Widget →Key Takeaways
- Prepare real, specific content first: knowledge quality decides answer quality.
- Installation is one script tag before the closing body tag, on any platform that lets you add a script.
- The widget token is public by design, so lock it to your own domains in Allowed websites.
- Set a daily message limit and a monthly spending limit to protect your credits.
- Keep the bot grounded in your knowledge base and review the questions it could not answer.
- Always offer a path to a human, and say that replies are AI-generated.
No comments yet
Be the first to share your thoughts on this article!