How to implement Cludo using a search template

Cludo offers two global templates that can easily be implemented by copying and pasting code snippets onto the website. This solution is a safe and easy way to implement Cludo out-of-the-box. Alternatively, more custom templates can be created, which will require a more custom code implementation. If you are having a custom solution done by Cludo, you will receive custom documentation for this, as it won’t be found in MyCludo.

Currently, two global templates are supported:

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

Both templates come with default styling, but you can always add additional customizations through your own stylesheet.

How to implement the inline template

1. In the navigation, select Configuration › Search template.
2. Select the engine to install the template for in the list.
3. Select the Inline option.
4. Click the Next button.
5. Choose if the search results should also show categories and images.
6. Click the Next button.
7. Enter the URL of the search result page in the Results page URL field.
8. Click the Next button.
9. Implement the listed code snippets from the page:
   1. Add the search form where it should appear.
   2. Add the default stylesheet to the header.
   3. Add the script just before the closing body tag (</body>) on all pages.
   4. Add the search results snippet on the search results page.
10. You have now successfully implemented the overlay template!

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!