Como adiciono o Atria ao Next.js (App Router)?

Use next/script no layout raiz para que o chat carregue após a hidratação em todas as rotas. Adicione o script a app/layout.tsx: Se você definir cabeçalhos de segurança em next.config.ts, permita o Atria: Usa uma CSP baseada em nonce em proxy.ts (middleware.ts antes do Next.js 16)? Leia o nonce no layout e repasse-o: Não use strategy="worker". Essa opção executa scripts em um web worker via Partytown, onde o widget não consegue renderizar. Prefira afterInteractive (ou lazyOnload). beforeInteractive funciona, mas apenas faz o chat carregar antes do seu próprio código. Não import o script em um componente nem o copie para public/. Ele precisa ser carregado do Atria para permanecer atualizado. Não é necessário alterar images ou remotePatterns.

Como adiciono o Atria ao Next.js (Pages Router)?

Carregue-o uma vez em _app usando next/script. Adicione o script ao lado do componente da página: As regras do App Router também se aplicam aqui: não use strategy="worker" e permita o Atria nos cabeçalhos CSP. Evite uma tag direta dentro de em _document.tsx: ela é executada antes da hidratação e não oferece nenhuma vantagem.

Como adiciono o Atria ao React Router v7 / Remix?

Adicione-o a root.tsx. No React 18, carregue-o após a hidratação para evitar avisos. React 19 (padrão do React Router v7): coloque a tag no body do documento, após . React 18 (Remix v2): carregue-o por um effect para que o React hidrate o documento primeiro. Defina os cabeçalhos CSP em entry.server.tsx (ou em uma exportação headers) e adicione o Atria a script-src e frame-src. O React 18 hidrata o documento inteiro e pode remover, com um aviso, os nós que scripts adicionaram ao antes da hidratação. O botão se conecta novamente sozinho, mas o carregamento por effect evita totalmente o aviso. No desenvolvimento, o Strict Mode executa os effects duas vezes. A verificação do ID (e a própria proteção do widget) mantém apenas uma cópia.

Como adiciono o Atria ao Gatsby?

Use do Gatsby com a estratégia post-hydrate. Envolva todas as páginas uma vez em gatsby-browser: Não use strategy="off-main-thread": ela executa em um worker via Partytown, onde o widget não consegue renderizar. Se você definir uma CSP nos arquivos de cabeçalho da hospedagem (como _headers), adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao Nuxt?

Declare o script em nuxt.config.ts para incluí-lo em todas as páginas. Adicione-o ao head do app, no fim do body: Usa nuxt-security? Adicione o Atria à CSP: Precisa dele em apenas uma página? Use useHead({ script: [...] }) nessa página. Não encaminhe o script por uma opção de empacotamento ou proxy (por exemplo, em @nuxt/scripts). Ele precisa ser carregado do Atria.

Como adiciono o Atria ao SvelteKit?

Adicione-o a src/app.html. Cole a tag antes do fechamento do body: Se você usa kit.csp, adicione o Atria às diretivas: %sveltekit.nonce% só é relevante quando kit.csp usa nonces. Caso contrário, não causa nenhum problema. Não coloque a tag em um componente .svelte. Scripts renderizados por componentes não são executados na navegação no cliente.

Como adiciono o Atria ao Astro?

Adicione-o ao layout base com is:inline. is:inline instrui o Astro a manter a tag exatamente como foi escrita: Sem is:inline, o Astro pode processar a tag como parte do bundle. Com transições de visualização ( ), o Astro substitui o body a cada navegação. O botão se conecta novamente e a conversa continua: não é necessário usar transition:persist nem data-astro-rerun. Funciona em todos os modos de saída: estático, servidor e híbrido.

Como adiciono o Atria ao Angular?

Adicione-o a src/index.html, não ao template de um componente. Cole a tag antes do fechamento do body: Vai carregá-lo pelo código (por exemplo, após o consentimento)? Execute-o fora da zona do Angular para que os eventos do widget não acionem a detecção de alterações: O Angular remove tags dos templates de componentes, portanto uma tag dentro de um componente nunca é executada. Não o inclua no array scripts de angular.json: isso o empacota no build. Com SSR do Angular, index.html continua sendo o local correto. Se você ativar autoCsp, adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao Qwik City?

Adicione a tag a src/root.tsx. Cole-a dentro do body: Não a marque como type="text/partytown": o widget não consegue renderizar em um worker.

Como adiciono o Atria ao React (Vite, Create React App)?

Aplicativos de página única só precisam da tag em index.html. Cole-a antes do fechamento do body (public/index.html no Create React App): Precisa carregá-lo condicionalmente? Use um effect e não o remova durante a limpeza: Mantenha a tag do Atria como um script clássico (sem type="module"), mesmo que sua própria entrada seja um módulo. O Strict Mode do React executa os effects duas vezes durante o desenvolvimento. De qualquer forma, o widget só é iniciado uma vez por página. No TypeScript, declare interface Window { AtriaSettings?: unknown } em um arquivo .d.ts.

Como adiciono o Atria ao Vue?

Adicione a tag a index.html em projetos Vite. Cole-a antes do fechamento do body: O Vue não executa tags nos templates de componentes, então use index.html (ou injete a tag a partir de onMounted). Projetos Vue CLI usam public/index.html.

Como adiciono o Atria ao Svelte (Vite)?

Adicione a tag a index.html. Cole-a antes do fechamento do body: Usa SvelteKit? Consulte o guia do SvelteKit: o arquivo é src/app.html.

Como adiciono o Atria ao Solid, Preact e Lit?

Qualquer app baseado em Vite funciona da mesma forma: uma tag em index.html. Cole-a antes do fechamento do body: Lit e outros apps com web components não exigem nada especial: o widget fica em sua própria shadow root e não entra em conflito com seus componentes.

Como adiciono o Atria ao Ember?

Adicione a tag a app/index.html. Cole-a após {{content-for "body-footer"}}: Com ember-cli-content-security-policy, adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao Ionic e Capacitor?

Funciona em apps híbridos por meio do WebView, com a mesma tag em index.html. Cole-a antes do fechamento do body em src/index.html (Angular) ou index.html (React e Vue): O dispositivo precisa estar conectado: o widget sempre é carregado do Atria, nunca de arquivos empacotados. Se o app definir uma tag de CSP, adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao HTML puro, jQuery e Alpine.js?

Cole a tag em todas as páginas, antes de . Essa é toda a instalação: Um include do servidor ou um partial de rodapé compartilhado mantém a tag em um único lugar. O htmx com hx-boost substitui o body durante a navegação. O botão se conecta novamente automaticamente.

Como adiciono o Atria ao Hugo, Jekyll e Eleventy?

Adicione a tag ao layout base. Hugo: Jekyll: Eleventy: Se você definir uma CSP nos cabeçalhos da hospedagem (_headers no Netlify e Cloudflare Pages, vercel.json), adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao Ruby on Rails (com Turbo)?

Adicione a tag ao layout da aplicação. Coloque-a em para que o Turbo a carregue uma vez e a mantenha entre visitas: Permita o Atria no inicializador da CSP: O Turbo Drive substitui a cada visita. O botão se conecta novamente automaticamente e a conversa continua. Não o fixe com importmap: ele é um script clássico, não um módulo ES.

Como adiciono o Atria ao Laravel (Blade, Livewire, Inertia)?

Adicione a tag ao layout Blade principal. Blade e Livewire: Inertia: adicione-o à visualização raiz, fora de @inertia: O wire:navigate do Livewire substitui o body. data-navigate-once impede que o Livewire execute a tag novamente, e o botão se conecta sozinho. Com spatie/laravel-csp, adicione o Atria às diretivas de script e frame da política.

Como adiciono o Atria ao Django e Flask?

Adicione a tag ao template base. Cole-a antes do fechamento do body: Com django-csp 4, permita o Atria nas configurações: No Flask (Jinja), o procedimento é igual: adicione a tag a templates/base.html. Com Flask-Talisman, adicione o Atria a script-src e frame-src em content_security_policy.

Como adiciono o Atria ao Phoenix (LiveView)?

Adicione a tag ao layout raiz. Cole-a antes do fechamento do body: O LiveView atualiza apenas o próprio contêiner, então a navegação em tempo real nunca afeta o widget. Se você definir uma CSP com put_secure_browser_headers, adicione o Atria a script-src e frame-src.

Como adiciono o Atria ao ASP.NET Core (MVC, Razor Pages, Blazor)?

Adicione a tag ao layout compartilhado ou à página host do Blazor. MVC e Razor Pages usam Views/Shared/_Layout.cshtml (ou Pages/Shared/_Layout.cshtml). Blazor usa Components/App.razor ou wwwroot/index.html. A navegação aprimorada do Blazor atualiza a página. Se o botão for removido, ele se recoloca.

Como adiciono o Atria ao WordPress?

Adicione o script à fila pelo tema ou cole-o usando um plugin de cabeçalho e rodapé. Com um plugin como o WPCode, adicione a tag como snippet global de rodapé. Ou adicione o script à fila pelo tema filho: Passe null como versão, ou o WordPress acrescentará ver= à URL. Não causa problemas, mas gera ruído. Exclua atria dos recursos "atrasar JavaScript", "combinar JS" e similares no WP Rocket, Autoptimize, LiteSpeed Cache, Perfmatters e afins. O Cloudflare Rocket Loader pode reescrever a tag: adicione data-cfasync="false" a ela. Edite um tema filho, não o tema principal, ou a próxima atualização do tema apagará sua alteração.

Como adiciono o Atria ao Shopify?

Adicione a tag a theme.liquid. Em Loja virtual → Temas → … → Editar código, abra layout/theme.liquid e cole a tag antes de : As páginas de checkout não carregam o código do tema, então o chat não é exibido durante a finalização da compra. A troca de tema substitui theme.liquid. Adicione a tag novamente após mudar de tema.

Como adiciono o Atria ao Webflow?

Use o código personalizado para todo o site. Em Configurações do site → Código personalizado, cole a tag no código do rodapé, salve e publique. O código personalizado exige um plano pago do site e só é executado no site publicado, não no Designer.

Como adiciono o Atria ao Wix?

Use Configurações → Código personalizado. Clique em Adicionar código personalizado, cole a tag, escolha Todas as páginas e Carregar código uma vez e defina a posição como Fim do body. O Wix exige um plano premium com domínio conectado para usar código personalizado. Não use o elemento Incorporar HTML: ele isola o código em um iframe pequeno, deixando o botão preso dentro de uma caixa.

Como adiciono o Atria ao Squarespace?

Use Injeção de código. Em Site → Páginas → Ferramentas do site → Injeção de código, cole a tag no rodapé e salve. A Injeção de código está disponível em planos que incluem código personalizado. Blocos de código dentro de uma página só são carregados nela.

Como adiciono o Atria ao Framer?

Use as configurações de código personalizado do site. Em Configurações do site → Geral → Código personalizado, cole a tag em Fim da tag e publique. O botão aparece no site publicado, não na tela de edição.

Como adiciono o Atria ao Ghost?

Use Injeção de código. Em Configurações → Injeção de código, cole a tag no rodapé do site e salve.

Como adiciono o Atria ao HubSpot CMS?

Use o HTML do rodapé do site. Em Configurações → Site → Páginas, cole a tag no HTML do rodapé do site e salve. Também usa o chat do próprio HubSpot? Escolha um: dois botões no mesmo canto vão se sobrepor.

Como adiciono o Atria ao Google Tag Manager?

Adicione uma tag HTML personalizada que seja acionada em todas as páginas. Crie uma tag HTML personalizada com o snippet e o acionador Todas as páginas (ou seu acionador de consentimento) e publique o contêiner. A CSP do seu site precisa permitir o Google Tag Manager e o Atria. Acionadores de mudança de histórico são desnecessários: o widget inicia uma vez por página e permanece ativo durante mudanças de rota.

Desenvolvedores: instale o Atria em qualquer site

Início rápido

O Atria é uma única tag de script clássica. Ela adiciona um botão de suporte no canto da página e abre o chat em um iframe isolado.

No painel administrativo do Atria, abra Agentes, escolha um agente e copie o snippet. Ele já contém o ID do agente (que começa com agt_).
Cole-a imediatamente antes da tag de fechamento </body> em todas as páginas que devem exibir o chat. Um script com defer em <head> também funciona.
index.html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Prefere atributos a parâmetros na URL? data-agent-id funciona da mesma forma.

html

<script src="https://atria.bemagic.online/widget.js" data-agent-id="agt_YOUR_AGENT_ID" defer></script>

Recarregue o site e clique no botão. As mensagens aparecem em tempo real em Admin → Sessões.

Como o widget funciona

Feito para ser um convidado discreto em qualquer página: pequeno, isolado e carregado sob demanda.

O carregador tem cerca de 3,5 kB compactado com gzip e não tem dependências. Ele renderiza o botão em sua própria shadow root (#atria-support), para que seu CSS não o danifique e o CSS dele não afete sua página.
O chat em si é um iframe servido por https://atria.bemagic.online, criado somente quando alguém abre o botão. Nada pesado é carregado antes disso.
Todas as solicitações de rede acontecem dentro do iframe. Sua página só precisa permitir o carregamento do script e a exibição do chat em um frame.
O visitante recebe um ID anônimo armazenado no localStorage do seu site (atria:visitor-id). A conversa aberta e o estado do chat ficam no sessionStorage, para que o chat acompanhe os visitantes entre páginas.
Quando o chat está minimizado, novas respostas aparecem como um indicador de mensagens não lidas no botão.

Identifique visitantes autenticados

Informe ao Atria quem está conversando para que agentes e operadores possam cumprimentar as pessoas pelo nome e ver informações úteis.

Defina window.AtriaSettings em qualquer lugar da página. O valor é lido quando o visitante abre o chat, então você pode defini-lo após o login sem recarregar o widget.

html

<script>
  window.AtriaSettings = {
    visitor: {
      id: "user_8231", // your user ID (string or number)
      name: "Marta Silva",
      email: "marta@example.com",
      metadata: { plan: "Pro", company: "Crumbs Bakery" },
    },
  };
</script>

Política de Segurança de Conteúdo

Se o site enviar um cabeçalho CSP, permita o Atria em duas diretivas. Só isso.

Adicione a origem do Atria a script-src (para carregar o carregador) e frame-src (para exibir o chat). Não é necessário alterar connect-src, style-src ou img-src: os estilos do botão usam folhas de estilo construíveis, que não são bloqueadas por style-src.
http
```
Content-Security-Policy: script-src 'self' https://atria.bemagic.online; frame-src https://atria.bemagic.online;
```
Usa nonces com 'strict-dynamic'? Adicione seu nonce à tag do Atria. O carregador nunca injeta outros scripts.
html
```
<script nonce="{{ nonce }}" src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Aplicativos de página única e transições

O roteamento no cliente, as transições de visualização e as substituições do body são tratados automaticamente.

Carregue o script uma vez no layout raiz ou em index.html. As mudanças de rota em React, Vue, Svelte, Angular e similares não o afetam.
Se um framework substituir todo o <body> (Turbo, htmx boost, transições de visualização do Astro, Livewire wire:navigate, swup ou Barba), o botão será recolocado automaticamente.
Em carregamentos completos da página, a conversa aberta e o estado do painel são restaurados para que os visitantes continuem de onde pararam.

Privacidade e consentimento

O que o widget armazena e quando se comunica com o Atria.

Até que o visitante abra o chat, a única solicitação ao Atria é o carregamento de widget.js. O widget não define cookies no seu site.
Ele armazena um ID anônimo do visitante em localStorage, além do ID da conversa atual e do estado do painel em sessionStorage. Uma sessão só é criada quando o visitante envia a primeira mensagem, junto com a URL da página, o referenciador, o idioma do navegador e o fuso horário.

Se o banner de consentimento exigir aprovação prévia das ferramentas de suporte, injete o script após o consentimento:

function loadAtria() {
  const script = document.createElement("script");
  script.src = "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID";
  script.defer = true;
  document.body.appendChild(script);
}

Solução de problemas

As causas mais comuns, em ordem.

O botão nem aparece? Abra o console. Um erro de CSP mencionando script-src significa que você precisa permitir https://atria.bemagic.online. Sem erros? Verifique se a tag não usa type="module" e se não foi empacotada, combinada ou atrasada por um otimizador.
O botão aparece, mas o painel está em branco? Adicione https://atria.bemagic.online a frame-src (ou child-src / default-src).
O chat informa que o agente está indisponível? O agentId está ausente ou incorreto. Copie o snippet novamente em Admin → Agentes.
Recebe avisos de hidratação do React durante o desenvolvimento? Algo adicionou nós ao <body> antes da hidratação. Carregue o Atria após a hidratação (consulte o guia do seu framework) para eliminar o aviso.
O botão do Atria cobre seu próprio botão flutuante? Ele fica no canto inferior direito, acima de tudo. Mova seu botão ou oculte um deles em telas pequenas.

Meta-frameworks

Next.js (App Router)

Use next/script no layout raiz para que o chat carregue após a hidratação em todas as rotas.

Adicione o script a app/layout.tsx:

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Se você definir cabeçalhos de segurança em next.config.ts, permita o Atria:

next.config.ts

import type { NextConfig } from "next";

const csp = [
  "default-src 'self'",
  "script-src 'self' https://atria.bemagic.online",
  "frame-src https://atria.bemagic.online",
].join("; ");

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [{ key: "Content-Security-Policy", value: csp }],
      },
    ];
  },
};

export default nextConfig;

Usa uma CSP baseada em nonce em proxy.ts (middleware.ts antes do Next.js 16)? Leia o nonce no layout e repasse-o:

app/layout.tsx

import { headers } from "next/headers";
import Script from "next/script";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const nonce = (await headers()).get("x-nonce") ?? undefined;
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID"
          strategy="afterInteractive"
          nonce={nonce}
        />
      </body>
    </html>
  );
}

Next.js (Pages Router)

Carregue-o uma vez em _app usando next/script.

Adicione o script ao lado do componente da página:

pages/_app.tsx

import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

React Router v7 / Remix

Adicione-o a root.tsx. No React 18, carregue-o após a hidratação para evitar avisos.

React 19 (padrão do React Router v7): coloque a tag no body do documento, após <Scripts />.

app/root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
        <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer />
      </body>
    </html>
  );
}

React 18 (Remix v2): carregue-o por um effect para que o React hidrate o documento primeiro.

app/root.tsx

import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    if (document.getElementById("atria-script")) return;
    const script = document.createElement("script");
    script.id = "atria-script";
    script.src = "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID";
    document.body.appendChild(script);
  }, []);

  return <Outlet />;
}

Defina os cabeçalhos CSP em entry.server.tsx (ou em uma exportação headers) e adicione o Atria a script-src e frame-src.

Gatsby

Use <Script> do Gatsby com a estratégia post-hydrate.

Envolva todas as páginas uma vez em gatsby-browser:

gatsby-browser.tsx

import { Script } from "gatsby";

export const wrapPageElement = ({ element }) => (
  <>
    {element}
    <Script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" strategy="post-hydrate" />
  </>
);

Nuxt

Declare o script em nuxt.config.ts para incluí-lo em todas as páginas.

Adicione-o ao head do app, no fim do body:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID",
          defer: true,
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

Usa nuxt-security? Adicione o Atria à CSP:

nuxt.config.ts

export default defineNuxtConfig({
  security: {
    headers: {
      contentSecurityPolicy: {
        "script-src": ["'self'", "'nonce-{{nonce}}'", "https://atria.bemagic.online"],
        "frame-src": ["https://atria.bemagic.online"],
      },
    },
  },
});

SvelteKit

Adicione-o a src/app.html.

Cole a tag antes do fechamento do body:

src/app.html

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
  <script nonce="%sveltekit.nonce%" src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Se você usa kit.csp, adicione o Atria às diretivas:

svelte.config.js

const config = {
  kit: {
    csp: {
      directives: {
        "script-src": ["self", "https://atria.bemagic.online"],
        "frame-src": ["https://atria.bemagic.online"],
      },
    },
  },
};

export default config;

Astro

Adicione-o ao layout base com is:inline.

is:inline instrui o Astro a manter a tag exatamente como foi escrita:

src/layouts/Layout.astro

<html lang="en">
  <body>
    <slot />
    <script is:inline src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
  </body>
</html>

Angular

Adicione-o a src/index.html, não ao template de um componente.

Cole a tag antes do fechamento do body:

src/index.html

<body>
  <app-root></app-root>
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Vai carregá-lo pelo código (por exemplo, após o consentimento)? Execute-o fora da zona do Angular para que os eventos do widget não acionem a detecção de alterações:

this.ngZone.runOutsideAngular(() => {
  const script = document.createElement("script");
  script.src = "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID";
  document.body.appendChild(script);
});

Qwik City

Adicione a tag a src/root.tsx.

Cole-a dentro do body:

src/root.tsx

<body lang="en">
  <RouterOutlet />
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer />
</body>

SolidStart

Adicione a tag ao documento de entrada do servidor.

Cole-a após a raiz do app:

src/entry-server.tsx

<body>
  <div id="app">{children}</div>
  {scripts}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer />
</body>

Bibliotecas de UI e SPAs

React (Vite, Create React App)

Aplicativos de página única só precisam da tag em index.html.

Cole-a antes do fechamento do body (public/index.html no Create React App):

index.html

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Precisa carregá-lo condicionalmente? Use um effect e não o remova durante a limpeza:

tsx

useEffect(() => {
  if (!user || document.getElementById("atria-script")) return;
  window.AtriaSettings = { visitor: { id: user.id, name: user.name } };
  const script = document.createElement("script");
  script.id = "atria-script";
  script.src = "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID";
  document.body.appendChild(script);
}, [user]);

Vue

Adicione a tag a index.html em projetos Vite.

Cole-a antes do fechamento do body:

index.html

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Svelte (Vite)

Adicione a tag a index.html.

Cole-a antes do fechamento do body:

index.html

<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>

Solid, Preact e Lit

Qualquer app baseado em Vite funciona da mesma forma: uma tag em index.html.

Cole-a antes do fechamento do body:

index.html

<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>

Ember

Adicione a tag a app/index.html.

Cole-a após {{content-for "body-footer"}}:

app/index.html

{{content-for "body-footer"}}
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>

Ionic e Capacitor

Funciona em apps híbridos por meio do WebView, com a mesma tag em index.html.

Cole-a antes do fechamento do body em src/index.html (Angular) ou index.html (React e Vue):
index.html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Sites estáticos e documentação

HTML puro, jQuery e Alpine.js

Cole a tag em todas as páginas, antes de </body>.

Essa é toda a instalação:

index.html

<!doctype html>
<html lang="en">
  <body>
    <!-- your page -->
    <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
  </body>
</html>

Hugo, Jekyll e Eleventy

Adicione a tag ao layout base.

Hugo:

layouts/_default/baseof.html

  {{ block "main" . }}{{ end }}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Jekyll:

_layouts/default.html

  {{ content }}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Eleventy:

_includes/base.njk

  {{ content | safe }}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Docusaurus

Registre o script na configuração do site.

Adicione-o a scripts:

docusaurus.config.ts

const config = {
  scripts: [{ src: "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID", defer: true }],
};

export default config;

VitePress

Adicione o script ao head do site.

Adicione-o a head:

.vitepress/config.ts

import { defineConfig } from "vitepress";

export default defineConfig({
  head: [["script", { src: "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID", defer: "" }]],
});

Renderização no servidor

Ruby on Rails (com Turbo)

Adicione a tag ao layout da aplicação.

Coloque-a em <head> para que o Turbo a carregue uma vez e a mantenha entre visitas:
app/views/layouts/application.html.erb
```
<head>
  <%= javascript_include_tag "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID", defer: true, nonce: true %>
</head>
```

Permita o Atria no inicializador da CSP:

config/initializers/content_security_policy.rb

Rails.application.configure do
  config.content_security_policy do |policy|
    policy.script_src :self, "https://atria.bemagic.online"
    policy.frame_src "https://atria.bemagic.online"
  end
end

Laravel (Blade, Livewire, Inertia)

Adicione a tag ao layout Blade principal.

Blade e Livewire:

resources/views/layouts/app.blade.php

<head>
    <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer data-navigate-once></script>
</head>

Inertia: adicione-o à visualização raiz, fora de @inertia:

resources/views/app.blade.php

<body>
    @inertia
    <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Django e Flask

Adicione a tag ao template base.

Cole-a antes do fechamento do body:

templates/base.html

  {% block content %}{% endblock %}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>

Com django-csp 4, permita o Atria nas configurações:

settings.py

CONTENT_SECURITY_POLICY = {
    "DIRECTIVES": {
        "script-src": ["'self'", "https://atria.bemagic.online"],
        "frame-src": ["https://atria.bemagic.online"],
    },
}

Phoenix (LiveView)

Adicione a tag ao layout raiz.

Cole-a antes do fechamento do body:
lib/my_app_web/components/layouts/root.html.heex
```
  {@inner_content}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>
```

ASP.NET Core (MVC, Razor Pages, Blazor)

Adicione a tag ao layout compartilhado ou à página host do Blazor.

MVC e Razor Pages usam Views/Shared/_Layout.cshtml (ou Pages/Shared/_Layout.cshtml). Blazor usa Components/App.razor ou wwwroot/index.html.
Views/Shared/_Layout.cshtml
```
    @RenderBody()
    <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>
```

Criadores de sites e CMS

WordPress

Adicione o script à fila pelo tema ou cole-o usando um plugin de cabeçalho e rodapé.

Com um plugin como o WPCode, adicione a tag como snippet global de rodapé. Ou adicione o script à fila pelo tema filho:

functions.php

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'atria',
        'https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID',
        [],
        null,
        ['strategy' => 'defer', 'in_footer' => true]
    );
});

Shopify

Adicione a tag a theme.liquid.

Em Loja virtual → Temas → … → Editar código, abra layout/theme.liquid e cole a tag antes de </body>:
layout/theme.liquid
```
  {{ content_for_layout }}
  <script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
</body>
```

Webflow

Use o código personalizado para todo o site.

Em Configurações do site → Código personalizado, cole a tag no código do rodapé, salve e publique.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Wix

Use Configurações → Código personalizado.

Clique em Adicionar código personalizado, cole a tag, escolha Todas as páginas e Carregar código uma vez e defina a posição como Fim do body.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Squarespace

Use Injeção de código.

Em Site → Páginas → Ferramentas do site → Injeção de código, cole a tag no rodapé e salve.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Framer

Use as configurações de código personalizado do site.

Em Configurações do site → Geral → Código personalizado, cole a tag em Fim da tag <body> e publique.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Ghost

Use Injeção de código.

Em Configurações → Injeção de código, cole a tag no rodapé do site e salve.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

HubSpot CMS

Use o HTML do rodapé do site.

Em Configurações → Site → Páginas, cole a tag no HTML do rodapé do site e salve.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Google Tag Manager

Adicione uma tag HTML personalizada que seja acionada em todas as páginas.

Crie uma tag HTML personalizada com o snippet e o acionador Todas as páginas (ou seu acionador de consentimento) e publique o contêiner.
html
```
<script src="https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID" defer></script>
```

Pronto quando você estiver.

Crie um agente, copie o snippet e pronto.

Comece com o Atria

Adicione o Atria a qualquer site em um minuto.

Escolha sua tecnologia

Meta-frameworks

Bibliotecas de UI e SPAs

Sites estáticos e documentação

Renderização no servidor

Criadores de sites e CMS

Início rápido

Como o widget funciona

Identifique visitantes autenticados

Política de Segurança de Conteúdo

Aplicativos de página única e transições

Privacidade e consentimento

Solução de problemas

Meta-frameworks

Next.js (App Router)

Next.js (Pages Router)

React Router v7 / Remix

Gatsby

Nuxt

SvelteKit

Astro

Angular

Qwik City

SolidStart

Bibliotecas de UI e SPAs

React (Vite, Create React App)

Vue

Svelte (Vite)

Solid, Preact e Lit

Ember

Ionic e Capacitor

Sites estáticos e documentação

HTML puro, jQuery e Alpine.js

Hugo, Jekyll e Eleventy

Docusaurus

VitePress

Renderização no servidor

Ruby on Rails (com Turbo)

Laravel (Blade, Livewire, Inertia)

Django e Flask

Phoenix (LiveView)

ASP.NET Core (MVC, Razor Pages, Blazor)

Criadores de sites e CMS

WordPress

Shopify

Webflow

Wix

Squarespace

Framer

Ghost

HubSpot CMS

Google Tag Manager

Pronto quando você estiver.