HTML Integration: Core Integration (Legacy)
NOTE This section refers to a legacy feature which is only available to existing customers. New and existing customers looking to add personalization should refer to Core JSON Integration.
HTML integration returns content as formatted HTML, which you display on your webpages. For every page on your site that you want to integrate, identify the RR page type and include the JavaScript code on your webpage.
Required page types (every site must integrate these pages)
- Item Page: A page that shows detailed product information for a single product.
- Purchase Complete Page: The page displayed to shoppers immediately after they successfully purchase their items.
Common page types (most sites integrate these pages)
- Home page: A generic page that does not have a specific product or product category associated to it.
- Search page: Displays the results of a keyword search performed by the shopper.
- Category page: Displays a group of related products or a group of sub-categories that help the customer navigate deeper into the site. You may call it a department page, genre page, vertical page, etc., depending on your nomenclature.
- Brand page: Features a specific brand.
- Add to Cart page: The page (or modal or interstitial) that is displayed just after shoppers add products to their carts.
- Cart page: Displays the entire contents of a shopper’s cart.
- Error page: Displays a system or page error.
Special page types
- My Page: A page on your site that is about an individual shopper.
- Generic page: If you have a page that doesn’t fit any of the other page types, you might consider using the generic page.
- Add to Registry page: The page that displays right after a shopper has added an item to a registry or wish list.
Integration code basics
In each example, you’ll see a primary code block, a placement-marker code block, and a flush code block.
- The Primary code block sets the page context and must have some values set dynamically. Include the Primary code block just below the tag.
- The Placement-marker code block identifies the location(s) in the DOM for recommendation placements to appear. Each placeholder (r3_placement function) creates a DIV that is targeted for injection when the RichRelevance server returns recommendations. These placeholders must be included in visible areas of your page.
- The Flush code block signals to RichRelevance that all logic is in place and processing can begin. For optimal performance, include this as close to the last placement marker as possible.