Ragion
RagionIA Contextual
InícioPreçosDocumentaçãoSobreContato
Início

Comece Agora

  • Bem-vindo
  • Início Rápido
  • Quickstart de Produto

Widget de Chat

  • Visão Geral e Instalação
  • Configuração Completa
  • API e Eventos
  • Aparência e Temas
  • Guias por Plataforma

SDK JavaScript/TypeScript

  • Visão Geral
  • Core SDK
  • React Hooks
  • Exemplos

Operação e Confiança

  • Segurança e LGPD
  • Troubleshooting
Ragion

Ragion

IA contextual para seu negócio

Plataforma de IA contextual para times que precisam de respostas inteligentes com seus dados, governança e visibilidade.

Produto

  • Recursos
  • Preços

Documentação

  • Guia de Início
  • API Reference
  • Exemplos

Empresa

  • Sobre
  • Contato

Legal

  • Privacidade
  • Termos

v0.1.0 · © 2026 Ragion. IA contextual com controle e confiança.

  1. Documentação
  2. Widget de Chat

Widget de Chat

Adicione o assistente Ragion a qualquer site com uma única linha de HTML. O widget é um arquivo JavaScript independente que monta um botão flutuante e um painel de chat com respostas em streaming — sem instalar pacotes, sem alterar o seu build.

Integração de 1 linha

Um único arquivo JS (~12 KB gzip). Cole a tag do script e o chat aparece no site.

Zero dependências

Sem frameworks, sem conflitos. Shadow DOM garante CSS 100% isolado do seu site.

Totalmente personalizável

Presets de tema, CSS variables (--ragion-*), textos, posição, layout e callbacks.

Streaming em tempo real

Respostas via SSE com Markdown, retry automático, cancelamento e sessão persistente.

Instalação em 3 passos

1

Gere uma API key

No dashboard do Ragion, crie uma API key (rg_...) dedicada ao widget.

2

Cole o snippet no site

Adicione a tag do script antes do </body> com a sua API key no atributo data-api-key.

3

Pronto — o widget está no ar

O botão flutuante e o painel de chat montam automaticamente. Nenhum outro código é necessário.

O snippet

Cole antes do </body>, trocando rg_xxx pela sua API key:

<script src="https://widget.kevinkvn.com.br/ragion-widget.js" data-api-key="rg_xxx" defer></script>
A URL do backend do Ragion já vem embutida no bundle — você só precisa da API key. Nenhuma outra configuração é obrigatória.

Como funciona

  • O script monta um elemento <ragion-widget> com Shadow DOM — o CSS do widget não vaza para o site e o CSS do site não afeta o widget.
  • As mensagens são enviadas ao backend do Ragion com a sua API key e a resposta chega em streaming (SSE), renderizada com Markdown.
  • A conversa mantém a mesma sessão enquanto o visitante navega; o estado aberto/fechado é lembrado entre páginas.
  • O painel vira tela cheia automaticamente em telas pequenas (mobile).

Segurança

  • Use uma API key dedicada ao widget, com escopo mínimo e rate limiting.
  • A key fica visível no HTML do site (é o esperado para widgets embedáveis) — por isso, nunca reutilize keys de backend.
  • Caso a key seja comprometida, revogue e gere uma nova no dashboard.

Explore a documentação do widget

Configuração CompletaAPI e EventosAparência e TemasGuias por Plataforma
PróximoConfiguração Completa