Passo a passo para instalar o widget em cada tipo de site. Em todos os casos, o único requisito é a sua API key (rg_...).
Cole o snippet antes do </body> de cada página (ou do template base):
<!DOCTYPE html>
<html lang="pt-BR">
<body>
<!-- conteúdo do site -->
<script src="https://widget.kevinkvn.com.br/ragion-widget.js" data-api-key="rg_xxx" defer></script>
</body>
</html>URL direta: https://widget.kevinkvn.com.br/ragion-widget-wordpress.zip
No painel do WordPress, acesse Plugins → Adicionar novo → Enviar plugin e instale o .zip.
Ative o plugin e abra Configurações → Ragion Widget.
Informe a API key e ajuste posição, cores e textos pela interface.
Com o plugin Code Snippets ou no functions.php do seu tema:
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script( 'ragion-widget', 'https://widget.kevinkvn.com.br/ragion-widget.js', array(), null, true );
} );
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if ( 'ragion-widget' === $handle ) {
$tag = str_replace( ' src=', ' defer data-api-key="rg_xxx" src=', $tag );
}
return $tag;
}, 10, 2 );No GTM, crie uma nova tag do tipo HTML personalizado.
Cole o snippet abaixo no corpo da tag.
Configure o acionador All Pages (ou as páginas desejadas) e publique.
<script src="https://widget.kevinkvn.com.br/ragion-widget.js" data-api-key="rg_xxx" defer></script>Não é necessário habilitar "Support document.write" — é uma tag de script comum.
Use a área de código customizado do construtor (em Webflow: Site Settings → Custom Code → Footer Code) e cole o snippet de 1 linha. O widget funciona em qualquer construtor que permita inserir scripts.
Carregue o script e inicialize dentro de um useEffect, destruindo o widget ao desmontar:
"use client";
import { useEffect } from "react";
export function RagionWidgetLoader() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://widget.kevinkvn.com.br/ragion-widget.js";
script.defer = true;
script.onload = () => {
window.RagionWidget?.init({ apiKey: "rg_xxx" });
};
document.body.appendChild(script);
return () => {
window.RagionWidget?.destroy();
script.remove();
};
}, []);
return null;
}Em Next.js, renderize <RagionWidgetLoader /> no layout (client component). Alternativamente, use o componente next/script com data-api-key direto.
// plugin ou onMounted do componente raiz
onMounted(() => {
const script = document.createElement("script");
script.src = "https://widget.kevinkvn.com.br/ragion-widget.js";
script.defer = true;
script.onload = () => window.RagionWidget?.init({ apiKey: "rg_xxx" });
document.body.appendChild(script);
});
onUnmounted(() => {
window.RagionWidget?.destroy();
});Para importar o widget como módulo no seu bundle (em vez de carregar via tag), use o build ESM ragion-widget.esm.js:
import { RagionWidget } from "https://widget.kevinkvn.com.br/ragion-widget.esm.js";
RagionWidget.init({ apiKey: "rg_xxx" });
// ao desmontar a aplicação:
RagionWidget.destroy();x-api-key; o backend do Ragion já libera essas origens via CORS.defer antes do </body>.zIndex na configuração — o padrão é 999999.