Configure Recommendations Web for Modals

You can show recommendations on a modal without impacting recommendations on the main page of your site.

About this task

Sites can have hidden parts of a webpage that appear when a user takes a certain action, like adding a product to a cart. This action appears to open a modal window showing the cart items, but it actually just shows that display. In these cases, you might want recommendations on those modals that do not conflict with the other recommendations on the background page. To make the recommendations display on those modals when they are unhidden, the page must call the render or changeIdentifier function call.

Bronto supports the ability to pass a term (prefix) into those calls that is used when searching for div tags to populate with recommendations. This allows sites to differentiate the recommendations on the main page from the recommendations on the modal.

New calls would look like this:

  • bronto('webRecs:changeIdentifier', 'cart-');
  • bronto("webRecs:render", "cart-");

You can use the following steps as a guideline for using recommendations web in a modal.


  1. On your hidden page, use the standard div tags for Recommendations Web but apply a prefix. For example, id="cart-bronto-rec3".
  2. Build an identifier that is specific to the cart modal with the recommendation you want to use on that modal. You need to use an Identifier Contains value. For example, cart-modal.
  3. Before displaying the modal on the webpage, use the page identifier function to set the page identifier to cart-modal, then call the changeIdentifier function passing in the prefix "cart-".


This process loads the modal and runs the recommendations for the cart-modal identifier and places results in the div tags starting with cart- and leaves the other recommendations on the page unchanged.