Setup
How do I set up the Chatref widget on my communication tool's website?
Adding Chatref to your communication tool’s website takes one snippet and a few clicks. Copy the embed code from your Chatref agent’s settings, paste it into your site’s HTML, and customize the widget to reflect your brand. The setup is designed so anyone on your team can go live in minutes.
Get Your Embed Snippet
- Log in to your Chatref account and open the agent you want to embed.
- Go to the Widget tab and copy the single
<script>snippet. - The snippet is origin‑allowlisted, so it will only loads on domains you specify in the agent’s security settings.
Customize the Widget to Fit Your Brand
- Use the no‑code customization panel to match the widget’s primary color to your brand palette.
- Set the widget’s position, welcome message, and behaviour – e.g. pop‑up greeting or a simple launcher button.
- Custom branding ensures the chat experience feels built‑in to your communication tool, not a bolt‑on.
Install on Your Website
- Paste the snippet right before the closing
</body>tag of every page where you want the widget to appear. - If you use a tag manager (Google Tag Manager, Segment, etc.), you can deploy the snippet through that tool instead of editing templates directly.
- No further coding is needed; the widget will appear automatically after the next page load.
Test and Fine‑Tune
- Visit your live site and start a test chat to confirm the widget loads and answers from your help docs.
- Review the conversation in your Chatref inbox to see how the AI agent responds and where you might want to tweak the greeting or behaviour.
- Use the customization panel to iterate quickly – changes go live instantly without touching the embed code again.
Go Live and Let Chatref Handle Questions
- Once you are happy with the test results, the widget is live for every visitor.
- Chatref’s RAG‑grounded agent will answer setup, billing, and feature questions from your own docs, never guessing.
- Your team can monitor chats in the shared inbox and step in only when a human touch is needed, keeping support scalable as your SaaS grows.
FAQ
How to add Chatref to my website?
Copy the embed snippet from your agent’s Widget settings and paste it just before the </body> tag on every page you want the chat to appear. You can also deploy it via Google Tag Manager if you prefer a tag‑based installation.
What are the steps to set up a chat widget?
- Create a Chatref agent and upload your communication tool’s help docs, guides, or URLs.
- Customize the widget’s appearance and behaviour using the no‑code branding panel.
- Copy the single
<script>snippet and add it to your site’s HTML. - Test the widget on your live domain, then it’s ready for visitors.
Can I customize the Chatref widget?
Yes. Every agent includes a customization panel where you set the primary color, position, greeting copy, and other behaviours. This gives your chat widget a look and feel that matches your communication tool’s brand, with no code required.
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.