Lägg till Atria på valfri webbplats på en minut.

Använd next/script i rotlayouten så att chatten läses in efter hydrering på alla rutter.

1. Lägg till skriptet i 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>
     );
   }

2. Om du anger säkerhetsheaders i next.config.ts tillåter du Atria:

   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;

3. Använder du en nonce-baserad CSP från proxy.ts (middleware.ts före Next.js 16)? Läs av nonce-värdet i layouten och skicka det vidare:

   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>
     );
   }

Läs in den en gång i _app med next/script.

1. Lägg till skriptet bredvid sidkomponenten:

   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"
         />
       </>
     );
   }

Lägg till den i root.tsx. I React 18 läser du in den efter hydrering för att undvika varningar.

1. React 19 (standard i React Router v7): placera taggen i dokumentets body, efter <Scripts />.

   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>
     );
   }

2. React 18 (Remix v2): läs in den från en effect så att React först hinner hydrera dokumentet.

   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 />;
   }

3. Ange CSP-headers i entry.server.tsx (eller en headers-export) och lägg till Atria i script-src och frame-src.

Använd Gatsby's <Script> med strategin post-hydrate.

1. Omslut varje sida en gång i gatsby-browser:

   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" />
     </>
   );

Deklarera skriptet i nuxt.config.ts så att det används på alla sidor.

1. Lägg till den i appens head, i slutet av body:

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

2. Använder du nuxt-security? Lägg till Atria i dess CSP:

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

Lägg till den i src/app.html.

1. Klistra in taggen före den avslutande body-taggen:

   <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>

2. Om du använder kit.csp lägger du till Atria i direktiven:

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

Lägg till den i baslayouten med is:inline.

1. is:inline talar om för Astro att lämna taggen precis som den är skriven:

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

Lägg till den i src/index.html, inte i en komponentmall.

1. Klistra in taggen före den avslutande body-taggen:

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

2. Läser du in den från kod (till exempel efter samtycke)? Kör den utanför Angular-zonen så att widgetens händelser inte utlöser ändringsdetektering:

   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);
   });

Lägg till taggen i src/root.tsx.

1. Klistra in den i body:

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

Lägg till taggen i serverns inmatningsdokument.

1. Klistra in den efter appens rot:

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

Ensidiga appar behöver bara taggen i index.html.

1. Klistra in den före den avslutande body-taggen (public/index.html i Create React App):

   <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>

2. Behöver du läsa in den villkorligt? Använd en effect och ta inte bort den vid cleanup:

   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]);

Lägg till taggen i index.html i Vite-projekt.

1. Klistra in den före den avslutande body-taggen:

   <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>

Lägg till taggen i index.html.

1. Klistra in den före den avslutande body-taggen:

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

Alla Vite-baserade appar fungerar på samma sätt: en tagg i index.html.

1. Klistra in den före den avslutande body-taggen:

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

Lägg till taggen i app/index.html.

1. Klistra in den efter {{content-for "body-footer"}}:

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

Fungerar i hybridappar via WebView med samma tagg i index.html.

1. Klistra in den före den avslutande body-taggen i src/index.html (Angular) eller index.html (React och Vue):

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

Klistra in taggen på varje sida, före </body>.

1. Det är hela installationen:

   <!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>

Lägg till taggen i baslayouten.

1. Hugo:

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

2. Jekyll:

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

3. Eleventy:

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

Registrera skriptet i webbplatsens konfiguration.

1. Lägg till den i scripts:

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

Lägg till skriptet i webbplatsens head.

1. Lägg till den i head:

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

Lägg till taggen i applikationens layout.

1. Placera den i <head> så att Turbo läser in den en gång och behåller den mellan besök:

   <head>
     <%= javascript_include_tag "https://atria.bemagic.online/widget.js?agentId=agt_YOUR_AGENT_ID", defer: true, nonce: true %>
   </head>

2. Tillåt Atria i CSP-initialiseraren:

   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

Lägg till taggen i din huvudsakliga Blade-layout.

1. Blade och Livewire:

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

2. Inertia: lägg till den i rotvyn, utanför @inertia:

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

Lägg till taggen i basmallen.

1. Klistra in den före den avslutande body-taggen:

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

2. Med django-csp 4 tillåter du Atria i inställningarna:

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

Lägg till taggen i rotlayouten.

1. Klistra in den före den avslutande body-taggen:

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

Lägg till taggen i den delade layouten eller Blazors värdsida.

1. MVC och Razor Pages använder Views/Shared/_Layout.cshtml (eller Pages/Shared/_Layout.cshtml). Blazor använder Components/App.razor eller wwwroot/index.html.

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

Köa skriptet från ditt tema eller klistra in det med ett header- och footer-plugin.

1. Med ett plugin som WPCode lägger du till taggen som en global kodsnutt i sidfoten. Du kan också köa den från ditt barntema:

   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]
       );
   });

Lägg till taggen i theme.liquid.

1. Öppna layout/theme.liquid via Webbshop → Teman → … → Redigera kod och klistra in taggen före </body>:

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

Använd anpassad kod för hela webbplatsen.

1. Gå till Webbplatsinställningar → Anpassad kod, klistra in taggen i sidfotens kod, spara och publicera.

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

Använd Inställningar → Anpassad kod.

1. Klicka på Lägg till anpassad kod, klistra in taggen, välj Alla sidor och Läs in kod en gång och placera den i slutet av body.

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

Använd Kodinjektion.

1. Gå till Webbplats → Sidor → Webbplatsverktyg → Kodinjektion, klistra in taggen i sidfoten och spara.

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

Använd webbplatsens inställningar för anpassad kod.

1. Gå till Webbplatsinställningar → Allmänt → Anpassad kod, klistra in taggen vid slutet av <body>-taggen och publicera.

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

Använd Kodinjektion.

1. Gå till Inställningar → Kodinjektion, klistra in taggen i webbplatsens sidfot och spara.

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

Använd HTML för webbplatsens sidfot.

1. Gå till Inställningar → Webbplats → Sidor, klistra in taggen i webbplatsens sidfots-HTML och spara.

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

Lägg till en anpassad HTML-tagg som aktiveras på alla sidor.

1. Skapa en anpassad HTML-tagg med kodsnutten och utlösaren Alla sidor (eller din samtyckesutlösare) och publicera sedan behållaren.

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