👩‍💻Integrate the player

Initial setup

To show the live events on your website you will have to add a customizable code on the page where you want to see the events. Then link the add to cart button to your website.

Set up the tag to display your live events

Let's start with the tag. You can select the attributes in the Customizable Properties listed below to activate different features. You need to replace the store-id's value with the one given to you during the onboarding.

<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"
></script>

<skp-landing 
  store-id="XXXXX"
	display-type= "all"
	transaction-type= "addToCart"
	staging=false
></skp-landing>

<style>
  :root {
    --skp-primary-color: #121212;
  }
</style>

You can insert this code:

In the <head> tag

In the <body> tag

Implement the widget in a Tag Manager

In some cases, you won't be able to integrate the tag above in a Tag Manager. It will raise an error. As a workaround, use this tag:

<!-- Create a container for your widget -->
<div id="container"></div>

<!-- Load the script -->
<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"></script>

<!-- Create the widget programatically -->
<script type="text/javascript">
    // Create the widget
    const widget = document.createElement('skp-landing');
    // Add the attributes
    widget.setAttribute('store-id', 'XXXXX');
    widget.setAttribute('display-type', "all");
    widget.setAttribute('transaction-type', "addToCart");
    widget.setAttribute('staging', false);
    widget.setAttribute('refresh-on-close', false);
    widget.setAttribute('should-display-preview', true);
    // Append it to the container created above
    document.querySelector('#container').appendChild(widget);
</script>

<script type="text/javascript">
    const styles = document.createElement('style');
    styles.type = "text/css";

    styles.innerHTML = `
    :root {
      --skp-primary-color: #000000;
    }
    `;
    document.head.appendChild(styles);
</script>

Here is an example once the tag is integrated

Your live events have 4 different states:

  • Upcoming → The live is planned for an upcoming date. The days remaining will be displayed until 24 hours before the live, then a countdown will appear. Users can also add this event to their calendar or register to be notified by SMS (Option). When the countdown reaches 00:00:00 it will be replaced with the button “Watch the live”.

  • Live → Users can now click “Watch the live” to open the player then browse the products, use the chat, make purchases… The splash screen video will be displayed until your broadcast starts.

  • In review → Your live is over, you submitted it to review. You can now review your video and publish it from the web back office

  • Replay → Your live has been reviewed, it is now available for everyone to watch. The chat is disabled but users can still read the comments made during the live.

Customizable properties

Property

Description

Type

store-id

Use your store id provided by Skeepers

String

display-type

"all": Display all your live shopping event "upcoming": Display upcoming and live events "archived": Display events in replay "one": Display a specific event by adding broadcast-id : [id] under the displayType "pdp": Use it with the product attribute. See our PDP integration "none": Use it with our API integration

String

staging

true: Use it for your testing environment. Display the broadcasts set with staging: true and staging: false false: Use it for your production environment. Display the broadcasts set with staging: false

Boolean

transaction-type

"addToCart": Displays an "Add to cart" button in the player. You will have to set up the add to cart "linkToProductPage": Displays an "Open product page" button. Open the product's page in the same page if you are in the same domain. Open in a new tab if in another domain. "customLinkToProductPage": Listen to our event to custom how you open the link to the product page. See more details

String

keywords

Filter your events by keywords. Add the keywords set during the broadcast's creation / edition on the backoffice. Case sensitive. Ex: keywords="["Beauty","Makeup"]"

[String]

refresh-on-close

true: Refresh the page when closing the player false: Doesn't refresh the page when closing the player

Boolean

product

abcd_123: A Product Id used for your live event. Use it with the display-type: "pdp" attribute. See our PDP integration.

String

should-display-preview

true: Display the preview of your live event directly in your landing page. false: Doesn't display the preview of your live event. Keeps your live shopping image instead.

Boolean

picture-in-picture-mode

"default": Picture In Picture is activated and we can navigate across the whole website with the video. "partial": Picture In Picture is activated on the landing page. The viewer can't navigate elsewhere. "disabled": Picture In Picture is deactivated.

String

close-iframe-on-close-sp

true: Close the iframe when closing the player. Works with picture-in-picture-mode: "default" or picture-in-picture-mode: "partial". false: Stay in the page when closing the player.

Boolean

Add to cart

To enable viewers to do an add-to-cart from a live, you need to set up a small code snippet with your software developer(s).

When using the transaction-type: "addToCart", the player displays an add-to-cart button. You will have to set up your add-to-cart system by listening to the skp:addToCart event emitted by the button once it's clicked.

You can use this event to add your own tracking on each add-to-cart coming from the player. This way you can track add to cart done during a live or a replay all the way to your checkout.

window.addEventListener('skp:addToCart', (event) => {
 	 const { origin, product } = event.detail
    console.log('origin', origin);
    console.log('product', product);

    addProductToCustomerCart(product);  // Replace it with your own add to cart implementation
    
    sendTrackingToYourPlatform(origin, product);  // Replace it with your own tracking solution
})

