Install modes for the Provei code

Each Provei try-on has its own code, which you copy from the Instalação (Installation) screen. For fashion, eyewear and rooms, the same code can be installed in three ways: with the automatic Provei button, with the try-on inside the page, or with the store’s own button.

The three options are in the dashboard under Instalação › Opções para desenvolvedores (Installation › Developer options). Pick only one per try-on.

The code for each try-on

Every code loads a script from https://app.provei.ai and ends with your account ID. In the examples, the ID is 00000000-0000-4000-8000-000000000000; the dashboard already shows yours.

<!-- Provei - Provador virtual -->
<script src="https://app.provei.ai/api/v2/snippet-fashion/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

<!-- Provei - Provador de óculos -->
<script src="https://app.provei.ai/api/v2/snippet-glasses/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

<!-- Provei - Provador de medidas -->
<script src="https://app.provei.ai/api/v2/snippet-measurements/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

The sizing widget always uses this code. Its links show only on products that have a size chart.

<!-- Provei - Provador de ambientes -->
<script src="https://app.provei.ai/api/v2/snippet/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

For furniture, flooring and walls, the dashboard recommends the verified loader, which checks the account before loading this script.

The  comment at the top of each code is the label the dashboard adds, in Portuguese.

Shopify stores connected through the app

If your Shopify store is connected to Provei through the app, the code may be slightly different from the examples above. Use exactly the code the Instalação screen shows. See Install Provei on Shopify.

Automatic button

This is the default mode. Paste only the try-on code. The Provei button shows up on its own on the pages of products that are in your catalog and active, in the spot you chose in Botão na página (Button on the page).

Try-on inside the page

Instead of opening a window, the try-on appears inside an area of the product page.

In Experiência na loja › Elementos › Janela do provador (In-store experience › Elements › Try-on window), choose the Dentro da página (Inside the page) format and publish. See Try-on window.

Add to the theme the area where the try-on will appear, along with the try-on code:

<!-- Area where the try-on appears -->
<div id="reverbs-widget"></div>

<!-- Provei - Provador virtual -->
<script src="https://app.provei.ai/api/v2/snippet-fashion/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

Check that the area’s id matches the Seletor do espaço reservado (Placeholder selector) field, under Para desenvolvedores (For developers). If you entered a different selector, the dashboard already builds the code with it.

In this mode, the invitation pop-up doesn’t show, and the JavaScript API can’t open or close the try-on.

The store’s own button

Use a button from your theme to open the try-on instead of the Provei button. Add the data-reverbs-trigger attribute to the element:

<!-- The button shows up on its own when the product on the page is in the catalog -->
<button data-reverbs-trigger data-reverbs-auto-show style="display:none" class="seu-estilo">
  Experimentar
</button>

<!-- Provei - Provador virtual -->
<script src="https://app.provei.ai/api/v2/snippet-fashion/00000000-0000-4000-8000-000000000000" async crossorigin="anonymous"></script>

To keep the Provei button from showing as well, turn off Mostrar o botão na loja (Show the button in the store) in Botão na página.

The data-reverbs-trigger attribute

A click on any element with data-reverbs-trigger opens the try-on.
The click doesn’t follow links or submit forms: the element’s default action is canceled.
Elements with the attribute that appear after load, for example in a carousel or after a variant change, also open the try-on.
The try-on opens only if the product on the page is in the catalog and active. On other products, the click does nothing.

The data-reverbs-auto-show attribute

Elements with data-reverbs-auto-show are visible only when the product on the page is in the catalog and active.
Start with the element hidden (style="display:none") so it doesn’t show before the check.
When the product is found, the try-on shows the element. If your CSS still hides it, buttons and divs switch to display: block and other elements to display: inline-block.
On products outside the catalog, the element stays hidden.

Use a selector instead of the attribute

If you can’t change the button’s HTML, enter its CSS selector in Experiência na loja › Elementos › Janela do provador › Para desenvolvedores, in the Seletor de botão próprio (Custom button selector) field. Elements that match the selector when the try-on loads will open the try-on.

Open the try-on from your code

If your own button isn’t enough, for example in a theme component that already handles the click, use the try-on JavaScript API.

Frequently asked questions

Can I use a button from my theme to open the try-on?

Yes. Add the data-reverbs-trigger attribute to the button. Clicking it opens the try-on, as long as the product on the page is in the Provei catalog and active.

Does my own button show on products that aren't in the catalog?

Not if it has the data-reverbs-auto-show attribute and starts hidden. The try-on shows the button only when the product on the page is in the catalog and active.

Does the sizing widget have these modes?

No. The sizing widget always uses the same code. Its links show only on products that have a size chart.

Provei support answers by email and WhatsApp.