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
- Customer watches live/recorded video and adds products to the players' built-in shopping cart
- Customer clicks "checkout", and products are transferred to WooCommerce shopping cart
- Flux Panda Player is minimized and customer redirected to checkout page
- Customer completes checkout as usual
Create your Flux Panda account and install the Embedded SDK.
Add the following include script to your header section:
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
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.
1. Follow the Embedded SDK Basics Recipe
2. Write the WooCommerce Specific Code
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:
- Send it out as an email campaign, or via a messaging app
- Add the link to your social accounts, like an instagram story
User flow: Standalone Mode
- Customer opens Flux Panda session link and adds products to the cart
- Customer clicks "checkout" and redirected to WooCommerce store
- Flux Panda Player is started, minimized, and products are transferred to WooCommerce shopping cart
- Customer completes checkout
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.
Updated 5 months ago