1

Edit the Horizon JavaScript

Place these scripts on every page on your site on which you would like Concierge to appear. Important: Concierge uses jQuery. If you’re not already using it, add this line beforehand:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Observe the Sailthru.setup code added to your site during Personalization Engine setup in Step 1:

Sailthru.setup({
    domain: 'horizon.example.com' 
});

In the above state, Concierge is disabled by default. To activate Concierge, add the concierge parameter with a true value, or use the value field to customize Concierge’s behavior:

Sailthru.setup({
    domain: 'horizon.example.com',concierge: { from: 'top', threshold: 400 }
});

Parameter	Description	Example
from	Recommended box to display from; top by default; if set as bottom, recommendation box will be displayed only when page is scrolled to bottom of the window	top or bottom
threshold	A lower threshold value means the box will display within shorter page / mouse scroll and vice-versa. You can also pass a jQuery page object instead.	500, 200, $('#comments'), $('div.bottom-share')
delay	By what time to delay concierge recommendation box in milliseconds; not delayed by default	500
offsetBottom	Higher the value, recommendation box will offset the window bottom	20
cssPath	Custom CSS path to decorate recommendation box; By default: https://ak.sail-horizon.com/horizon/recommendation.css	https://cdn.example.com/custom_horizon.css
filter	To only return content tagged a certain way, pass meta tags.	{ tags: 'sports' }

You can adjust the threshold that causes the Concierge to appear by adjusting the threshold parameter. If you pass a jQuery wrapper around a page element, the Concierge will appear when the user scrolls to that element.

Here’s the generated HTML that you’re styling:

<div class="recommendation sailthruRecommendation" style="bottom: 0px; z-index: 10000; right: 0px; display: block;">
  <div id="sailthru-concierge"> <a class="closeRecommendation imgReplace" href="javascript:void(0);"> <span>Close</span> </a> </div>
  <div style="display: none;" class="openWrapper"> 
     <a class="openRecommendation imgReplace" href="javascript:void(0);">
       <span>Open</span> 
     </a> 
  </div>
  <div class="recommendationWrapper">
    <div class="recommendationThumb">
       <img alt="" src="http://example.com/thumbnail.jpg" /> 
    </div>
    <div> 
      <span class="recommendationCategory row">Recommended For You</span> 
      <span class="recommendationTitle row">
        <a href="http://example.com">Example Title</a> 
      </span>
      <a href="http://example.com" style="display: none;" class="recommendationLink">Read More &gt;</a> 
   </div>
  </div>
  <div class="recommendationFooter">
     <a href="https://www.sailthru.com/">Powered by Sailthru</a> 
  </div>
</div>

Click the link below to view the default style sheet: https://ak.sail-horizon.com/horizon/recommendation.css

1. Create a custom CSS style sheet hosted on your site, and modify the CSS provided at the above link.

2. In the Concierge script that you drop on your website, add the cssPath parameter and point it to the URL of your new custom style sheet.

Note: The aspect ratio of the thumbnail image that appears with each item (.recommendationThumb) is not styled by default. In your own CSS file or in the custom Concierge CSS file that you provide, we suggest something like the code below:

.recommendationThumb img {
display: block;
max-width:75px;
max-height:75px;
width: auto;
height: auto;
}

3

Check Settings

In the Concierge Settings page, you can adjust your settings including:

• Change the text in the ‘Header Message’ field. The default is ‘Recommended for You.’
• If you have a separate live environment that you use for testing, make sure to click the Enable Developer Mode checkbox for testing.
• You can adjust the default greeting text of the slider in the Header Message setting.
• You can also adjust the Recommendation Preferences here.

That’s It!