Keep Visitors Engaged with Content Recommendation Experiences

Lytics content recommendations are a powerful tool for personalization. They enable you to engage your visitors with the most relevant content based on their interests. Lytics web personalize Experiences support content recommendations natively, but with API overrides or the Pathfora SDK, you can further customize the look and feel of recommendations in your widget.

In this guide, you will build a recommendation modal to reel users back in when they are thinking about leaving your website. You'll learn how to customize such a widget with custom CSS and additional display fields such as the name of the author and the publication date.

You can download the complete JavaScript configuration, CSS, and API override command for this example from the GitHub examples repository.

JavaScript Configuration

Start with a basic message modal configuration. The goal of this Experience is to entice users to stay on your website, so you may want to use the showOnExitIntent display condition to only show the modal when the user is about to leave the page.

  var contentRecWidget = window.pathfora.Message({
    id: "content-rec-widget",
    layout: "modal",
    className: "content-rec-widget",
    headline: "Wait! Before you go...",
    msg: "... We think you may like this. Maybe check it out before you leave.",
    okShow: false,
    cancelShow: false,
    displayConditions: {
      showOnExitIntent: true
    }
  });
  
  window.pathfora.initializeWidgets([contentRecWidget]);

Before you proceed, you will need to create a content collection. See the documentation on content collections to learn how to build a collection and the documentation on using content collections for recommendations for instructions on how to get the ID of the collection, which you will need in the next step. The collection in this example contains blog posts that have been published within the last year.

Now to set up the recommendations in the config. Add the recommend and variant settings to your config. Then add the collection ID and set the visited setting to false. This setting ensures that Lytics recommendations only return content that the user has not already visited.

  var contentRecWidget = window.pathfora.Message({
    // widget configuration
    variant: 3,
    recommend: {
      visited: false,
      collection: "{your_collection_id}"
    }
  });

Now you will have a basic modal with content recommendations displaying on exit intent. Since the example displays blog content, you may also want to show the date that the article was published and the author name. To do so, you can add the display object to your configuration.

  var contentRecWidget = window.pathfora.Message({
    // widget configuration
    variant: 3,
    recommend: {
      visited: false,
      collection: "{your_collection_id}",
      display: {
        date: true,
        author: true
      }
    }
  });

You can even add some additional settings to style the date, and extend the amount of text shown in the article description.

  var contentRecWidget = window.pathfora.Message({
    // widget configuration
    variant: 3,
    recommend: {
      visited: false,
      collection: "{your_collection_id}",
      display: {
        date: true,
        author: true,
        dateOptions: { 
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric"
        },
        descriptionLimit: 220
      }
    }
  });

Check out the Pathfora content recommendations documentation to see the full list of settings you can apply to customize your content recommendation widget.

Styling the Recommendation Modal

In this example, we will make some small adjustments to soften the look of the content recommendations. You can download the styles for this example from GitHub.

When writing your own custom styles, remember that different users will see a different pieces of content based on interests. Be careful when adjusting the size of things like the image in relation to the text. Images from different articles may be of a different size, and text descriptions may vary in length if not controlled by the descriptionLimit setting.

Be sure to test your modal with multiple different content items. You can do this by adding the shuffle setting to your config, which will change the content every time you see the modal. You may also want to ensure that all content in your collection has similar image sizes if you do want to adjust its styles in the modal.

Define the Lytics Audience

The example widget in this guide will be targeted at users in the Likely to Reengage characteristic. Remember to update your config with the audience slug you wish to serve the widget to.

Alternatively, you may build your widget as a web personalize Experience in the Lytics UI with the Recommend Content tactic and apply the recommend.display setting with an API override. See the Github Repository for the exact override command.