Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

Note

The following method addresses implementing recommendations on **Optimizely** sites only.

Prerequisites

  • [Install Optimizely Content Recommendations](🔗) on your site before rendering recommendations.

  • Create at least one [delivery](🔗) in your Optimizely Content Recommendations portal to assign to a Content block.

  • Populate that delivery with a [sections and flows](🔗).

  • [Install tracking via NuGet package](🔗).

The NuGet package adds a new block type model and view for rendering the recommendations.



The Content Recommendations block has the following properties:



  • **Number of recommendations** – How many items to show at a time. You can have as many as you want, but make sure that the design can handle them all.

  • **Delivery Widget** – Select the recommendations group (flow) for this instance of the recommendations. A list of delivery widgets is set up in the dashboard.

  • **Recommendation Template** – Enter a [Mustache](🔗) template that defines the repeating pattern for the markup.

Everything inside the `{{#content}} {{/content}}` mustache markup is repeated for each recommendation item. You can include additional markup.

Note

The recommendation template is rendered in the front-end and has no access to the back-end Optimizely Content Management System (CMS) APIs or content object data. It only knows the JSON that is being returned from the recommendation server.

You can set up custom metadata for tracking earlier in the template. For example, if you need to display specific category and description content, set it to track in custom tags, and then render those values in the template.

To use the custom metadata, use the mustache syntax to traverse the JSON nested property values. For example:



If you put your markup inside of the nested structure, (if nothing is passed), then the markup will not be rendered. For example, if no description is passed in the response, then the `<p>` tags in the following code will not be rendered either.

## Customize the Content Recommendations block
You can embed CSS styles in within Content Recommendations block to modify its appearance when the content block renders.
The following example shows full delivery widget code and CSS to make recommendations responsive which you can embed directly in code.

The following image shows the recommendation block after rendering: