Embed & Integração

O widget Simple Agent é uma tag <script> de 5 linhas que funciona em qualquer site, seja HTML puro, React, Vue, WordPress, Webflow, Framer ou qualquer outro CMS.

Snippet padrão

<script
  src="https://simple-agent.me/widget/loader.js"
  data-agent-id="SEU-AGENT-ID"
  async
></script>

Cole este snippet antes do </body> em todas as páginas onde você quer o widget.

---

Parâmetros disponíveis

Atributo	Tipo	Padrão	Descrição
data-agent-id	string	—	Obrigatório. ID do seu agent
data-position	string	bottom-right	Posição: bottom-right, bottom-left
data-color	string	Extraída do site	Cor hex do botão bubble
data-open	boolean	false	Abre o chat automaticamente
data-hide-branding	boolean	false	Remove "Powered by Simple Agent" (plano Growth+)
data-allowed-paths	string	*	Regex de paths onde exibir
data-locale	string	Auto-detect	pt-BR, en, es

Exemplo com todos os parâmetros

<script
  src="https://simple-agent.me/widget/loader.js"
  data-agent-id="ag_xxxxxxxxxxx"
  data-position="bottom-left"
  data-color="#a3e635"
  data-hide-branding="true"
  data-allowed-paths="/produtos/.*|/checkout"
  data-locale="pt-BR"
  async
></script>

---

React / Next.js

Em React, adicione o script via useEffect ou usando o componente Script do Next.js:

// Com Next.js Script component (recomendado)
import Script from "next/script";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Script
        src="https://simple-agent.me/widget/loader.js"
        data-agent-id={process.env.NEXT_PUBLIC_AGENT_ID}
        strategy="lazyOnload"
      />
    </>
  );
}

// React puro com useEffect
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://simple-agent.me/widget/loader.js";
    script.setAttribute("data-agent-id", "SEU-AGENT-ID");
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <div>...</div>;
}

---

WordPress

1. Acesse Aparência → Editor de temas (ou use um plugin de scripts como Header and Footer Scripts)
2. Cole o snippet antes da tag </body> no footer.php
3. Salve — o widget aparece em todas as páginas

Plugin recomendado: Insert Headers and Footers — adiciona scripts sem editar arquivos de tema.

---

Webflow

1. Acesse Project Settings → Custom Code
2. Cole o snippet na seção Footer Code
3. Publique o projeto

---

Controle por página (condicional)

Use data-allowed-paths para exibir o widget apenas em páginas específicas:

<!-- Apenas no carrinho e checkout -->
<script
  src="https://simple-agent.me/widget/loader.js"
  data-agent-id="SEU-AGENT-ID"
  data-allowed-paths="/carrinho|/checkout.*"
  async
></script>

O valor é uma regex aplicada ao window.location.pathname.

---

API JavaScript (programática)

Após o widget carregar, você pode controlá-lo via API:

// Abrir o chat
window.Simple Agent.open();

// Fechar o chat
window.Simple Agent.close();

// Enviar mensagem pré-definida
window.Simple Agent.send("Quero saber sobre o plano Agency");

// Ouvir evento de nova mensagem
window.Simple Agent.on("message", (msg) => {
  console.log("Nova mensagem:", msg.content);
});

---

Múltiplos agents no mesmo site

Você pode ter agents diferentes por seção:

<!-- Agent de suporte no footer -->
<div id="agent-suporte"></div>
<script>
  window.Simple AgentConfig = {
    containerId: "agent-suporte",
    agentId: "ag_suporte_xxx",
    mode: "inline", // inline não cria bubble
  };
</script>
<script src="https://simple-agent.me/widget/loader.js" async></script>

---

Segurança e CORS

O widget usa JWT RS256 para autenticação. Adicione seus domínios autorizados no painel do agent em Segurança → Domínios permitidos.

Tentativas de carga de domínios não autorizados recebem HTTP 403 antes do LLM call.

Para detalhes sobre a assinatura JWT, veja API Reference.