Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Deploy widget manually

Manually deploy recommendation widgets by placing Mustache templates in your HTML for customized content presentation.

Deploying a widget manually involves placing a Mustache template in your HTML where you want recommendations to appear. The ip.js script will find this template, fetch the corresponding recommendations, and render the HTML.

Implementation

Place the following <script> block where you want the recommendations to display:

  • Replace YOUR_DELIVERY_KEY with the key generated when you created the delivery.
  • The HTML inside the script tag is a Mustache template that defines the structure for each recommended item. You can customize it to match your site's design.
<script class="idio-recommendations"
        type="text/x-mustache"
        data-api-key="YOUR_DELIVERY_KEY"
        data-rpp="3">
    <div class="recommendation-container">
        {{#content}}
            <div class="recommendation-item">
                <a href="{{link_url}}">
                    {{#main_image_url}}<img src="{{main_image_url}}" alt="{{title}}">{{/main_image_url}}
                    <p>{{title}}</p>
                </a>
            </div>
        {{/content}}
    </div>
</script>

The data-api-key attribute links the on-page template to your server-side Delivery Configuration. The data-rpp="3" attribute overrides the server-side setting and requests exactly three recommendations. See Widget SDK reference for more available attributes.