Chatref for Strapi: How to add AI customer support to your site

Your Strapi site is live. Content flows smoothly, orders come in, and visitors browse your pages. Then the questions start. A customer can’t find the return policy. Another wants to know if you ship to their country. Your inbox fills up. You answer the same things over and over while trying to grow the business. That gap – between a great content backend and fast, helpful replies – costs you time and trust.

Chatref closes that gap. It adds an AI chat to your Strapi site that learns your business and answers customer questions instantly, in your voice. A real person can jump into any chat when needed. You pay only for what you use, with simple prepaid credits and no per-seat fees. This guide shows you exactly how to connect Chatref to Strapi and turn your site into a support engine that works while you sleep.

Why Strapi sites need smarter support

Strapi gives you full control over your content. You build pages, blogs, product listings, and help docs with ease. But when a visitor has a question, they often leave the site or send an email. That delay hurts sales and trust.

Small teams feel the pain most. You might be a solo founder, a marketing lead, or a customer success person wearing many hats. You cannot sit in a live chat all day. Yet customers expect instant answers. If they don’t get them, they move on.

An AI chat widget changes that. It greets visitors, understands their questions, and replies with accurate information pulled from your own Strapi content. It never guesses. It works 24/7. It frees you to focus on higher-value work while your customers get the help they need right away.

Chatref fits this need perfectly. It learns from your docs, site pages, and files. It answers in your brand’s tone. And when a conversation needs a human touch, you can step in from a shared inbox – without losing context.

What Chatref brings to your Strapi project

Chatref is not just a chatbot. It is a full customer-support tool that works alongside your Strapi site. Here is what you get when you connect the two.

• AI agent that knows your business – You train it on your own content. It answers based on facts, not guesses.
• Website widget – Add the chat to any Strapi frontend with one snippet. No coding required.
• Shared inbox – Watch chats live and take over when a human is needed. Your whole team can use it, with no per-seat fees.
• Omnichannel – One agent works across your website, Slack, email, and WhatsApp. A conversation that starts on your site can continue on email without repeating information.
• Custom actions – Let the chat collect contact details, link to a specific page, or carry out simple tasks like booking a call.
• Lead capture – Turn chats into contacts automatically. You get the name and email without asking.
• Conversation tags – Chats get labelled by topic. You can filter and report on what people ask most.
• Insights and analytics – See how your agent performs, what questions come up, and where you can improve your content.
• Multilingual – Help customers in 11 languages. The agent detects the language and replies in kind.
• Customization – Match the chat widget to your brand colors, logo, and greeting. No code needed.
• Pay as you go – Prepaid credits cover your usage. No monthly subscriptions, no per-seat fees.

All of this sits on top of your Strapi content. You keep managing your site as you always have. Chatref pulls from what you already created.

How to add Chatref to Strapi in minutes

Adding Chatref to a Strapi site is straightforward. You do not need a developer, but if you have one, it takes even less time.

First, sign up for a free Chatref account. Once inside, you create a workspace and an AI agent. The platform gives you a small JavaScript snippet. That snippet is the bridge between Chatref and your Strapi frontend.

Next, paste that snippet into your Strapi project. How you do this depends on your frontend setup.

• If you use a plain HTML template or a static site generated from Strapi, add the snippet just before the closing </body> tag in your main layout file.
• If you use a React, Next.js, Vue, or Nuxt frontend, you can inject the snippet via a custom script component or directly in your root layout. Many teams add it to the _document.js or _app.js file in Next.js, or the index.html in a Vue app.
• If you manage your Strapi frontend through the admin panel’s “custom scripts” field (some setups allow this), you can paste it there.

Once the snippet is live, the chat widget appears on every page of your site. You can control which pages show it by adjusting the snippet settings in Chatref. For example, you might hide it on a login page or show it only on product pages.

The whole process takes roughly five minutes. There is no plugin to install, no API keys to configure. The snippet handles everything.

After the widget is up, you can customize its look. Change the colors to match your brand, upload your logo, and set a welcome message. All of this happens inside Chatref’s settings panel, not in your Strapi code.

Teaching your AI agent with your Strapi content

The real power comes when you train the agent. Chatref uses a knowledge base that you fill with your own information. This is what makes the answers accurate and on-brand.

You can add content from several sources.

• Your Strapi website pages – Give Chatref the URLs of your key pages. It reads the text and learns from it. This works for your FAQ page, shipping policy, product descriptions, and blog posts.
• Documents and files – Upload PDFs, Word files, or text documents. If you have a user manual or a pricing sheet, drop it in.
• Plain text – Paste snippets directly into the knowledge base. This is useful for quick updates or temporary offers.

The agent processes this content and uses it to answer questions. When a customer asks, “What is your return policy?” the agent finds the relevant section from your returns page and replies in a natural way. It does not make up an answer. If the information is not in your knowledge base, it says so honestly.

