Modos de instalação do código da Provei

Cada provador da Provei tem um código próprio, que você copia na tela Instalação. Para moda, óculos e ambientes, o mesmo código pode ser instalado de três formas: com o botão automático da Provei, com o provador dentro da página ou com um botão próprio da loja.

As três formas aparecem no painel em Instalação › Opções para desenvolvedores. Escolha uma só por provador.

Os códigos de cada provador

Todos os códigos carregam um script de https://app.provei.ai e terminam com o identificador da sua conta. Nos exemplos, o identificador é 00000000-0000-4000-8000-000000000000; o painel já mostra o seu.

<!-- 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>

O provador de medidas usa sempre esse código. Os links aparecem só nos produtos com tabela de medidas.

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

Para móveis, pisos e paredes, o painel recomenda o carregador com verificação, que confere a conta antes de carregar este script.

Lojas Shopify conectadas pelo app

Se a sua loja Shopify está conectada à Provei pelo app, o código pode ser um pouco diferente dos exemplos acima. Use exatamente o código que a tela Instalação mostra. Veja Instalar a Provei na Shopify.

Botão automático

É o modo padrão. Cole só o código do provador. O botão da Provei aparece sozinho nas páginas dos produtos que estão no seu catálogo e ativos, no lugar escolhido em Botão na página.

Provador dentro da página

Em vez de abrir uma janela, o provador aparece dentro de um espaço da página do produto.

Em Experiência na loja › Elementos › Janela do provador, escolha o formato Dentro da página e publique. Veja Janela do provador.

Coloque no tema o espaço onde o provador vai aparecer e o código do provador:

<!-- Espaço onde o provador aparece -->
<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>

Confira se o id do espaço é o mesmo do campo Seletor do espaço reservado, em Para desenvolvedores. Se você informou outro seletor, o painel já monta o código com ele.

Neste modo, o convite (pop-up) não aparece, e a API JavaScript não abre nem fecha o provador.

Botão próprio da loja

Use um botão do seu tema para abrir o provador, no lugar do botão da Provei. Coloque o atributo data-reverbs-trigger no elemento:

<!-- O botão aparece sozinho quando o produto da página está no catálogo -->
<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>

Para o botão da Provei não aparecer junto, desligue Mostrar o botão na loja em Botão na página.

O atributo data-reverbs-trigger

Um clique em qualquer elemento com data-reverbs-trigger abre o provador.
O clique não segue links nem envia formulários: a ação padrão do elemento é cancelada.
Elementos com o atributo que aparecem depois do carregamento, como num carrossel ou numa troca de variação, também passam a abrir o provador.
O provador só abre se o produto da página estiver no catálogo e ativo. Em outros produtos, o clique não faz nada.

O atributo data-reverbs-auto-show

Elementos com data-reverbs-auto-show ficam visíveis só quando o produto da página está no catálogo e ativo.
Comece com o elemento escondido (style="display:none"), para ele não aparecer antes da confirmação.
Quando o produto é encontrado, o provador mostra o elemento. Se o seu CSS ainda o esconder, botões e div passam a display: block e outros elementos a display: inline-block.
Em produtos fora do catálogo, o elemento fica escondido.

Usar um seletor no lugar do atributo

Se não der para mudar o HTML do botão, informe o seletor CSS dele em Experiência na loja › Elementos › Janela do provador › Para desenvolvedores, no campo Seletor de botão próprio. Os elementos que correspondem ao seletor quando o provador carrega passam a abrir o provador.

Abrir o provador pelo seu código

Se o botão próprio não resolve, por exemplo num componente do tema que já trata o clique, use a API JavaScript do provador.

Perguntas frequentes

Posso usar um botão do meu tema para abrir o provador?

Sim. Coloque o atributo data-reverbs-trigger no botão. Ao clicar, o provador abre, desde que o produto da página esteja no catálogo da Provei e ativo.

O botão próprio aparece em produtos fora do catálogo?

Não, se ele tiver o atributo data-reverbs-auto-show e começar escondido. O provador mostra o botão só quando o produto da página está no catálogo e ativo.

O provador de medidas tem esses modos?

Não. O provador de medidas usa sempre o mesmo código. Os links aparecem só nos produtos com tabela de medidas.

O suporte da Provei responde por e-mail e WhatsApp.