How do I setup Crisp Overlay on my chatbox widget?
Crisp Overlay is an AI-powered self-service search widget for your website, that runs from the Crisp Chatbox widget. Think of it as an interface that your users will see before they can message you, so that your users search for help first before they contact you.
Crisp Overlay lets your users use AI search to find answers from your Automations data sources, right from your Crisp Chatbox widget. Users go through the Overlay AI search widget before they can contact you, reducing by up to 50% the number of chats in your Crisp Inbox.
While working on Crisp AI features for our existing messaging products, we discovered that messaging was not always the most productive interface to get quick answers to simple questions. A large portion of your users only need a simple answer. We've imaginated an interface dedicated to getting simple AI-curated answers from your data sources, fast.
We called it Crisp Overlay, since it can be used to "shield" your Crisp Chatbox against users coming with simple questions, costing you expensive human support agent time. If someone gets through Crisp Overlay and finds their answer - good for you: they won't ask over chat and create a conversation - however, if they did not find what they were looking for, they will be offered to contact your human support.
Whenever a user performs a search with Crisp Overlay, our AI will look into the data sources you've previously imported from the Automations section of your Crisp Dashboard (read how you can add data sources).
Our system will find search results for the user search query, but they first need to be ranked for relevance (we call it "quality"). Once the ranked results are obtained, they get instantly displayed in your Crisp Overlay interface, in a matter of seconds. Only the most qualitative results are used.
In the meantime, we generate a short textual answer that summarizes those relevant search results, providing the user with a quick answer.
Crisp Overlay is available to paid Crisp users with an active MagicReply plugin subscription.
The feature is opt-in, meaning that your Crisp Chatbox will not show the Crisp Overlay search box by default, you'll need to enable it first, in the Automations section of your Crisp Dashboard. This can easily be done in a single click in the AI Overlay Widget section.
Before you start testing your Crisp Overlay, make sure to import data sources from the Data Sources menu in the Automations section. Our AI needs data in order to generate relevant results.
If you'd like to force your users to go through Crisp Overlay before they can contact your customer support through regular chat, you may enable the "Require users to search with Crisp Overlay before reaching out" option. Your users will only be allowed to initiate a chat with your support team if they went through at least 1 search from your Overlay widget.
There are currently two ways to open your Overlay:
From the Crisp Chatbox UI
Programmatically from the Web Chat SDK
Both ways can be used simultaneously.
If you'd like to add a custom search button or search bar on your website, for instance in your website header, you may open your Crisp Overlay from the Web Chat SDK as such:
Note that your Overlay can still be opened if your Crisp Chatbox is invisible. Make sure the Crisp Chatbox is included on the page you want to open your Overlay.
Your Overlay can be customized to adapt to your business needs, your user languages and your website theme!
If your website or Web app is using a Dark Mode theme, you can request your Crisp Overlay to switch to Dark Mode using the Web Chat SDK:
You can switch back to default light mode anytime:
In most businesses, there are recurring questions from users that you'd like to suggest in the Overlay UI. You can add those in the Automations section of your Crisp Dashboard, from your AI Overlay Widget settings.
Note that those frequent searches and categories can be localized, meaning that you may add other languages such as French so that, users using your Crisp Chatbox in French will see localized search recommendations.
The "Default" language is always used as a fallback if the user language is not defined.
Crisp Overlay lets your users use AI search to find answers from your Automations data sources, right from your Crisp Chatbox widget. Users go through the Overlay AI search widget before they can contact you, reducing by up to 50% the number of chats in your Crisp Inbox.
While working on Crisp AI features for our existing messaging products, we discovered that messaging was not always the most productive interface to get quick answers to simple questions. A large portion of your users only need a simple answer. We've imaginated an interface dedicated to getting simple AI-curated answers from your data sources, fast.
We called it Crisp Overlay, since it can be used to "shield" your Crisp Chatbox against users coming with simple questions, costing you expensive human support agent time. If someone gets through Crisp Overlay and finds their answer - good for you: they won't ask over chat and create a conversation - however, if they did not find what they were looking for, they will be offered to contact your human support.
How does the Overlay work?
Whenever a user performs a search with Crisp Overlay, our AI will look into the data sources you've previously imported from the Automations section of your Crisp Dashboard (read how you can add data sources).
Our system will find search results for the user search query, but they first need to be ranked for relevance (we call it "quality"). Once the ranked results are obtained, they get instantly displayed in your Crisp Overlay interface, in a matter of seconds. Only the most qualitative results are used.
In the meantime, we generate a short textual answer that summarizes those relevant search results, providing the user with a quick answer.
How can I enable my Overlay?
Crisp Overlay is available to paid Crisp users with an active MagicReply plugin subscription.
The feature is opt-in, meaning that your Crisp Chatbox will not show the Crisp Overlay search box by default, you'll need to enable it first, in the Automations section of your Crisp Dashboard. This can easily be done in a single click in the AI Overlay Widget section.
Before you start testing your Crisp Overlay, make sure to import data sources from the Data Sources menu in the Automations section. Our AI needs data in order to generate relevant results.
If you'd like to force your users to go through Crisp Overlay before they can contact your customer support through regular chat, you may enable the "Require users to search with Crisp Overlay before reaching out" option. Your users will only be allowed to initiate a chat with your support team if they went through at least 1 search from your Overlay widget.
Ways to open my Overlay
There are currently two ways to open your Overlay:
From the Crisp Chatbox UI
Programmatically from the Web Chat SDK
Both ways can be used simultaneously.
If you'd like to add a custom search button or search bar on your website, for instance in your website header, you may open your Crisp Overlay from the Web Chat SDK as such:
$crisp.push(["do", "overlay:open"])Note that your Overlay can still be opened if your Crisp Chatbox is invisible. Make sure the Crisp Chatbox is included on the page you want to open your Overlay.
How can I customize my Overlay?
Your Overlay can be customized to adapt to your business needs, your user languages and your website theme!
Use Dark Mode
If your website or Web app is using a Dark Mode theme, you can request your Crisp Overlay to switch to Dark Mode using the Web Chat SDK:
$crisp.push(["config", "color:mode", ["dark"]]);You can switch back to default light mode anytime:
$crisp.push(["config", "color:mode", ["light"]]);Add frequent searches & categories
In most businesses, there are recurring questions from users that you'd like to suggest in the Overlay UI. You can add those in the Automations section of your Crisp Dashboard, from your AI Overlay Widget settings.
Note that those frequent searches and categories can be localized, meaning that you may add other languages such as French so that, users using your Crisp Chatbox in French will see localized search recommendations.
The "Default" language is always used as a fallback if the user language is not defined.
Updated on: 26/05/2024
Thank you!