How to use the Experience Builder

Cludo’s Experience Builder is a user-friendly tool that enables you to tailor your website’s search and interaction capabilities. This guide serves as an introductory walk-through for setting up an Experience.

Step 1: Accessing the Experience Builder

To start, log into your MyCludo account and navigate to the sidebar. Click on the ‘Experience Builder’. Here, you’ll find an overview of ‘My Experiences,’ which showcases all your created and ongoing search Experiences.

Step 2: Creating a New Experience

To create a new Experience, click on the purple ‘Create new experience’ button. You will be prompted to choose one of the types of search Experience you want to set up. Each Experience is listed within the following sections.

Discovery: Designed for visitors exploring content without a specific result in mind.
Search: Tailored for visitors who know exactly what they’re looking for.
Suggestion module: Display links for content that is popular or trending on your site.

Note that we continue to build more Experiences and that the Experience you seek is yet to be developed.

Step 3: Selecting the Type of Experience

Choose the type of Experience that best suits your site’s needs. Each type is a variation of the selected Experience.

*Example of selecting the type of Experience when selecting the Cludo Assistant*

Step 4: Customizing the Experience

Customize the look and functionality of your Experience. The general options include:

General style: Adjust the color scheme, upload icons, and set the window layout.
Search bar: Customize the text, suggestions, and voice search options.
Pre-Search: Define the initial user experience by configuring suggestions that display before a search begins.
Autocomplete: Enhance the user’s typing experience with real-time, dynamic suggestions as they enter their query.
Search Results: Dictate how the search outcomes are displayed and organized, ensuring a user-friendly results presentation.
Suggestion Modules: Offer additional content suggestions.

Note that different experiences come with various options that you’ll need to configure.

Step 5: Reviewing Configuration

Before implementing your new Assistant, review all settings and customizations. Ensure that all elements, such as the main button style, search bar options, and other configurations, align with your preferences.

Step 6: Implementation

Finally, decide on the appearance settings, such as whether your Assistant should be visible on all pages or only specific ones. Then, follow the instructions to embed the Assistant on your site.

Copy and paste the following before the closing </body> tag of each page on your site.

<script data-cid="CUSTOMER_ID" src="https://customer.cludo.com/script/bundles/experiences/manager.js" id="cludo-experience-manager" defer></script>

Note: Be sure to replace CUSTOMER_ID in the snippet with your unique customer ID. This can be found in MyCludo on the installation page.

Step 7: Managing Experiences

Once published, you can manage your experiences through the ‘My experiences’ section. Edit, delete, or update your assistants as needed to keep up with your site’s evolving requirements.

Step 8: Publishing Changes

Any changes you make can be saved as a draft or published directly. The platform offers real-time previews and streamlined updates, so your changes go live the moment you’re ready.Open Screenshot 2024-04-26 at 16.44.38.png

By following these steps, you can fully harness the power of Cludo’s Experience Builder to enhance your site’s search functionality. Remember, a well-crafted search experience can significantly impact user satisfaction and engagement.

Setting the script scope to a specific engine or Experience ID

By default, the Experience Manager loads all Experiences saved in your MyCludo account. You can narrow this scope to only load Experiences saved for a specific engine or even load just one specific Experience by adding the attribute data-eid with an engine ID or the attribute data-xid with an Experience ID to the script snippet. This can be useful if you have many engines managed by different stakeholders, and you want to ensure that only Experiences created for a specific engine or specific area within your website are loaded.

<script data-cid="CUSTOMER_ID" data-eid="ENGINE_ID" src="https://customer.cludo.com/script/bundles/experiences/manager.js" id="cludo-experience-manager" defer></script> <script data-cid="CUSTOMER_ID" data-xid="EXPERIENCE_ID" src="https://customer.cludo.com/script/bundles/experiences/manager.js" id="cludo-experience-manager" defer></script>

How to customize Experience styles with CSS

Experience components follow a common CSS pattern to make overriding their styles as easy as possible. Generally, Experiences contain two collections of styles that you can change:

A set of CSS variables that define common colors used in the inner components of the Experience
CSS rules written with the Block-Element-Modifier (BEM) pattern for styling specific elements within the Experience

This article documents these specific variables and rules for each Experience to help you write your own overrides. It can also be helpful to utilize your browser’s developer tools to inspect elements within an Experience and get a visual of how styles are being applied.

Assistant styles

Color CSS variables

