Use Div Tags To Place Recommendations Within A Page

You need to place bronto-rec div tags on your website pages so Bronto knows where on a page to place each recommendation block.

When an identifier is matched to a page on your site, Recommendations Web will look for a set of div tags that have an id that matches bronto-recX. This is where the app places the recommendation results. X is a variable that should be replaced by a number. For example bronto-rec1, bronto-rec2, etc. When you have multiple recommendations for an identifier, we'll use the recommendation ranking and the number provided in the div id to place recommendations into code blocks.

For example, you have an identifier with three recommendations. The div with id="bronto-rec1" will be populated with products from the first recommendation and the div with id="bronto-rec2" will be populated with products from the second recommendation. If you do not have a div with id="bronto-rec3" then the third recommendation won't be used.

In addition to having the proper bronto-rec id, you will need to style your div tag so it is displayed in the location on the page you want it to appear. You should also include header text if you want it to be displayed. All styling of the recommendation block itself is done within the Recommendations Web app.

We've provided some code examples you can use as a baseline.

<div id="bronto-rec1" style="margin-left: auto; margin-right: auto; display: none;">
We Thought You Might Like
</div>

<div id="bronto-rec2" style="margin-left: auto; margin-right: auto; display: none;">
People Who Bought This Also Bought
</div>

<div id="bronto-rec1" style="margin-left: 0; margin-right: auto; display: none;">
We Thought You Might Like
</div>

<div id="bronto-rec1" style="margin-left: auto; margin-right: 0; display: none;">
We Thought You Might Like
</div>