# Atria by BeMagic

> Atria is a humanized AI support chat. It answers your customers with warmth, learns your business from your knowledge base, and hands the conversation to a human operator the moment it matters. Embed it on any website with one script tag.

## What Atria does

- An AI support agent answers website visitors in a chat widget, in their own language, using your knowledge base (uploaded documents and edited entries) and the tone you configure.
- When a visitor needs a person, or the agent can't help, it hands the conversation to an online human operator, who sees the full history. Operators can also take over any conversation at any time.
- While chatting, operators get the Atria assistant side by side: it analyzes the conversation, suggests what to do and translates suggested replies, and they can search the knowledge base directly.
- Resolved conversations become knowledge suggestions that the team reviews before they're added, so the agent learns without drifting from its identity.
- Sessions show who the visitor is, the page they're on, their browser and the whole conversation. Idle or finished conversations close on their own.
- The widget is one script tag, works with any frontend framework, and keeps the conversation across page loads.

## See it in action

Recorded from the product on a demo coffee shop, Lumen Coffee:

- [Video: A visitor asks, the agent answers](https://atria.bemagic.online/showcase/visitor-chat.mp4): A visitor on a coffee shop's website opens the Atria chat and asks about shipping. The agent greets her by name and answers from the shop's knowledge base. She minimizes the chat, and the next reply shows up as an unread badge on the launcher.
- [Video: A person steps in with the whole story](https://atria.bemagic.online/showcase/handoff.mp4): A visitor on a phone asks for a person. The agent helps right away and calls the team. An operator sees the request, takes over the conversation, asks Atria for the next step, and replies. The visitor sees who joined and gets the answer in the same chat.
- [Screenshot: Atria at your operator's side](https://atria.bemagic.online/showcase/operator-console.png): Search what the agent knows, get a ready-to-send answer with its sources, and a suggested next step for this exact conversation.
- [Screenshot: Learns from chats your team solved](https://atria.bemagic.online/showcase/admin-learning.png): When a person solves something the agent didn't know, Atria drafts it as knowledge. You review and edit it before the agent ever uses it.
- [Screenshot: Know who you're talking to](https://atria.bemagic.online/showcase/admin-sessions.png): Every session shows the visitor, the page they were on, their device, and how the conversation ended.
- [Screenshot: Teach it what it knows](https://atria.bemagic.online/showcase/admin-agent.png): Upload documents or write answers. Atria organizes them by subject and looks up the right one before every reply.
- [Screenshot: Your support at a glance](https://atria.bemagic.online/showcase/admin-agents.png): Agents, what each one knows, what's waiting for review, and who's talking to them right now.
- [Screenshot: Bring your team](https://atria.bemagic.online/showcase/admin-team.png): Invite operators. They see conversations and step in, while agents, knowledge and settings stay with you.

## Install

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

Replace `agt_YOUR_AGENT_ID` with the agent ID shown in the Atria admin (Agents → snippet).

## Docs

- [Developers: install Atria on any website](https://atria.bemagic.online/developers): framework guides, CSP, SPAs, privacy and troubleshooting
- [Full docs as Markdown](https://atria.bemagic.online/llms-full.txt)
- [Quick start](https://atria.bemagic.online/developers#quick-start): Atria is one classic script tag. It adds a support launcher to the corner of your page and opens the chat in an isolated iframe.
- [How the widget works](https://atria.bemagic.online/developers#how-it-works): Built to be a polite guest on any page: tiny, isolated, and lazy.
- [Identify signed-in visitors](https://atria.bemagic.online/developers#identify-visitors): Tell Atria who is chatting, so agents and operators greet people by name and see useful context.
- [Content Security Policy](https://atria.bemagic.online/developers#content-security-policy): If your site sends a CSP header, allow Atria in two directives. That's all.
- [Single-page apps and page transitions](https://atria.bemagic.online/developers#single-page-apps): Client-side routing, view transitions and body swaps are handled for you.
- [Privacy and consent](https://atria.bemagic.online/developers#privacy): What the widget stores, and when it talks to Atria.
- [Troubleshooting](https://atria.bemagic.online/developers#troubleshooting): The usual suspects, in order.

## Framework guides

### Meta-frameworks

- [Next.js (App Router)](https://atria.bemagic.online/developers#nextjs): Use next/script in the root layout, so the chat loads after hydration on every route.
- [Next.js (Pages Router)](https://atria.bemagic.online/developers#nextjs-pages): Load it once in _app with next/script.
- [React Router v7 / Remix](https://atria.bemagic.online/developers#remix): Add it to root.tsx. On React 18, load it after hydration to avoid hydration warnings.
- [Gatsby](https://atria.bemagic.online/developers#gatsby): Use Gatsby's <Script> with the post-hydrate strategy.
- [Nuxt](https://atria.bemagic.online/developers#nuxt): Declare the script in nuxt.config.ts, so every page gets it.
- [SvelteKit](https://atria.bemagic.online/developers#sveltekit): Add it to src/app.html.
- [Astro](https://atria.bemagic.online/developers#astro): Add it to your base layout with is:inline.
- [Angular](https://atria.bemagic.online/developers#angular): Add it to src/index.html, not to a component template.
- [Qwik City](https://atria.bemagic.online/developers#qwik): Add the tag to src/root.tsx.
- [SolidStart](https://atria.bemagic.online/developers#solidstart): Add the tag to the server entry document.

### UI libraries & SPAs

- [React (Vite, Create React App)](https://atria.bemagic.online/developers#react): Single-page apps only need the tag in index.html.
- [Vue](https://atria.bemagic.online/developers#vue): Add the tag to index.html in Vite projects.
- [Svelte (Vite)](https://atria.bemagic.online/developers#svelte): Add the tag to index.html.
- [Solid, Preact and Lit](https://atria.bemagic.online/developers#solid): Any Vite-based app works the same way: one tag in index.html.
- [Ember](https://atria.bemagic.online/developers#ember): Add the tag to app/index.html.
- [Ionic and Capacitor](https://atria.bemagic.online/developers#ionic): Works in hybrid apps through the WebView, with the same index.html tag.

### Static sites & docs

- [Plain HTML, jQuery and Alpine.js](https://atria.bemagic.online/developers#html): Paste the tag on every page, before </body>.
- [Hugo, Jekyll and Eleventy](https://atria.bemagic.online/developers#static-site-generators): Add the tag to your base layout.
- [Docusaurus](https://atria.bemagic.online/developers#docusaurus): Register the script in the site config.
- [VitePress](https://atria.bemagic.online/developers#vitepress): Add the script to the site head.

### Server-rendered

- [Ruby on Rails (with Turbo)](https://atria.bemagic.online/developers#rails): Add the tag to your application layout.
- [Laravel (Blade, Livewire, Inertia)](https://atria.bemagic.online/developers#laravel): Add the tag to your main Blade layout.
- [Django and Flask](https://atria.bemagic.online/developers#django): Add the tag to your base template.
- [Phoenix (LiveView)](https://atria.bemagic.online/developers#phoenix): Add the tag to the root layout.
- [ASP.NET Core (MVC, Razor Pages, Blazor)](https://atria.bemagic.online/developers#aspnet): Add the tag to the shared layout or the Blazor host page.

### Website builders & CMS

- [WordPress](https://atria.bemagic.online/developers#wordpress): Enqueue the script from your theme, or paste it with a header and footer plugin.
- [Shopify](https://atria.bemagic.online/developers#shopify): Add the tag to theme.liquid.
- [Webflow](https://atria.bemagic.online/developers#webflow): Use site-wide custom code.
- [Wix](https://atria.bemagic.online/developers#wix): Use Settings → Custom code.
- [Squarespace](https://atria.bemagic.online/developers#squarespace): Use Code Injection.
- [Framer](https://atria.bemagic.online/developers#framer): Use the site's custom code settings.
- [Ghost](https://atria.bemagic.online/developers#ghost): Use Code injection.
- [HubSpot CMS](https://atria.bemagic.online/developers#hubspot): Use the site footer HTML.
- [Google Tag Manager](https://atria.bemagic.online/developers#google-tag-manager): Add a Custom HTML tag that fires on all pages.

## Optional

- [Product](https://atria.bemagic.online/)
- [Get started](https://atria.bemagic.online/admin/signup)