E-commerce: How to integrate and use with Sprii
      Back to home
      2. Connect your tools
      3. E-commerce: How to integrate and use with Sprii

      How to set up Onsite live shopping

      Ensure you get the widest reach possible by converting your website visitors into live shopping viewers.

      Last updated: February 2025
      Applies to: All Sprii users
      Category: Connect your tools

      💡 Top takeaways

      With Sprii, you can host live shopping events directly on your website. This guide will walk you through the step-by-step process of setting up your onsite live shopping experience.

      Table of contents

      Install the Sprii script

      Configure your landing page

      Customize the live show player

      Enable the floating widget for promotion

      Other relevant reads

      Live shopping campaigns with onsite

      Step 1 - Install the Sprii script

      To enable onsite live shopping, you need to add a script to your website that communicates with Sprii. If your webshop is built on Shopify, this will be done automatically. Otherwise, follow these steps:

      1. Log in to your Sprii account and click Page Settings in the left menu.
      2. Click Plugins.
      3. Click Onsite.
      4. Please copy the code snippet and insert it into your site header. Ensure it is loaded on all devices and all browsers across your site.

      Onsite

      Step 2 - Configure your landing page

      Now, it's time to design your default landing page for the website, liveshopping.

      A complete live shopping page consists of three sections:

      • A section to display current live shows.
      • A section to display upcoming live shows.
      • A section to display on-demand live shows.

      Copy a pre-made HTML setup, visit this link. For enhanced flexibility, don't enter this code directly on your landing page, use a Sprii Gallery.

      Once copied, go to the Onsite Plugin and enable your gallery.

      Onsite (1)

      Paste the HTML code from before into the content section and give the Gallery a name

      Now, place the gallery snippet on your landing page where you want the content to be presented. (Snippet is highlighted in orange here above).

      Tip

      By using Gallery snippets, you can edit gallery settings without changing code on your website.

      Sprii allows you to set up multiple galleries, which you can insert into your website using a snippet generated within the platform.

      Step 3 - Customise the live show player

      Personalise your live shopping experience by customising the player with your brand’s logo and colours.

      1. Navigate to the Onsite Plugin. 
      2. Click Live Show Player.
      3. Upload your logo, choose brand colors, and adjust additional settings as needed.

      Onsite (2)

      Step 4 - Enable the floating widget for promotion

      To enhance visibility and engagement, you can add a floating widget that appears before and during a live show.

      1. Enable the Display Floating Widget option in the Onsite Plugin.
      2. Customise the widget’s appearance to align with your branding.
      3. Set how long before a live show the widget should be displayed on your website.
      4. Show/hide the floating widget on certain website pages. (i.e. hidden on checkout pages)
      5. Enable autoplay if/when a video is currently streamin live. 

      Onsite (3)

      You can choose how long before a live starts, the widget should show on your website.

      Onsite (4)

      Congratulations! Your website is now set up for onsite live shopping with Sprii. The next step is to test your setup to ensure everything runs smoothly. Click the link HERE to be redirected to our guide campaign setup with onsite, and for more information on how to test your setup.

      If you have any questions, feel free to reach out to our support team for assistance.