OMNIS handles Shopify and WooCommerce automatically. For any other website — React, Vue, Next.js, or plain HTML — you need two things: the widget script on your page, and one event listener that calls your own cart function.
How it works
When a visitor asks the OMNIS voice agent to add something to their cart, the agent decides which product and quantity. The widget then fires a browser event called ai-agent-action on the window object. Your code listens for that event and calls your own cart function — OMNIS never touches your cart directly.
Here is exactly what that event contains:
// Every time the AI decides to add something to cart,
// this event fires on the window object.
{
action: "add_to_cart",
product_id: "123", // the product ID you configured in OMNIS
quantity: 2 // how many the user asked for
}The product_id is whatever ID you set when configuring the product in the OMNIS dashboard. Use the same ID your cart function already accepts — a SKU, a database ID, a variant ID, anything.
Setup
Add the widget script
Paste this just before the closing </body> tag. Replace YOUR_TOKEN_HERE with your token from the OMNIS dashboard.
<script
src="https://cdn.theomnisai.com/widget.js"
data-token="YOUR_TOKEN_HERE"
defer
></script>Add the event listener
Add this before the widget script so it is ready when the widget loads. When the AI triggers an add-to-cart, this listener fires and you call your own cart function with the product ID and quantity.
window.addEventListener("ai-agent-action", function (event) {
if (event.detail.action !== "add_to_cart") return;
var productId = event.detail.product_id;
var quantity = event.detail.quantity;
// Call your own add-to-cart function here
myCart.addItem(productId, quantity);
});Full working example
Both steps together in a single HTML file so you can see the correct order:
<!DOCTYPE html>
<html>
<body>
<!-- Step 1: Wire up the listener BEFORE the widget loads -->
<script>
window.addEventListener("ai-agent-action", function (event) {
if (event.detail.action !== "add_to_cart") return;
addToCart(event.detail.product_id, event.detail.quantity);
});
function addToCart(cartId, quantity) {
// Your cart logic here
console.log("Adding", quantity, "x", cartId);
}
</script>
<!-- Step 2: Load the OMNIS widget -->
<script
src="https://cdn.theomnisai.com/widget.js"
data-token="YOUR_TOKEN_HERE"
defer
></script>
</body>
</html>Using a framework?
Framework examples
The same two steps apply in any framework — you just register the listener inside the framework's lifecycle instead of a plain script tag.
React
Create a small component that registers the listener and returns null. This ties the listener to React's lifecycle so it is automatically removed when the component unmounts.
// OmnisCartListener.jsx
import { useEffect } from "react";
import { useCart } from "./CartContext"; // your cart state hook
export function OmnisCartListener() {
const { addItem } = useCart();
useEffect(() => {
function onAgentAction(event) {
if (event.detail.action !== "add_to_cart") return;
addItem(event.detail.product_id, event.detail.quantity);
}
window.addEventListener("ai-agent-action", onAgentAction);
return () => window.removeEventListener("ai-agent-action", onAgentAction);
}, [addItem]);
return null; // renders nothing — just wires up the listener
}Mount it once near your app root:
// App.jsx — mount once near your root
import { OmnisCartListener } from "./OmnisCartListener";
export default function App() {
return (
<>
<OmnisCartListener />
{/* the rest of your app */}
</>
);
}Vue 3
Put the listener in a composable and call it from your root component:
// composables/useOmnisCart.js
import { onMounted, onUnmounted } from "vue";
import { useCart } from "./useCart"; // your cart composable
export function useOmnisCart() {
const cart = useCart();
function onAgentAction(event) {
if (event.detail.action !== "add_to_cart") return;
cart.addItem(event.detail.product_id, event.detail.quantity);
}
onMounted(() => window.addEventListener("ai-agent-action", onAgentAction));
onUnmounted(() => window.removeEventListener("ai-agent-action", onAgentAction));
}// App.vue
<script setup>
import { useOmnisCart } from "./composables/useOmnisCart";
useOmnisCart();
</script>Summary
Two steps, one event. OMNIS handles understanding what the user wants — your code handles what to do with it. No extra libraries, no API keys in your frontend, no changes to your existing cart logic.