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. Change the recommendation type or its template at any time, without touching your website code.
The embedding scripts include the recommendation ID, so no manual configuration is needed.
Before you start
Things you need to know:
Work with your website developers to embed the scripts on your site.
Types of onsite recommendation
The following non-predictive recommendation types are available to embed on your website. Before embedding, create each recommendation in the builder to generate its embed script.
Best sellers
Most viewed
Trending
Custom category
Also bought
Bought together
All of these recommendation types are suitable for homepages and 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 is ready to use as provided. Developers who want to simplify the code can use the notes below as a guide.
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
Select Get template scripts, set the number of products to show, then 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 first variable is the targeted HTML element ID. In this example, it's set to the default element included in the platform's templates: dd-product-recommendations-container.
The platform's site is then set, and shouldn't be changed: https://dmtrk.net.
The variables '4P8Z' and '4K' identify the account and the recommendation to be embedded. Your website can also set the recommendation ID dynamically.
The final variable sets the number of products to show. In this example, that's set to 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 access the code for your website.
Structure
The HTML code lives in the platform, not on your website. Customise the HTML in the platform and embed the JavaScript code to inject it into your site. The platform loads products dynamically into the template based on your recommendation filters.
Default HTML/CSS
The default block uses Bootstrap HTML and CSS. The JavaScript code includes the stylesheets for the layout. Adjust or replace these to match your website.
Product fields
Insert product fields anywhere in your product block template.
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.