This guide will walk you through how to implement AI Shopper on a headless site or non-Shopify platform. Whether you're using a custom-built website or another ecommerce solution, follow the steps below to get AI Shopper up and running smoothly.
Code to add in your website's <head> section:
<script>tolstoyAppKey="your-app-key"</script> <script type="module" async src="https://widget.gotolstoy.com/we/widget.js" > </script> <script type="text/javascript" nomodule async src="https://widget.gotolstoy.com/widget/widget.js" ></script> <script type="module" src="https://play.gotolstoy.com/widget-v2/widget.js" data-app-key="your-app-key" data-shop="shopify-app-url" data-product-id="product-id" data-collection-id="collection-id" > </script>
Top question:
<top-questions class="top-questions" data-product-id="product-id" ></top-questions>
See it On You:
<see-it-on-you class="see-it-on-you" data-product-id="product-id" ></see-it-on-you>
For script need to replace with your data.
data-app-key
data-shop
data-product-id
data-collection-idfor embed need to replace only data-product-id
For embed you need to replace only data-product-id.
Reminder: AI Search is not yet supported for Non-Shopify/native websites.