Use Picture-In-Picture
Reduce the player while browsing on a product page
Last updated
Reduce the player while browsing on a product page
Last updated
The Picture-In-Picture allows user to keep watching the live while he’s browsing on a product page instead of being redirected to a new tab.
Go to https://admin.aploze.com
Click on your username, at the bottom of the left sidebar & select « Channel Settings »
Click on the tab « Integration »
Scroll to the domain you want to manage and Enable the Picture-in-Picture
To create this behavior, we technically do 2 things:
Reduce the Aploze Player as a draggable element
Create a new iFrame that covers the entire current page, where we'll display the product page content
Create an iFrame on top of your Liveshopping page is a trick to display the product page without reloading the browser. The user can watch the player in reduced mode and see the product page on the same time. Later, he can click on the reduced player an go back to the expanded player.
Here what's happens on your Liveshopping page:
This is your Liveshopping page on your website, with the Gallery Widget
The user clicks to an event inside the Gallery Widget, then the Aploze Player is now opened as an overlay
The user clicks on a product link inside the Aploze Player. Instead of being redirected to a new tab, an iFrame is created with the product page content and the Player is reduced.
During those 3 steps, the browser url stay the same because the user is still on your Liveshopping page.
Some strict server-side security policies might block requests from within an iframe element, Aploze can not guarantee the full functionality of the feature.
Here Security Issues you can encounter:
X-Frame-Options = DENY (RFC7034)
Possible solution: Set X-Frame-Options = SAMEORIGIN
Content-Security-Policy: frame-ancestors 'none'; (CSP level 2)
Possible solution: Content-Security-Policy: frame-ancestors 'self';
Please test the entire user flow (from product click to buy action) to be sure that this feature works on your website.