Product information comes from your product feed. Check the product ID in the product feed, it must be the same one used by your ecommerce platform.

Shopify

	const addToCartHandler = (event) => {
	const { product } = event.detail;
	const form = new FormData();
	form.append('quantity', 1);
	form.append('form_type', 'product');
	form.append('id', product.id);
    
  fetch(window.Shopify.routes.root + 'cart/add', 
		{
			method: 'POST',
			body: form,
			headers: {
				accept: 'application/javascript'
			},
	}).then(response => {
		return response.json();
	}).then(response => {
		// You could integrate your tracking for example
	}).catch((error) => { console.error('Error:', error); });
}

window.addEventListener('skp:addToCart', addToCartHandler);

If you are using Shopify you can also install our Shopify App to easily integrate Live Shopping. More information here

SalesForce Commerce Cloud

const addToCartHandler = (event) => {
	const { product } = event.detail;
	
    const productId = product.parentId || product.id;
    const variantId = product.id;

    const siteName = `Sites-YOUR_SITE`;
    const lang = `YOUR LANG`;
    
    return fetch(`/on/demandware.store/${siteName}/${lang}/Cart-AddProduct`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `pid=${productId}&quantity=1`,
    })
      .then(res => common.formatTrackingProductDatas(data))
      .catch((error) => { console.error('Error:', error); });
  }
  
  window.addEventListener('skp:addToCart', addToCartHandler);

Hybris

const addToCartHandler = (event) => {
    const { product } = event.detail;
	
    const productId = product.parentId || product.id;
    const variantId = product.id;
    
    return fetch('/cart/add', {
      headers: {
        accept: 'text/html, */*; q=0.01',
        'accept-language': 'fr-FR,fr;q=0.9,de;q=0.8,en-US;q=0.7,en;q=0.6',
        'content-type': 'application/x-www-form-urlencoded',
        'x-requested-with': 'XMLHttpRequest',
      },
      body: `productCode=${variantId}&quantity=1`,
      method: 'POST',
      mode: 'cors',
      credentials: 'include',
    })
      .then(() => fetch('/mini-cart/refresh?reloadCart=true', { method: 'GET' }))
      .catch((error) => { console.error('Error:', error); });
};

window.addEventListener('skp:addToCart', addToCartHandler);

Magento

const addToCartHandler = (event) => {
    const { origin, product } = event.detail;

    const addProductToCart = (product) => {
        const formKey = getCookie("form_key");
        const addToCartUrl = createAddToCartUrl(product.id);
        const postUenc = encodeUenc(addToCartUrl);
        fetch(addToCartUrl, {
            body: JSON.stringify({
                form_key: formKey,
                product: product.id,
                // You may need to add other attributes 
            }),
            method: 'POST',
            async: false
        }).catch((error) => { console.error('Error:', error); });
    };

    const createAddToCartUrl = (productId) => {
        let location = window.location.host;
        if (!location.endsWith("/")) location += "/";
        const currentLocationUENC = encodeURIComponent(encodeUenc());
        
        // You may need to create a dedicated endpoint for the skeepers Add To Cart
        const postUrl = location + "cart/add/uenc/" + currentLocationUENC + "/product/" + productId;
        return postUrl;
    };

    const encodeUenc = (value) => {
        const regex = /=/gi;
        return btoa(value).replace(regex, ",");
    };

    const getCookie = (cookieName) => {
        const cookies = document.cookie.split(";");
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith(`${cookieName}=`)) {
                return cookie.substring(cookieName.length + 1);
            }
        }
        return null;
    };

    addProductToCart(product);
});

window.addEventListener('skp:addToCart', addToCartHandler);

WooCommerce

const addToCartHandler = (event) => {
    const { product } = event.detail;
    fetch(woocommerce_params.ajax_url, {
            body: JSON.stringify({
                'action': 'woocommerce_add_to_cart',
                'product_id': product.id,
                'quantity': 1
            }),
            method: 'POST',
            async: false
        }).catch((error) => { console.error('Error:', error); });
});

window.addEventListener('skp:addToCart', addToCartHandler);

Style customization

In the style part of the script, you can add elements to customize how your live are displayed.

<!-- Add your custom fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600&display=swap" rel="stylesheet">

<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"
></script>

<skp-landing 
  store-id="XXXXX"
	display-type= "all"
	transaction-type= "addToCart"
	...
></skp-landing>

<style> 
  :root {
    --skp-radius: 5px;
    --skp-font-family: 'Nunito'; /* With your custom font */
    --skp-primary-color: #121212;
    --skp-text-color: #2f2e2e; 
    --skp-wrapper-color: #ffffff;
  }
</style>

Property

Description

Type

--skp-radius

The border radius of the events cards

in px

--skp-font-family

