AI Mode
AI Mode is Cludo’s conversational search experience. It opens as a panel on top of your page, answers a visitor’s first question with a short, sourced answer, and lets them keep asking follow-up questions in the same conversation. It sits alongside your existing search rather than replacing it, so visitors can still use your regular search results whenever they prefer.
AI Mode combines two Cludo AI features: AI Summary for the first answer and AI Chat for follow-up questions.
How it works
- A visitor opens AI Mode, either from the AI Mode button or by carrying over a question typed in your search box.
- Cludo retrieves the most relevant pages from your engine (the top five results).
- An AI Summary is generated from those pages and streamed into the panel, with citations linking back to the sources.
- The visitor can ask follow-up questions. These continue as an AI Chat conversation that remembers the earlier questions and answers.
If a question cannot be answered from your content, AI Mode tells the visitor that no answer is available instead of guessing.
Key features of AI Mode
- Controlled content scope: Answers come only from content indexed in your engine.
- Natural-language questions and follow-ups: Visitors can ask in their own words and refine the question without starting over.
- Citations and links: Each answer shows the pages it was based on, so visitors can verify the answer and keep reading.
- Voice search: Visitors can ask a question using their microphone.
- Read aloud: Each answer can be read out loud.
- Feedback: Visitors can rate an answer and leave a comment.
- Multilingual: Answers can follow the language of the question, or be fixed to one language. The interface text can be translated automatically or fully customized.
- Customizable look and text: You can change the button, titles, intro text and placeholders, and adjust the styling with CSS.
AI Mode compared to AI Summary and AI Chat
- AI Summary shows one short answer at the top of your search results page.
- AI Chat is a back-and-forth conversation.
- AI Mode gives you both in one panel: an AI Summary for the first question, then AI Chat for the follow-ups. It can be added to any page, including pages that do not show Cludo search results.
How to activate AI Mode
AI Mode is added to your site with a small container and a configuration script. This is currently the only way to implement AI Mode. Follow the steps below.
Please note
Before you start, make sure you have an AI Search engine to use. AI Search can be toggled within the engine settings.
This feature is not included in all subscriptions. If this is implemented without being a part of your subscription, it will not work.
If you’re not sure if AI Mode and/or AI Search engines are included in your subscription or you would like to add it, reach out to your Customer Success Manager.
Preview
Implementation steps
1: Add the AI Mode container
Place the following HTML element where the AI Mode trigger button should appear.
Alternatively, for a floating version, insert it before the closing </body> tag.
<div id="cludo-ai-mode"></div>2: Configure AI Mode script
Add the script just before the closing body tag (</body>) on all pages.
Here, there are a few required properties that need to be updated:
- Customer ID and engine ID
Find these values in MyCludo → Configuration → API - Language
Example: ‘en’ for English. You can find the complete list of languages and their ISO code here.
<script>
window.cludoAiModeConfig = {
customerId: XXXX, // Replace with your Cludo customer ID.
engineId: XXXX, // Replace with your Cludo AI Search engine ID.
language: "XX", // Replace with your site language or omit for
// multi-lingual responses
uiLanguage: "XX" // Replace with the language the text strings should be. They will
// automatically translate to supported languages.
// For full control use the overrideStrings object.
};
</script>
<script src="https://catalog.cludo.com/ai-mode/cludo-ai-mode.js" type="module" defer></script>You have now successfully implemented AI Mode!
Further Customization
AI Mode comes with complete, ready-to-use styling out of the box, so it will work seamlessly on your site without requiring any design changes.
However, if you want to customize colors, typography, spacing, or other visual elements to better match your brand, you can override the CSS classes listed below.
Classes for styling
/* Floating or inline trigger button */
.cludo-ai-mode-toggle {}
/* “Clear conversation” button */
.cludo-ai-mode-clear{}
/* Close button */
.cludo-ai-mode-close{}
/* User input field */
.ai-mode-input{}
/* User’s question bubble */
.ai-mode-question-bubble{}
/* AI response text */
.ai-mode-answer-text{}
/* In-text citation */
.ai-mode-answer-citations{}
/* Individual link beneath each answer */
.ai-mode-link{}Additional customization options
To customize AI Mode further, it is possible to add the following additional parameters to the cludoAiModeConfig object:
overrideStrings?: {
triggerButtonText?: string;
titleText?: string;
introText?: string;
disclaimerText?: string;
inputPlaceholder?: string;
inputPlaceholderFollowUp?: string;
// Feedback strings
feedbackPositiveTooltip?: string;
feedbackNegativeTooltip?: string;
feedbackFollowUpPrompt?: string;
feedbackFollowUpOptions?: string[];
feedbackCommentPrompt?: string;
feedbackCommentPlaceholder?: string;
feedbackSubmitButtonText?: string;
feedbackBackButtonText?: string;
feedbackThankYouMessage?: string;
},
behavior?: {
searchInputSelector?: string | string[]; // If AI Mode is implemented in the search input, it can
// carry the query. Add the selector for the
// input AI Mode should be attached to.
// Example: searchInputSelector: "#cludo-search-input",
voiceSearchLanguage: string, // Enable voice search; BCP-47 recognition language.
// Example: voiceSearchLanguage: "en-US",
voiceSearchSilenceTimeoutMs: number, // How long the microphone keeps listening
// after the speaker stops, in milliseconds.
// Default value: 3500,
allowReadAloud: Boolean // Enable read-aloud control on each answer
// Default value: true.
}Examples
Floating trigger button
Demo
Styling example
.cludo-ai-mode-toggle {
position: fixed;
white-space: nowrap;
right: 40px;
bottom: 40px;
background-color: #019cde !important;
font-weight: 500 !important;
color: #f4f1ff !important;
box-shadow: 0px 12px 16px -4px #1018284a;
}Search with AI Mode
Demo
Code example
HTML
Paste the following code where your search input should be, or add the <div id="cludo-ai-mode"></div> element after the container with your search input.
<div class="cludo-input-container">
<div class="cludo-input-form" role="search" id="cludo-search-input">
<input
class="cludo-input-form__input"
title="Search the page"
name="searchrequest"
type="search"
autocomplete="off"
placeholder="Type your search"
aria-autocomplete="list"
aria-haspopup="true" />
<button type="submit" title="Search" class="cludo-input-form__search-button">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="currentColor"
d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"></path>
</svg>
</button>
</div>
<div id="cludo-ai-mode"></div>
</div>Script
Paste the following before the closing body tag (</body>).
<script>
window.cludoAiModeConfig = {
customerId: CUSTOMER_ID, // Replace with your Cludo customer ID.
engineId: ENGINE_ID, // Replace with your Cludo AI Search engine ID.
language: "en", // Replace with your site language or omit for multi-lingual responses
behavior: {
searchInputSelector: "#cludo-search-input", // Or replace with your custom search input
},
};
</script>CSS
Use styling to control the placement of the AI Mode trigger button. The styling below places the button inside the input field, as well as moves the search button to make space.
.cludo-input-container {
position: relative;
}
.cludo-input-form {
display: flex;
flex-direction: row;
position: relative;
}
.cludo-input-form__input {
flex: 1;
height: 50px;
border-radius: 50px !important;
padding: 10px 200px 10px 20px;
border: 1px solid #306;
color: #306;
-webkit-appearance: none;
}
.cludo-input-form__search-button {
position: absolute;
right: 155px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
flex: 0;
border: 0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.cludo-ai-mode-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-weight: 500 !important;
color: #306 !important;
border-color: #306 !important;
}Data processing
AI Mode offers EU or US data processing options, so you can choose the region that fits your compliance requirements. Contact your Customer Success Manager or Cludo support to discuss the right option for your engine.