In this example, speaking to the video adds products to a shopping cart. With Adventr’s Realtime Player API and a few lines of JavaScript, you can wire voice-controlled shoppable video into any ecommerce system.
Learn more about the Adventr Realtime Player API here.Every time a viewer speaks a shoppable choice, the Adventr player posts a choice event to the parent page via window.postMessage. The page listens for it and maps the choice id to a product.
window.addEventListener("message", (event) => {
let received;
try { received = JSON.parse(event.data); }
catch (e) { received = { event: event.data }; }
if (received.context === "adventr" && received.event === "choice") {
const product = CATALOG[received.value.id];
if (product) addToCart(product);
}
});CATALOG is just a lookup from the choice ids set up in the Adventr editor to the products they represent — no different from any other product mapping you’d keep for a merch table or a CRM.
const CATALOG = {
"addtocart-outfit2-veyz": { name: "White denim jacket", price: 99.99 },
"addtocart-outfit3-kn0e": { name: "Wool-blend jacket", price: 64.99 }
// ...one entry per shoppable choice
};That’s the entire integration — no custom player, no SDK to install. Any page that can run JavaScript and receive a postMessage can react to a viewer’s voice.