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.
const CATALOG = {
"addtocart-outfit2-veyz": { name: "White denim jacket", price: 99.99 },
"addtocart-outfit3-kn0e": { name: "Wool-blend jacket", price: 64.99 }
};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.
Full Realtime Player API reference →