Video Commerce for developers
The PROVEI.AI code, the same one the try-ons use, already loads the video showcases you published in Video Commerce. The Video Commerce-only code is an alternative for stores that use only the videos and can’t have the full code.
Which code to use
Section titled “Which code to use”- Your store has a Provei try-on: the try-on code already in your theme loads the showcases. No other code needed.
- Your store will use only the videos: install the PROVEI.AI code from the Instalação (Installation) screen. With no active try-on, it loads only Video Commerce. See Install Provei in your store and Install modes.
- Your store can’t have the full code: use the Video Commerce-only code below.
The Video Commerce-only code
Section titled “The Video Commerce-only code”Copy it from Video Commerce › Instalar › Instalar de outro jeito › Avançado (Install › Install another way › Advanced), in the Só o Video Commerce (Video Commerce only) block, or from Instalação (Installation), in the Avançado: só o Video Commerce (Advanced: Video Commerce only) block. It looks like this, with your account ID:
<script async src="https://app.provei.ai/video-commerce/loader.js" data-fawkes-video-commerce="00000000-0000-4000-8000-000000000000"></script>Paste it in the layout used by every page, right before </body>. Showcases show only on the pages and in the spots chosen for each showcase.
Putting both codes on the same page doesn’t duplicate the videos: the second one sees that the first has already loaded and does nothing.
Page changes without a reload
Section titled “Page changes without a reload”Video Commerce watches for changes in the page content. In stores that change pages without reloading, it checks the new URL and shows the showcases set up for it. See SPA and headless stores.
Content Security Policy
Section titled “Content Security Policy”If the store uses a nonce in its Content Security Policy, add the nonce to the script tag. Video Commerce passes the same nonce on to the script it loads.
The videos come from dedicated video hosts. To find out which ones to allow in your policy, contact support. See CSP and domains.
Place a showcase with a selector
Section titled “Place a showcase with a selector”Each showcase can be placed with a CSS selector and have its own CSS, under Avançado (para desenvolvedores) (Advanced, for developers) in the showcase editor. Use it only when the ready-made spots don’t work with your theme. See Advanced (for developers).
Frequently asked questions
I already have the try-on code in my store. Do I need the Video Commerce code?
No. The PROVEI.AI code, the same one the try-on uses, already loads the video showcases. Pasting both doesn't duplicate the videos.
Where do I copy the Video Commerce-only code?
In the dashboard, under Video Commerce › Instalar › Instalar de outro jeito › Avançado (Install › Install another way › Advanced), in the Só o Video Commerce (Video Commerce only) block. It also shows on the Instalação (Installation) screen, in the Avançado: só o Video Commerce block.