Onsite recommendations let you display product blocks on your website using embed scripts. The HTML template and recommendation logic live in the platform, and JavaScript on your site injects the template and products when the page loads. This means you can change the recommendation, or its template, without making a website code change.
The script on your page needs to include the ID of the recommendation to insert. This is included in the embedding scripts.
Before you start
Things you need to know:
You need your website developers to help you with this.
Types of onsite recommendation
You can embed the following non‑predictive recommendations on your website. First, create each recommendation in the builder to generate its embed script.
Best sellers
Most viewed
Trending
Custom category
Also bought
Bought together
Each of these recommendations is suitable for your homepage or category hub pages.
Example use cases
Homepage:
Trending products | Best selling women's products | Popular products under $50
For a hub page with female-focused products:
Best selling women's snowboards | Trending women's accessories | Women's snowboots under $50
Product page (using also bought):
Customers who bought this also bought
View and edit the embed code
The embed code provided by us is complete. For developers who want to simplify it, the notes provided below should be helpful.
To find your embed code:
Go to Content > Products > Recommendations.
Find the Product recommendation you want to embed, then select the Onsite icon.
The embed code opens in Edit website template side panel.
Use the code
To access the scripts, select Get template scripts. You can then set the number of products to show and copy and paste the script onto your website.
Example:
new dd.ProductRecommendations.SnippetCreator('dd-product-recommendations-container', 'https://dmtrk.net', '4P8Z', '4K', 3).createSnippets();
The targeted HTML element (by ID) is the first variable. In the above example, it's set to the default HTML element provided by our templates: dd-product-recommendations-container.
The platform's site is then set (and shouldn't be changed): https://dmtrk.net.
The following variables - '4P8Z', '4K' - identify the account and then the recommendation to be embedded. The recommendation ID could be set dynamically by your website.
The final variable sets the number of products to show, in this case 3.
Customise the template
The Edit website template side panel contains two areas:
Edit website template, where you design and style your recommendation block.
Template scripts, where you grab the code for your website.
Structure
You don't embed the actual HTML code on your website; this lives in the platform. Instead, you customise the HTML and embed the JavaScript code to inject the HTML. Products are then loaded dynamically into the template based on your recommendation filters.
Default HTML/CSS
The default block uses Bootstrap HTML and CSS. The stylesheets for the layout are included in the JavaScript code. Adjust or replace this as you wish to match your website.
Product fields
You can insert product fields anywhere in your product block template. To add a product field:
Go to the Edit website template side panel.
Select INSERT PRODUCT FIELD.
Select the field you want to add.
Performance and caching
Onsite product recommendations use caching to ensure high performance and prevent your site from slowing down. Rapid changes to templates or rules may take a short time to appear.