Concierge Setup

Concierge Setup

The easiest way to set up the Concierge is to use our Concierge Setup Wizard. Alternatively, you can follow the steps below.

Step 1: Horizon

If you haven't already, you must setup Horizonhttp://docs.sailthru.com/horizon/setup, Sailthru's behavioral intelligence tool, on your site. Once you've done so, proceed with the following instructions.

Step 2: Edit the Horizon JavaScript

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 in the Horizon JavaScript added to your site during the Horizon 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 }
            });

Use the properties below to customize your site's concierge experience.

Concierge Parameters

Concierge is a Horizon-powered on-site 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. Learn more about Concierge and its settings.

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 or https://d1gp8joe0evc8s.cloudfront.net/assets/css/horizon/recommendation.css depending on window.location.protocol value	http://cdn.example.com/custom_horizon.css
filter	To only return content tagged a certain way, pass 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. More information on Horizon JavaScript invocation can be found here.

Step 3: 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="sailthruRecommendation" style="bottom: 0px; z-index: 10000; right: 0px; display: block;"><div>
    <a href="javascript:void(0);" class="closeRecommendation imgReplace">
        <span>Close</span>
    </a>
    <div class="openWrapper" style="display: none;">
        <a href="javascript:void(0);" class="openRecommendation imgReplace" style="margin-top: 45.5px;">
            <span>Open</span>
        </a>
    </div>
    <div class="recommendationWrapper">
                <div class="recommendationThumb">
            <a href="http://example.com"><img alt="" src="http://example.com/thumbnail.jpg"></a>
        </div>
                <div class="recommendationDetails">
            <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" class="recommendationLink" style="display: none;">Read More &gt;</a>
        </div>
    </div>
    <div class="recommendationFooter">
        <a href="http://sailthru.com/">Powered by Sailthru</a>
    </div>
</div>

You can also adjust some of the recommendation behavior of your Concierge at the Concierge settings page, available from the Settings tab of your Sailthru account.

That's It!

Enjoy and feel free to check in with support@sailthru.com if you're having any difficulties setting up Concierge.

Be sure to check out Scout, Horizon's on-site, real-time recommendation engine.