The agent answers from your own Strapi content, so it never makes up facts. That keeps trust high and support tickets low.

You can update the knowledge base anytime. If you change a policy in Strapi, just re-add the updated page or document. The agent will use the new information from that point on. There is no need to retrain or reconfigure anything.

This setup means your Strapi content stays the single source of truth. You write it once, publish it on your site, and the agent uses it to support customers.

Keeping your brand voice and stepping in when needed

A chat widget should feel like a natural part of your site, not a foreign tool. Chatref lets you customize the look and tone so it fits right in.

You can set the agent’s name, choose an avatar, and write a greeting that matches your brand personality. The widget colors, position, and size are all adjustable. No CSS or coding is needed.

But even the best AI cannot handle every situation. Sometimes a customer wants to talk to a real person. Chatref’s shared inbox makes that easy.

Your team can watch live chats from a single dashboard. When a conversation needs a human, you click to take over. The customer sees a smooth transition. You get the full chat history, so you never ask them to repeat themselves.

This shared inbox works for your whole team. Because there are no per-seat fees, you can add everyone who might need to step in – support agents, sales reps, even the founder. Each person can see and respond to chats from one place.

Lead capture runs in the background. When a visitor shares their email or name, Chatref saves it as a contact. You can export these leads or connect them to your CRM. This turns casual chats into real business opportunities without any extra work.

Managing chats across channels

Your customers do not only live on your website. They might send a message on WhatsApp, email a question, or ping you on Slack. Chatref brings all these channels together under one agent.

When you connect Chatref to your Strapi site, you can also link it to your Slack workspace, email address, and WhatsApp number. The same AI agent answers on every channel. The knowledge base stays the same. The brand voice stays consistent.

If a customer starts a chat on your website and later emails a follow-up, the agent recognizes them. The conversation history carries over. This omnichannel approach means you never lose context, and the customer gets a seamless experience.

For a Strapi site that already uses these channels for support, this is a big time-saver. You do not need separate tools or bots for each platform. One Chatref workspace handles it all.

Tracking and improving with insights

You cannot improve what you do not measure. Chatref gives you clear insights into how your support is performing.

The analytics dashboard shows you what people ask about, how many chats the agent handles, and how often a human takes over. You can see which questions the agent answers well and which ones it struggles with. This helps you spot gaps in your knowledge base or your Strapi content.

Conversation tags add another layer. Chats are automatically labelled by topic – “shipping,” “returns,” “pricing,” and so on. You can filter by tag to see trends. If “returns” spikes, maybe your policy page needs to be clearer. You can update the page in Strapi, re-add it to the knowledge base, and watch the tag volume drop.

All of this runs on a pay-as-you-go model. You buy prepaid credits and use them as chats happen. There are no monthly commitments. You can start small and scale up as your traffic grows. This is ideal for Strapi sites that have seasonal spikes or are just beginning to offer live support.

Key takeaways

• Chatref adds an AI chat widget to your Strapi site that answers customer questions using your own content.
• You can set it up in minutes by pasting one snippet into your frontend – no plugins or coding needed.
• The agent learns from your Strapi pages, documents, and text, so answers are accurate and never made up.
• A shared inbox lets your team take over any chat live, with no per-seat fees.
• The pay-as-you-go model with prepaid credits means you only pay for what you use, with no long-term lock-in.

Frequently asked questions

Do I need coding skills to add Chatref to Strapi? No. You copy a small snippet provided by Chatref and paste it into your site’s template. If you can edit a layout file or use a custom script field, you can do it. For headless frontends like Next.js, a developer can add it in seconds, but it is still a simple copy-paste.

Can Chatref answer in multiple languages? Yes. The agent automatically detects the customer’s language and replies in that language. It supports 11 languages out of the box. Your knowledge base can be in one language, and the agent will translate its answers on the fly.

What happens if the AI cannot answer a question? The agent will say it does not have the information and can offer to connect the customer with a human. You can also set up a fallback action, like collecting an email address for follow-up. This keeps the conversation helpful rather than frustrating.

How does the pay-as-you-go pricing work? You buy prepaid credits inside Chatref. Each chat message uses a small number of credits. There are no monthly fees, no per-seat charges, and no hidden costs. You top up when you need more. This gives you full control over your spending.

Can I use Chatref with a Strapi site built on Next.js or Gatsby? Absolutely. Chatref works with any frontend framework. The snippet is just JavaScript that loads the widget. Whether you use Next.js, Gatsby, Vue, or plain HTML, the integration is the same. Paste the snippet into your root layout component, and the widget appears on your site.

Adding an AI support layer to your Strapi site does not have to be complex or expensive. Chatref gives you a fast, flexible way to answer customer questions, capture leads, and free up your team – all while keeping your content as the single source of truth. Start free today and see how a few minutes of setup can change the way you support your customers.

Start free