Search Templates

31 Jan, 2023 Configuration, Implementation

What are Search Templates?

Cludo offers two global templates that can easily be implemented onto the website. Currently, two global templates are supported:

  • Overlay: Displays the results in an overlay that will appear on any page upon searching.
  • Rich Inline: Displays the results on a dedicated search result page that the user is directed to upon searching.

Note that the Legacy Inline template, which used to be accessed via MyCludo, has been deprecated in favor of the new and upgraded Rich Inline Template, which provides more implementation options. You may still find the documentation for Legacy Inline Templates here.

Typically, a search template is split into two components:

  1. An element for initiating a search, such as a search input or a link to the search.
  2. An element for displaying the results. Also commonly referred to as a SERP (Search Engine Result Page). This result page may also utilize different facets of filters and show categories for further filtering of the search results.

The templates come with a limited set of options, with the Rich Inline Template having a little more to offer than Overlay.

If you find that the pre-built templates do not match your needs, you may look towards other options:

  • Custom templates can be developed, tailored to your requirements. Contact your CSM for more information on this.
  • For more advanced solutions with full self-control, visit Cludo Developer Experience to see documentation for our API and React component offerings.

How to implement Cludo using a Search Template

This solution is a safe and easy way to implement Cludo out-of-the-box. Both templates come with default styling, but you can always add additional customizations through your own stylesheet.

How to implement the Overlay Template

  1. In the navigation, select Configuration › Search template.
  2. Select the engine to install the template for in the list.
  3. Select the Overlay option.
  4. Click the Next button.
  5. Choose if the search bar is already implemented or if you want to inject a new search bar in the left or right corner of the page.
  6. Click the Next button.
  7. Implement the listed code snippets from the page:
    1. Add the link tag to the header of all the web pages to correctly style the template.
    2. Add the script just before the closing body tag (</body>) on all pages.
  8. You have now successfully implemented the overlay template!
An example of code snippets for an overlay template.

How to implement the Rich Inline Template

Instructions on how to implement Rich Inline Template are documented here with everything you need to know about implementation, customization, and styling.

How to style Search templates

Once a search template is implemented correctly, CSS can be used to further style the template to match the visuals of the rest of the website.
When using the global search templates like Overlay or Inline, the following CSS selectors can be used modify certain elements.

Overlay

Edit banner colors

To customize the banner colors on your search results page, add the following to the cludoSettings object in your script:

themeBannerColor: {textColor: '#HEX', backgroundColor: '#HEX'},

Replace ‘#HEX’ with the desired color codes for the text and background.

Rich Inline

Find a comprehensive list on how to customize elements in the dedicated Rich Inline Template documentation.

Legacy Inline

The Legacy Inline Template has been deprecated. Documentation can still be found here.

Related Posts