Concierge Onsite Slider

Concierge is a Personalization Engine-powered onsite recommendation tool, allowing a small “slider” to appear in a user’s browser window at the end of an article. The slider will suggest another story based on a user’s interest.

Note: This feature requires the legacy Horizon JavaScript on your site. For an easier way to implement this functionality using Sailthru’s latest JavaScript tag and a user-friendly web interface, please discuss Site Personalization Manager (SPM) with your Customer Success representative.

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 }
});

Concierge supports HTTPS. Just drop the scripts on your website as you normally would!  Use the properties below to customize your site’s Concierge experience.

Concierge Parameters

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 http://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.

2

Customize

You can use CSS styles on your page to change the look and feel of your Concierge, using various class hooks.

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="http://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.

By default, Scout and Concierge display up to 250 items from the past 72 hours (i.e. 3 days). You can increase the time range to a maximum of 720 hours (i.e. 30 days) by following these steps:

    1. Go to the Concierge Preferences page
    2. Edit the Field near Hours Back

That’s It!

Enjoy and feel free to check in with Support if you’re having any difficulties setting up Concierge.
Top