Change the font for the title, description and CTA

String

--skp-primary-color

Color of the main button, on the landing page and the video player

#000000

--skp-text-color

Color of the title and description texts

#000000

--skp-wrapper-color

Event cards background color

#000000

Link to the product page

The transaction-type: "linkToProductPage" or transaction-type: "customLinkToProductPage" will display an action button to redirect the client to the product's page instead of the add to cart.

linkToProductPage

It will open a new tab to the product's page. It can open a link on another domain.

If the Picture in Picture mode is activated, the player will be instead reduced so that viewers can still browse your website while watching the live. More info on Picture in Picture

customLinkToProductPage

If you need to implement your own redirection system, you will need to listen to the skp:ls:openProductLink emitted by the tag.

window.addEventListener('skp:ls:openProductLink', (event) => {
    const { product, broadcast } = event.detail
    // Insert your add to card, tracking code here or any actions you want to happen
})

Product information comes from your product feed. Check the product ID in the product feed, it must be the same one used by your ecommerce platform.

Autoplay

Instead of the customer manually starting the show, the player can be configured to automatically start when they land on your page.

Add the query parameter ?autoplay=liveId to the URL where you have your list of live events displayed. You can share that URL with your customers, if that live is ongoing or in replay, the player will automatically be opened when opening the page.

Example: http://www.yourwebsite.com/live-shopping?autoplay=964

You can find the ID of a live in the back office or the app on the edition screen of the corresponding event

Keywords

Add keywords to your live events during creation or edition and add them in the widget to display the list of corresponding events. You can put as many keywords as you want.

Add the parameter keywords= "['A','B','...']", in the tag. Check the example below:

<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"
></script>

<skp-landing
  store-id="XXXXX"
	keywords="['keyword1','keyword2']"
></skp-landing>

Picture in Picture (PiP)

The player can be reduced to let your viewers browse your website while watching the live with no interruption. Viewers can click on maximize to reopen the main player at any time.

PiP mode might not work on every website. If you want to change the way it behaves, change the value of "picture-in-picture-mode" in the tag.

<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"
></script>

<skp-landing
  store-id="XXXXX"
	picture-in-picture-mode= "partial"
></skp-landing>

API Integration

If you want to fully control how to display and open your live you can use our API.

Change the tag value to display-type= "none" will load our SDK on the current page without interfering with your code. You can now, with the code below, launch the video player with any of your custom designs.

<button id="cta-broadcast">Click To open Broadcast</button>

<script>
window.addEventListener('skp:ls:loaded', (event) => {
    const detail = event.detail
    console.log("@debug:skp:ls:loaded", detail);
  
    const {
      displayType,
      broadcasts
    } = detail;

    const $buttonBroadcast = document.getElementById('cta-broadcast');
    // Open a Shopping Party (You can call this method with every Mode)
    $buttonBroadcast.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      const openSPEvent = new CustomEvent('spockeeOpenShoppingParty', {
        detail: {
          id:${BROADCAST_ID},
          time:${YOUR_TIME},
        }
      });
      window.dispatchEvent(openSPEvent);
    })
  })
</script>

The parameter of the openShoppingParty method is an object with the following attributes:

  • id: ID of your live event

  • time: Enter a time in seconds to open a replay to a specific moment

Specify the brodcastId you received with our API

To display the list of live events, use the endpoint: /v3/public/broadcasts

Open a live from a product detail page (PDP)

You can set our tag on a product page that can display a replay only if the specified product was highlighted during a live

This action will open the most recent live at the time the product was highlighted

This integration doesn't have any graphic interface, you need to create your own components to open the replay.

How to install

  • Add the tag on your product page (no DOM modification will be made, it will only load the Live Shopping widget

  • Change the display-type to pdp

  • Add the product-id attribute with the product ID

  • Create a web component to open the video player

<script async type="module" src="https://landing.ls.skeepers.io/live-shopping-landing.es.js"
></script>

<skp-landing 
  store-id="XXXXX"
	display-type= "pdp"
	product-id= "XXXXXX"
	transaction-type= "addToCart"
	staging= "false"
></skp-landing>

<style>
  :root {
    --skp-primary-color: #121212;
  }
</style>

Button integration example

<button id=“cta-pdp” style=“display: none”>See the product presentation</button>
<script>
  window.addEventListener('skp:ls:loaded', (event) => {
    const detail = event.detail
    console.log("@debug:skp:ls:loaded", detail);
    
    const {
      displayType,
      broadcasts
    } = detail;
    
    if (!!broadcasts.length) {
      // Display a button
      const buttonPDP = document.getElementById('cta-pdp');
      buttonPDP.style.display = 'block';
      buttonPDP.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        const openSPEvent = new CustomEvent('spockeeOpenShoppingParty');
        window.dispatchEvent(openSPEvent);
      });
    }
  })
</script>

Last updated