Widget Provei — guia avançado

Esta página não repete os passos de cada plataforma: ela documenta somente o contrato avançado depois que a instalação canônica foi concluída.

O endpoint de script é hospedado pela Provei em https://app.provei.ai. O script obtém a configuração, resolve o produto pela URL e cria o iframe correspondente à linha selecionada.

<script src="https://app.provei.ai/api/v2/snippet/SEU_USER_ID" async crossorigin="anonymous"></script>

O valor usado no exemplo é $SEU_USER_ID. A URL real deve conter o UUID da conta autorizada.

A comparação normaliza o endereço: origem em minúsculas e URL sem query, hash ou barra final. Em Fashion, a URL canônica também pode ser usada quando preserva o mesmo caminho. Se o match Home estiver indisponível ou ambíguo, a resposta é simplesmente matched: false; isso não rejeita o script já autorizado.

A configuração do painel pode renderizar o runtime em três modos:

Home publica window.reverbsWidgetReady, uma Promise do mesmo proprietário, além de window.reverbsWidget e window.reverbsWidgetOwnerId. A Promise resolve para a instância depois da inicialização do runtime.

(function () {
  var EXPECTED_OWNER = '00000000-0000-4000-8000-000000000001';
  var done = false;

  function cleanup() {
    window.removeEventListener('reverbs:ready', onReady);
    window.removeEventListener('reverbs:error', onError);
  }

  function owns(detail) {
    return detail && detail.userId === EXPECTED_OWNER;
  }

  function onReady(event) {
    var detail = event && event.detail;
    if (done || !owns(detail) || !detail.widget) return;
    done = true;
    cleanup();
    console.log('Home inicializado', detail.widget);
  }

  function onError(event) {
    var detail = event && event.detail;
    if (done || !owns(detail)) return;
    done = true;
    cleanup();
    console.error('Home indisponível', detail.code, detail.message);
  }

  var ready = window.reverbsWidgetReady;
  if (
    window.reverbsWidgetOwnerId === EXPECTED_OWNER &&
    ready &&
    typeof ready.then === 'function'
  ) {
    ready.then(
      function (widget) {
        onReady({ detail: { userId: EXPECTED_OWNER, widget: widget } });
      },
      function (error) {
        onError({ detail: error });
      }
    );
  } else {
    // Instale estes listeners antes de inserir/recarregar o loader.
    window.addEventListener('reverbs:ready', onReady);
    window.addEventListener('reverbs:error', onError);
  }
})();

O exemplo remove exatamente os callbacks registrados e ignora eventos de outros proprietários. Se já houver um bootstrap do mesmo UUID, use a Promise existente; um UUID diferente recebeowner_conflict e não substitui o runtime. A limpeza do loader acontece após um ready, error ou script-error terminal; uma requisição de rede que fique indefinidamente pendente não recebe timeout artificial.

Os eventos Home são emitidos em window. Filtre sempreevent.detail.userId antes de reagir a eventos terminais de uma página que possa conter mais de um proprietário.

Códigos de instalação observáveis incluem config_unavailable, initialization_failed, owner_conflict e script_load_failed.reverbs:ready confirma a inicialização do runtime, não que plano, créditos ou match de produto tenham produzido um launcher visível.

O runtime emite estes nomes exatos de variáveis CSS. Os valores padrão vêm da configuração do tema; customizações próprias devem respeitar a cascata e não substituir os nomes por aliases.

Os temas dos runtimes usam as variáveis abaixo. O painel/runtime define os valores padrão; customizações próprias devem respeitar a cascata e os nomes exatos.

<style>
:root {
  --reverbs-btn-gradient: linear-gradient(135deg, #0f766e, #14b8a6);
  --reverbs-btn-color: #ffffff;
  --reverbs-btn-border-gradient: linear-gradient(135deg, #115e59, #2dd4bf);
  --reverbs-btn-shadow: 0 4px 24px rgba(15, 118, 110, 0.25);
  --reverbs-btn-shadow-hover: 0 8px 32px rgba(15, 118, 110, 0.35);
  --reverbs-btn-glow: rgba(45, 212, 191, 0.2);
}
</style>

O runtime fornece quatro temas configuráveis:

A chave é aplicada pela configuração do widget e passada ao iframe; não use nomes de temas fora desta lista.

<button data-reverbs-trigger>
  Ver no meu ambiente
</button>
<a href="/produto" data-reverbs-trigger>
  Ver no meu ambiente
</a>

<div data-reverbs-auto-show style="display: none">
  Ver no meu ambiente
</div>

Para seletores personalizados, use a opçãotrigger_selector na configuração do runtime. Um mesmo elemento não deve receber loaders duplicados.