Vibe provides an easy way to integrate your shoppable content Galleries on standard storefront pages such as the Homepage, PDP, Category page, and custom Gallery pages.

This article will walk you through three steps to integrate your Galleries:

1. Install the Vibe script tag.

2. Insert HTML on the pages where you want to display your Galleries.

3. Setup eCommerce tracking events to enable better recommendations in Showroom and Like2Buy and enable insights within Vibe.

Install Vibe script tag

To integrate Vibe so that your experiences work across your site, we recommend you install the Vibe script tag on all pages by placing it in the <head> of your site layout.

The Vibe script tag will not change the look or feel of your website. It will asynchronously load additional javascript as needed so that it doesn't impact the initial page load time of your site .

Copy the snippet below and replace YOUR_SITENAME with your Vibe site name. You can find your site name in Vibe by selecting Embed in the upper-right corner of your Galleries Dashboard.

<script>
  var CRL8_SITENAME = 'YOUR_SITENAME';
  !function(){
    var e=window.crl8=window.crl8||{
    },n=!1,i=[];
    e.ready=function(e){
      n?e():i.push(e)}
      ,e.pixel=e.pixel||function(){
        e.pixel.q.push(arguments)}
        ,e.pixel.q=e.pixel.q||[];
    var t=window.document,o=t.createElement("script"),c=e.debug||-1!==t.location.search.indexOf("crl8-debug=true")?"js":"min.js";
    o.async=!0,o.src=t.location.protocol+"//edge.curalate.com/sites/"+CRL8_SITENAME+"/site/latest/site."+c,o.onload=function(){n=!0,i.forEach(function(e){e()})};var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r.nextSibling)}();
</script>

For example, if your site name is Habiliment-RUQGBj then you would use the following CRL8_SITENAME. Make sure you enclose the site name  with quotes:

<script>
  var CRL8_SITENAME = 'Habiliment-RUQGBj';
  !function(){
    var e=window.crl8=window.crl8||{
    },n=!1,i=[];
    e.ready=function(e){
      n?e():i.push(e)}
      ,e.pixel=e.pixel||function(){
        e.pixel.q.push(arguments)}
        ,e.pixel.q=e.pixel.q||[];
    var t=window.document,o=t.createElement("script"),c=e.debug||-1!==t.location.search.indexOf("crl8-debug=true")?"js":"min.js";
    o.async=!0,o.src=t.location.protocol+"//edge.curalate.com/sites/"+CRL8_SITENAME+"/site/latest/site."+c,o.onload=function(){n=!0,i.forEach(function(e){e()})};var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r.nextSibling)}();
</script>

Insert HTML on Galleries Pages

For each experience you want to activate (Homepage, Category, PDP, Gallery page), you need to place an HTML tag on the corresponding page. Place these tags in the layout where you want the experience to appear. The code you need to copy into your site for each of the different experiences is in the sections below. Add any additional HTML elements like a header above or below your Gallery.

Each experience needs to be configured in Vibe or by your Solutions representative. If you insert the HTML and do not see the experience load, it's likely that either:

1. The Vibe script tag is missing.

2. The specific experience (Homepage, Category, PDP, Gallery) was not set up within Vibe.

If your website is running on a single-page application or if you need more control over setting up your Galleries, refer to our advanced integration guide.

Homepage

To set up the homepage experience, place the following code on your homepage layout:

<div data-crl8-container-id="homepage">
</div>

Product Detail Page (PDP)

To set up the product page experience, copy the following code to your PDP page layout and replace PRODUCT_ID with the product identifier from the PDP context.

<div data-crl8-container-id="product" data-crl8-filter="productId:'PRODUCT_ID'">
</div>

The product identifier can be any identifier from your product catalog. If your PDPs group several variants, the product identifier would ideally match the product group that the PDP represents instead of individual SKUs. 

Category

To setup the category experience, copy the following code to your category page layout and replace PARENT_CATEGORY > CATEGORY with a value corresponding to the category page. Enclose the category value with single quotes.

<div data-crl8-container-id= "category" data-crl8-filter="category:'PARENT_CATEGORY >
CATEGORY'">
</div>

Other Galleries

To setup the gallery experience, place the following code in your custom gallery page layout:

<div data-crl8-container-id="YOUR_GALLERY_ID">
</div>

Advanced Filtering

You can filter the contents of any given Fanreel to better suit the needs of a  site page by filtering content based on category, label, locale, or other factors. To do this,  insert certain parameters in the JS Initialization.

Labels

During moderation, you can tag any Vibe content with your own labels to segment content for different pages or for a specific campaign.

The snippet below will only show user-generated content that is tagged with “homepage”. This can be used to  allow you to curate the content that your clients will see on your homepage.

<div data-crl8-container-id="homepage" data-crl8-filter="label:homepage">
</div>

General Snippet:

<div data-crl8-container-id="homepage" data-crl8-filter="label:PUT_LABEL_HERE">
</div>

Hashtags

You can use hashtags in the UGC description to filter the content you want in a specific Fanreel.

The snippet below will only show UGC that is tagged with “#shoestyle”. This can be used to  allow you to curate the content that your clients will see on your Fanreel.

<div data-crl8-container-id="campaign" data-crl8-filter="tag:shoestyle">
</div>

General Snippet

<div data-crl8-container-id="campaign" data-crl8-filter="tag:PUT_TAG_HERE">
</div>

Locale

The product information displayed in the Fanreel can be adjusted by location.

• These values (international links, foreign currencies, etc.) will be pulled from information  in your localized product catalog.

• Format locales as xx-XX, where the country code is capitalized. For example, en_US.

In the example below, an en-US catalog and de-DE catalog were provided and processed.

This experience will show the German product catalog information:

<div data-crl8-container-id="homepage" data-crl8-locale="de-DE">
</div>

This experience will show the American English product catalog information:

<div data-crl8-container-id="homepage" data-crl8-locale="en-US">
</div>

Supported locales

The following locales and languages are supported in Galleries:

Lazy Loading Galleries

To improve performance, Vibe Galleries can be lazy loaded on your site. Lazy loading reduces Vibe’s impact on your site’s page load time. With lazy loading enabled, Galleries are intelligently loaded only when they are ready to be used (just before entering the viewport).

To use the lazy loading feature, add the data-crl8-lazy-load-experience attribute to the Gallery container on your site.

<div data-crl8-container-id="homepage" data-crl8-lazy-load-experience="true">
</div>

Caution: We don't recommend using lazy loading if the Vibe Gallery is the primary content on the page (ex: full page gallery). Lazy loading is more suitable for Galleries that sit below the fold and don't need to display when the initial page loads.