Cludo Studio – Design your Rich Inline Template search

11 Jun, 2026 Implementation

Cludo Studio is a hands-on environment for building and previewing search experiences. It lets you spin up a working demo of a search setup quickly, switch between implementation types, and share a link that preserves exactly what you configured.

It can be used as a design tool for the Rich Inline Template. If you don’t have a frontend developer or an agency to write custom CSS, this will let you style your search results page without using code.

Choose your layout, colors, and features, preview them against your own indexed content, and Cludo Studio writes the styling into the code you get from the implementation guide.

Your configuration lives in the URL, so you can hand the link to whoever needs to review the design and they’ll see exactly what you set up.

If you do have a developer who’d rather write the CSS themselves, skip Cludo Studio and choose the Stripped (v1.0) CSS version in the Rich Inline Template Technical Reference instead.

Before you start

You’ll need:

  • Your Customer ID and Engine ID. Both are in MyCludo under Configuration › API. Cludo Studio needs them to show your own content.
  • A crawler and engine that are already indexing. Cludo Studio previews against your real content, so there needs to be something in the index. See the Crawler Setup Guide.
  • Your crawler fields mapped. Categories, images, dates, and badges only appear in the preview if they’ve been set up. See Setting up Crawler Fields for the Rich Inline Template.
  • AI Summary, Feedback, and Intelligent 404 are configured in Experience Builder, not in Cludo Studio. Your engine needs to be AI enabled to preview AI Summary. See Experience Builder.
  • AI Mode is set up separately. See Implementing AI Mode.
  • New to MyCludo? Start with Introduction to MyCludo.

How to access Cludo Studio

You can open Cludo Studio here: https://studio.cludo.com/rich.html

How to use it

What you design here is what ships. Cludo Studio writes your choices straight into your implementation code, so you’re not mocking something up for a developer to rebuild later.

1. Settings

Connect Cludo Studio to your content: Add your customer name, then your Customer ID and Engine ID from MyCludo, under Configuration › API. Set your site language, and choose how AI responses should be handled: match your site language, multilingual, or a language you specify.

2. Features

Turn on what you want in your search experience: AI Summary, AI Mode, Feedback, Voice Search, Search-as-you-type, and Pre-search Suggestions.

Anything marked N/A for Rich Inline isn’t available in this template. Those features are possible with the API, the React Storybook, or a Custom SERP built by Cludo’s Implementation Services. See Choosing the Right Implementation.

Haven’t set up Experience Builder yet? Try default AI Summary, Feedback, and Intelligent 404 with default settings, so you can see them in your design.

That’s for testing only. Before you go live, each one needs configuring in MyCludo › Experience Builder, which is also where you’ll find the code snippet to place and the settings that control where each feature appears. The defaults you tested with don’t carry over.

3. Design

Style the page section by section: General styles, Search Bar / Autocomplete, Layout, Facets, Results, and Navigation / Pagination.

The preview updates as you work, using your own content, so you can see how your titles, categories, images, and badges will really look before anything goes live.

You can leave Banners switched off. Banners are created, styled, and published in MyCludo, which is where you’ll manage them once you’re live.

4. Save your URL

Your design lives in the URL and nowhere else. It updates as you make changes, but nothing is saved to an account, so closing the tab loses everything. Copy or bookmark the link as you go.

5. Implement

Click Get implementation guide at the bottom of the configuration panel. Cludo Studio generates the stylesheet, HTML, and configuration code with your design already applied.

See Rich Inline Template Technical Reference for what to do with it.

Related Posts