Integration
How to connect build knowledge base help to a chat widget
How to connect build knowledge base help to a chat widget — answered from your own docs. How Knowledge Base Software teams use Chatref (website widget, knowledg
Your help content becomes a chat assistant when you connect it to a website widget. Chatref ingests your guides, PDFs, and FAQs, then a snippet you place on any page delivers answers grounded in that exact content. The widget learns your business, not the open web, so every reply stays accurate and on-brand.
What connects to what
The connection runs from your source help material – setup guides, import walkthroughs, permission docs – straight into a website widget. You feed Chatref the content once, and it builds a retrieval layer that the widget queries on each visitor question. The widget does not search the internet or hallucinate. Every answer traces back to a passage you uploaded.
This is not a standalone search box that lists links. The widget resolves the question inside the chat, pulling the exact next step from your content. Because Chatref trains on your own files and pages, the model stays locked to your business facts, even in long-running threads.
Think of it as: your knowledge base (the raw help you maintain) → Chatref’s ingestion and grounding → the website widget (the front-door for visitors). The connection is persistent: update your docs anytime, and the widget’s answers automatically reflect the new material after re‑training.
For SaaS teams using dedicated Knowledge Base Software, this link turns static articles into an always-on support agent that never sends users to dead-end pages.
How to set it up
Setting up the connection takes three steps: add your content, preview the agent, and drop the widget snippet onto your site.
1. Upload your help docs
Inside your Chatref workspace, go to the content library. You can upload PDFs, paste plain text, point to a sitemap, or enter individual URLs. The system scans everything, extracting the structure and semantics. As you grow, feed in new onboarding guides, FAQ updates, and product release notes – nothing is discarded unless you remove it.
Aim for complete coverage: the more of your help center you upload, the fewer questions the agent will fail to answer. Include edge cases like error codes, import formatting rules, and permission requests. If a topic appears in support tickets, it should be in the content you provide.
2. Verify answers in the playground
Before installing the widget, open the live playground in Chatref. Pose real customer questions – “How do I import contacts?”, “Why can’t I edit this pipeline stage?” – and check that the response cites the correct source. The playground uses the same grounding as the widget, so this is an exact preview.
If an answer misses a nuance, add the missing information to your uploaded source (or upload an additional document) and re-index. Test again until the output matches what a support agent would say.
3. Install the widget snippet
In the Chatref dashboard, go to Integrations → Website Widget. You will get a small JavaScript snippet. Paste it into the <head> or just before the closing </body> tag of every page where you want the chat icon to appear. The widget accepts an origin allowlist so it only loads on your verified domains – configure this in the widget settings.
That is it. No separate hosting, no custom backend. The connection from your knowledge base to the widget is now live.
You can optionally customize the widget’s primary color, welcome message, and chat launcher icon to match your brand. These settings take effect immediately without changing the snippet.
What users see
When a visitor lands on your site, the widget appears as a chat bubble in the corner. They type a question in natural language – “How do I reset my password?” or “What’s the file format for bulk imports?” – and the agent responds with a direct answer drawn from your help content. There is no delay from spinning up infrastructure; it responds on the first message.
The widget keeps the conversation threaded. Follow-ups (“What about CSV headers?”) are resolved in context without repeating the entire question. If the user leaves and returns later, the chat history remains.
Behind the scenes, the agent is not guessing. Every answer references the specific source passage it used, which you can see in your conversation inbox. This is critical for teams that need to audit responses or spot gaps in their documentation.
The widget can also capture lead details (like email and name) before or during the chat, turning support into a sales opportunity. However, the core connection – your knowledge base feeding into the widget – works the same with or without capture enabled.
Troubleshooting
The widget shows a generic “I don’t know” message too often
This almost always means the content you uploaded does not cover the questions visitors are asking. Review your conversation inbox to see the exact queries that failed. Then add the missing information to your source docs or upload a new file covering those topics. Re‑train (re-index) and test again in the playground.
The snippet is on the page but the widget does not appear
Check the origin allowlist in your Chatref widget settings. The domain where the snippet lives must match exactly (including subdomain and protocol). Also verify that no ad blocker or content security policy is blocking the script. The snippet needs to load from app.chatref.ai; allow that origin in your CSP if you use one.
Answers are correct but feel poorly worded or off‑brand
Tone issues come from the source material. If your help docs are terse or jargon-heavy, the widget will mirror that. Edit the underlying articles to match the voice you want – use the same phrasing, examples, and clarity your human agents would. Re‑index after edits. No separate prompt‑engineering step is needed; the agent inherits the style of the content you give it.
The widget loads but clicks do nothing
The snippet may be placed inside a restricted iframe or a page builder that sanitizes <script> tags. Move the snippet to a location that is reliably rendered, such as a global footer template. If you use a tag manager, ensure the script is not deferred beyond the page’s interactive state; it should fire as soon as the DOM is ready.
I added new content but old widget answers still appear
The indexing does not happen automatically at every page load. After uploading new material, trigger a manual re‑train from the content dashboard. While re‑training, the agent continues to answer from the previous snapshot; once complete, it switches to the updated index.
FAQ
What causes build knowledge base problems for Knowledge Base Software?
Most build problems stem from incomplete or poorly structured source content. If the knowledge base software receives only marketing pages and no granular help docs, the AI cannot resolve operational questions like “How do I format the CSV for imports?”. Missing edge cases, outdated articles, or mixing unrelated topics (e.g., internal wiki and customer-facing content) also degrade answer quality. Another cause is insufficient testing before going live – answers that look fine in a demo may break against real user phrasing.
How do I improve build knowledge base for Knowledge Base Software?
Start by mapping the top 20 support questions your team repeats daily. Write or update help articles that directly answer each one, using the exact language users type. Structure content with clear headings and step-by-step instructions so the software can parse actionable sections easily. After uploading, test every question in the playground and iterate until the response matches what a human agent would say. Finally, keep the knowledge base current – schedule a monthly review of failed queries from your chat logs and fill the gaps. This cycle tightens the connection between your content and the widget’s accuracy.
Related guides
Put this into practice
Chatref answers your customers from your own content, day and night. Add it to your site and go live in minutes – free to start.