Cludo Experience Builder
Cludo’s Experience Builder is a user-friendly tool that enables you to tailor your website’s search and interaction capabilities. The feature simplifies the process of modifying and implementing new search features without needing extensive technical capabilities or support.
Designed for full control, the Experience Builder includes real-time previews for immediate feedback on changes, making it easy to launch new functionalities quickly. This tool reduces the time from concept to implementation, enabling rapid updates and iterations.
Manageable through the MyCludo platform, users only need to add a small JavaScript snippet to their site initially. After setup, all edits and updates are done directly via MyCludo without further site changes.
This guide serves as an introductory walk-through for setting up and maintaining Experiences.
Creating a new Experience
- Select the engine you would like to configure an Experience for. This is important, as Experiences are engine-specific and not code-specific.
- To access the Experience Builder, go to MyCludo and find Experience Builder from the sidebar. You will now see My experiences, an overview of the Experiences you’ve configured (if any).
- To create a new Experience, click on the purple Create new experience button. You will be prompted to choose one type of Experience.
- Select the type of Experience that you would like to set up.
- This is where the fun begins! Start configuring your Experience following the instructions on the page. Use the arrow to the bottom right to proceed with your setup, and use the arrow to the bottom left if you need to go back one step.
- Once you’ve gone through all of the steps, you’ll be taken to a summary of the Experience you’ve set up. Review this before continuing to the final step of implementing the Experience.
- For the implementation, you’ll want to decide on the appearance options presented to you. Then, follow the instructions to embed the Assistant on your site.
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. 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.
When setting up a new experience for a website using the Experience Builder, understanding the distinction between “Publish” and “Visible” is crucial for effectively managing how and when content appears to visitors.
- Publish: This action pushes the latest configuration or changes of an experience to the website when it’s ready. Publishing affects the backend readiness of the experience but does not necessarily make it viewable to website visitors.
- Visible: This setting controls whether the published experience is displayed to the site’s visitors. Making an experience visible means it’s live on the website and can be interacted with by users.
This offers more flexibility for managing the experience:
- It allows for implementing changes on the backend without immediately making them visible to visitors.
- It offers you the ability to prepare certain versions of your search experience and the option to toggle the visibility of specific content based on predetermined times or events.
- You also have the option to conduct A/B testing of different experiences to determine which version performs better.
Practical tips for managing Experiences
- It is advisable to regularly review experiences to ensure they align with current website strategy and visitor needs.
- Utilizing the draft mode to test significant changes before committing to a publication is recommended.
- The impact of visibility settings should be considered in relation to special events, promotions, or testing phases.
By effectively using the publish and visibility settings, administrators can enhance how they deploy and manage user experiences, ensuring they are timely and effective. This strategic control allows for more dynamic interactions with visitors, leading to improved user engagement and satisfaction.
Navigating Experience statuses:
- Draft: Versions not ready to be published. Drafts cannot be made visible as they are still under development.
- Published: Indicates that an experience is complete and ready to be made visible. Once published, it can be turned on for visitors anytime.
- Unpublished Changes: Changes made after publishing that are not yet live. These changes will not affect the current visible version until published.
Implementing an Experience
Copy and paste the following script before the closing </body> tag of each page on your site. This script will take care of populating all active experiences on your site.
Important: Be sure to replace CUSTOMER_ID in the snippet with your unique customer ID. This can be found in MyCludo on the installation page.
<script data-cid="CUSTOMER_ID" src="https://customer.cludo.com/scripts/bundles/experiences/manager.js" id="cludo-experience-manager" defer></script>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/scripts/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
Below, you’ll find these specific variables and rules for each Experience to help you override any styles. 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
See CSS comments for clarification on each element.
/* 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 {}