How to add a support chat to your CRM web app

Three things talk to each other: your CRM application, the Chatref agent you train on your help content, and the embeddable widget that lives inside your app.

• Your CRM app – the web application your team or customers log into. It serves as the host, displaying the chat widget in its interface.
• The Chatref agent – the AI agent you build inside Chatref, trained on your own help docs, setup guides, import instructions, and any other content you provide.
• The embeddable widget – a small JavaScript snippet that renders a chat bubble inside your CRM. It connects to your agent over an origin-allowlisted domain, so it only works on the domains you approve.

You maintain your help content in Chatref. The widget pulls answers from that content in real time. The result: every user inside your CRM gets the same accurate, doc-grounded answer, whether they ask about permission settings, data import, or pipeline configuration.

For a deeper look at how this pattern fits CRM platforms, you can see the sub-industry guide.

1. Add your help content. Inside your Chatref workspace, upload your CRM’s existing help documentation – PDFs, help-center URLs, a sitemap, or plain text. You don’t need to clean or format it. Chatref reads everything and learns your product.

2. Create and train your agent. After adding content, the agent trains automatically. Test it in the live playground: ask it a few real questions a new CRM user might have (e.g., “How do I bulk-import contacts?”). Adjust by adding more docs or clarification if needed.

3. Get the embed snippet. Go to your agent’s “Widget” settings. You’ll see a short <script> tag. Copy it.

4. Paste the snippet into your CRM app’s shell. Insert the script into the HTML of your app’s base layout – whichever template wraps every authenticated page (like a master page, index.html, or a layout component). That ensures the widget loads on every screen your users visit.

5. Allowlist your domain. In Chatref, under the same widget settings, add your CRM’s domain (e.g., app.yourcrm.com). The widget won’t load on domains you haven’t approved, which protects it from being used elsewhere.

6. Verify it works. Log into your CRM as a test user. You should see the chat bubble in the corner. Ask a question and confirm the answer comes from your own docs. If it doesn’t appear, check the Troubleshooting section below.

That’s it. One snippet, one domain check, and your CRM now has in-app support that answers from your own content.

Once the snippet is in place, every authenticated user sees a small chat bubble in the lower-right corner of your CRM. Clicking it opens a chat panel. They type a question, and the agent responds with a direct answer built from your own docs – not a generic guess or a web search result.

The response includes a citation or a link to the source document, so users can read the full article if they need more detail. If a question requires a human, the conversation can hand off to your support team with full context. The widget’s colours and branding are fully customisable, so it looks like a native part of your CRM, not a third-party add-on.

Because the widget loads from the shell, it follows users across every page: dashboards, contact lists, settings screens. That persistence means a user can start a question on one page and finish it on another without losing the thread.

Widget not appearing after adding the snippet.
Check that the script is in your app’s base layout and not inside a component that only renders on specific pages. Also confirm the domain is exactly allowlisted (including subdomain and protocol). If your CRM loads pages via client-side routing, the widget should still attach – but verify the script tag has no async or defer that might block execution before the DOM is ready.

Answers don’t match your CRM’s actual behaviour.
Revisit your content. If the agent is pulling from a stale help centre, re-sync the URL or re-upload the latest docs. You can also test problematic questions in the Chatref playground to see which document is being retrieved, then fill gaps or remove contradictory content.

Widget loads but feels slow.
Performance almost always comes down to the host page. If your CRM app is heavy, the widget will load after. There’s nothing to tune on the Chatref side – the snippet is lightweight. Check for render-blocking resources elsewhere on the page.

Users in other regions see the wrong language.
Chatref supports up to 11 languages from a single set of content. If an answer appears in the wrong language, confirm the agent’s default language setting and check whether the user’s browser locale is being honoured. The agent can auto-detect and switch, but it relies on accurate locale headers.

Handoff to a human isn’t working.
Ensure your team has access to the shared inbox for that agent. The widget will still collect the user’s message; if no human is watching, the user sees a note that the team has been notified. Someone needs to be logged into Chatref’s inbox to pick up the conversation.

How do I embed a chat widget?

Copy the <script> snippet from your agent’s Widget settings, then paste it into the HTML of the page or template where you want the chat to appear. For a CRM app, place it in the master layout so it loads on every authenticated page. After that, make sure you’ve allowlisted your domain in the same settings panel – the widget won’t load on unspecified domains.

Where should the chat widget go in an app?

Place it in your application shell or base layout so it’s available on every screen, not just a single page. The lower-right corner is the most common position and the default behaviour. Avoid putting it where it overlaps critical UI like action bars or confirmation dialogs. If your CRM has a dark theme, adjust the widget’s accent colour in the branding settings so it remains visible and matches your product.