404 module

What is Intelligent 404?

Intelligent 404 is a feature offered by Cludo that helps website visitors find relevant content when they encounter a 404 page.

Visitors often encounter 404 error pages while browsing, and we know that many 404 links also reside externally, making it hard to completely prevent. When a visitor hits a 404 page, it marks the end of their journey and can result in a dissatisfactory user experience. The Intelligent 404 module is here to fix that!

The module

Unlike generic 404 pages that offer little assistance, the Intelligent 404 module leverages the Cludo search engine to create smart pathways to relevant pages. When the visitor hits a 404 page, the module will be triggered and provide a list of suggested pages based on the current URL, simply using the URL as a search term to look for similar content.

Analytics

When the Intelligent 404 module is implemented, analytics for interactions with this will appear in MyCludo. This helps you get an overview of what 404 pages your visitors have landed on – and where they ended up going if they interacted with the suggestions provided by the module. You can use this information to:

• Find out which pages you should create redirects for
• Find the source of the 404 page, allowing you to fix the link*

*this only applies to internal links, as Cludo isn’t tracking activity outside of the website.

How to set up intelligent 404

1. In the navigation, select Configuration › 404 module
2. Select the desired engine from the engine drop-down
3. Optional: Under Advanced:
   • Fill out the Suggestions title field
   • Fill out the Suggestions description field
   • Fill out the Use query parameter field
4. Copy the Javascript snippet from the Script field
5. Insert the Javascript snippet on your 404 pages where you would like the suggested pages to appear

How to style the Intelligent 404 module

Once Intelligent 404 is implemented on a website, it is possible to use the following CSS selectors to style how elements should appear on the website.

Results title

#cludo-404.override h3 {
  /* Insert styling */
}

Results list

#cludo-404.override ul {
  /* Insert styling */
}

Results list items

#cludo-404.override ul li {
  /* Insert styling */
}

Results list items title

#cludo-404.override ul li h4 {
  /* Insert styling */
}

Results list items links

#cludo-404.override ul li a  {
  /* Insert styling */
}

Loader animation

#cludo-404.override h3 {
  /* Insert styling */
  /* Use border-color to change the animation color*/
  border-color: rgb(183, 63, 160);
}