Implementing AI Mode

AI Mode enables you to add a conversational experience to your website, without replacing your existing site search. It provides natural-language answers, contextual follow-up capabilities, and citation-backed answers to help users find exactly what they need faster.

Preview

How to implement AI Mode

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
  The default value is ‘en’ for English. You can find the complete list of languages and their ISO code here.

<script>
    window.cludo_aiModeCustomerId = XXXX; // Replace with your Cludo customer ID
    window.cludo_aiModeEngineId = XXXX; // Replace with your Cludo AI Search engine ID
    window.cludo_aiModeLanguage = "XX"; // Replace with your site language
</script>
<script src="https://customer.cludo.com/templates/catalog/ai-mode/dist/cludo-ai-mode.js" type="text/javascript" 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{}

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>

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;
}