--assistant-main-button-background-color: #5b5b5b;
--assistant-main-button-text-color: white;
--assistant-main-button-outline-color: #5b5b5b;
--assistant-top-bar-background-color: #5b5b5b;
--assistant-top-bar-text-color: white;
--assistant-window-background-color: white;
--assistant-default-tab-background-color: #5b5b5b;
--assistant-default-tab-text-color: white;
--assistant-active-tab-background-color: #5c5c5d;
--assistant-active-tab-text-color: white;
--assistant-categories-default-label-color: #5b5b5b;
--assistant-categories-active-label-color: #5b5b5b;
--assistant-search-results-title-color: #5b5b5b;
--assistant-search-results-description-color: #5b5b5b;
--assistant-search-results-path-color: #5b5b5b;
--assistant-search-results-wch-color: yellow;
--assistant-autocomplete-default-background-color: white;
--assistant-autocomplete-default-foreground-color: #5b5b5b;
--assistant-autocomplete-active-background-color: #5b5b5b;
--assistant-autocomplete-active-foreground-color: white;
--assistant-pre-search-recent-searches-text-color: #5b5b5b;
--assistant-pre-search-suggestions-text-color: #5b5b5b;
--assistant-qa-question-background-color: #5b5b5b;
--assistant-qa-answer-background-color: #999999;
--assistant-qa-chat-text-color: #181818;
--assistant-qa-feedback-follow-up-question-background-color: #5b5b5b;
--assistant-qa-feedback-follow-up-question-text-color: white;
--assistant-qa-feedback-positive-color: #176914;
--assistant-qa-feedback-negative-color: #a00b0b;
--assistant-qa-feedback-text-color: #5b5b5b;
--assistant-suggested-pages-shortcuts-text-color: #5b5b5b;
--assistant-suggested-pages-shortcuts-background-color: #5b5b5b;
--assistant-suggested-pages-popular-pages-header-color: #333333;
--assistant-suggested-pages-popular-pages-title-color: #333333;
--assistant-suggested-pages-popular-pages-url-color: #333333;
--assistant-suggested-pages-trending-pages-header-color: #5b5b5b;
--assistant-suggested-pages-trending-pages-title-color: #5b5b5b;
--assistant-suggested-pages-trending-pages-url-color: #5b5b5b;
--assistant-search-input-background-color: white;
--assistant-search-input-text-color: #5b5b5b;
--assistant-search-input-outline-color: transparent;
--assistant-search-input-button-background-color: transparent;
--assistant-search-input-button-foreground-color: #5b5b5b;
--assistant-search-input-button-outline-color: #5b5b5b;
--assistant-qa-input-background-color: white;
--assistant-qa-input-text-color: #5b5b5b;
--assistant-qa-input-outline-color: #d4d4d4;
--assistant-qa-input-button-background-color: transparent;
--assistant-qa-input-button-foreground-color: #5b5b5b;
--assistant-qa-input-button-outline-color: #d4d4d4;

Style rules

/* Parent elements for styling and positioning Assistant button and container */
.cludo-button {}

.cludo-assistant {}

.cludo-assistant-container {}

/* Search region */
.cludo-assistant-search-region {}

.cludo-assistant-search-region__results {}

/* Search form */
.cludo-search-form {}

.cludo-search-form__search-button {}

.cludo-search-form__voice-search-button {}

/* Suggested pages region */
.assistant-suggested-pages-region {}

.assistant-suggested-pages-region__expanding-shortcut-wrapper {}

/* Chat region */
.assistant-chat {}

.assistant-chat__close-button {}

.assistant-chat__chat-area {}

.assistant-chat__chat-form {}

.assistant-chat__-feedback-wrapper {}

/* Tab region */
.cludo-tab-bar__tab {}

.cludo-tab-bar__tab-list {}

.cludo-tab-bar__content {}

.cludo-tab-bar__content-container {}

What are you looking for?

Explore topics

Step 1: Accessing the Experience Builder

Step 2: Creating a New Experience

Step 3: Selecting the Type of Experience

Step 4: Customizing the Experience

Step 5: Reviewing Configuration

Step 6: Implementation

Step 7: Managing Experiences

Step 8: Publishing Changes

Setting the script scope to a specific engine or Experience ID

How to customize Experience styles with CSS

Assistant styles

Color CSS variables

Style rules

What are you looking for?

Explore topics

How to use the Experience Builder

Step 1: Accessing the Experience Builder

Step 2: Creating a New Experience

Step 3: Selecting the Type of Experience

Step 4: Customizing the Experience

Step 5: Reviewing Configuration

Step 6: Implementation

Step 7: Managing Experiences

Step 8: Publishing Changes

Setting the script scope to a specific engine or Experience ID

How to customize Experience styles with CSS

Assistant styles

Color CSS variables

Style rules

Related Posts