WooCommerce Live Selling Widget Player Integration

This guide will explain how to install the Flux Panda Player on your WooCommerce website.

We will cover the following user flow:

User flow: widget

  1. Customer watches live/recorded video and adds products to the players' built-in shopping cart
  2. Customer clicks "checkout", and products are transferred to WooCommerce shopping cart
  3. Flux Panda Player is minimized and customer redirected to checkout page
  4. Customer completes checkout as usual
16001600

Prerequisites

Create your Flux Panda account and install the Embedded SDK.

You should have a way to add custom JavaScript to your WooCommerce website. You can use a plugin such as insert-headers-and-footers.

Installation

Installing the embedded SDK

Add the following include script to your header section:

<script src="https://dist.flux.video/embed-sdk/latest/embed-sdk.min.js"></script>

Mapping products

When a customer is adding products to the Flux Panda Player and wants to checkout, we must have a way to map the products to the respective WooCommerce ID. Please see product mapping for more details

22222222

🚧

Next: create some test products

To continue please import at least 2 products from your WooCommerce store to Flux Panda and make sure the product ID is saved as external ID in Flux Panda. Consider also testing a product with variants.

Launching the player

The next step is to write some simple JavaScript code to launch the Flux Panda Player, and transfer the shopping cart to your WooCommerce store upon checkout.

1. Follow the Embedded SDK Basics Recipe

2. Write the WooCommerce Specific Code

Adding support for Standalone Mode

We have covered so far on how to add the Flux Panda Player in Widget Mode to your website.

However the Flux Panda Player can also be accessed using a direct link, which is useful to:

  1. Send it out as an email campaign, or via a messaging app
  2. Add the link to your social accounts, like an instagram story

User flow: Standalone Mode

  1. Customer opens Flux Panda session link and adds products to the cart
  2. Customer clicks "checkout" and redirected to WooCommerce store
  3. Flux Panda Player is started, minimized, and products are transferred to WooCommerce shopping cart
  4. Customer completes checkout
16001600

To accomplish this, all you have to do is to point the channel checkout settings to any page where the Embedded SDK is installed.

When a customer clicks on the checkout button, we will redirect them to your WooCommerce store, onCheckout will be called and the shopping cart will be populated in the same way as when using the widget.

23242324