Aetheris Chat
Integration guide

One snippet.
Every platform.

Aetheris Chat ships as a single async-loaded <script> tag. Paste it once, anywhere on your site, and the widget mounts itself in a Shadow DOM — no build step, no framework binding, no CSS collisions. Below, the exact spot to paste it on every common platform.

The universal snippet
HTML
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Replace YOUR_PUBLIC_KEY with the key from your dashboard. The widget loads asynchronously — no impact on your page's first paint.

Pick your platform

Jump to your stack.

No-code platforms

Code projects

No-code platforms

Site builders & CMS.

All of these accept arbitrary script tags through a built-in panel — no plugins required (with one WordPress exception). If your platform isn't listed, look for "custom code," "header / footer scripts," or "tracking code."

WordPress

Easy2 min

Whether you're on a classic theme, a block theme, or Elementor — the easiest path is the WPCode (formerly “Insert Headers and Footers”) plugin.

  1. 1

    Install the WPCode plugin (Plugins → Add new → search “WPCode”).

  2. 2

    Code Snippets → + Add Snippet → Add Your Custom Code (New Snippet).

  3. 3

    Set Code Type to “HTML Snippet”, paste the snippet, set Insertion to “Site Wide Footer”, then toggle Active and Save.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

NoteIf you're on a managed host with code-editing locked down, your hosting provider's “Custom HTML / Tracking code” field works the same way.

Shopify

Easy2 min

Edit the theme layout file directly. Works on every Shopify plan and every theme — including Online Store 2.0 themes.

  1. 1

    Online Store → Themes → click ⋯ next to your live theme → Edit code.

  2. 2

    Open Layout → theme.liquid.

  3. 3

    Find the closing </body> tag near the end. Paste the snippet on the line right before it, then Save.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Wix

Easy3 min

Wix lets you inject custom code from Settings. Requires a paid plan (custom code is gated on Free).

  1. 1

    Wix Editor → Settings → Custom Code.

  2. 2

    Click + Add Custom Code.

  3. 3

    Paste the snippet, name it “Aetheris Chat”, set Add Code to → Body — end, Apply to → All pages, then Apply.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Squarespace

Easy2 min

Squarespace ships with a Code Injection panel built for exactly this. Available on Business plans and above.

  1. 1

    Settings → Advanced → Code Injection.

  2. 2

    Paste the snippet into the Footer field (not Header — keeps the widget out of critical-path render).

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>
  3. 3

    Save and refresh your live site to verify the launcher appears.

Webflow

Easy2 min

Two paths: site-wide via project settings, or single-page via the page settings panel.

  1. 1

    Site Settings → Custom code → Footer code. (For one page only, use the gear icon on the page → Custom Code → Before </body>.)

  2. 2

    Paste the snippet, then Save Changes.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>
  3. 3

    Re-publish the site to push the change to the live domain.

Framer

Easy2 min

Framer's Custom Code panel handles arbitrary script tags cleanly.

  1. 1

    Site Settings → General → Custom Code.

  2. 2

    Paste the snippet into End of <body> tag.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>
  3. 3

    Publish.

Ghost

Easy2 min

Ghost's Code Injection lives in Settings — no theme editing required.

  1. 1

    Settings → Code injection.

  2. 2

    Paste the snippet into Site Footer (NOT Site Header), then Save.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Adobe Experience Manager

AdvancedAsk IT

AEM is enterprise CMS — your platform team typically owns custom scripts. Hand them this section and the snippet.

  1. 1

    Recommended path: add the snippet via a clientlib associated with the site's root template. Create a clientlib at /apps/<your-site>/clientlibs/aetheris-chat with category aetheris.chat, embed an HTML fragment, and inject it via the page template's footer include.

  2. 2

    Faster path (non-prod / single-page): on the target page → Page Properties → Advanced → Configuration → External Style Sheets/Scripts. Paste the snippet there.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>
  3. 3

    If your CSP is locked down, allowlist chat.aetherisinnovations.com in script-src and api.chat.aetherisinnovations.com in connect-src.

NoteAEM dispatcher must allow the static asset request to /widget.js on the publish tier — not usually a problem since it's loaded from a third-party domain, but worth a sanity check.

Code projects

Frameworks & codebases.

For framework-based projects, the rule is the same: get the snippet into the static entry HTML or use the framework's built-in script primitive. Avoid mounting via component lifecycle hooks — that can multi-mount in dev.

Plain HTML / static sites

Easy30 sec

The canonical method. Works on any handwritten HTML, GitHub Pages, S3 + CloudFront, Netlify, Cloudflare Pages — anywhere you control the HTML.

  1. 1

    Paste the snippet directly before the closing </body> tag of every page where you want the widget.

    <script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>
  2. 2

    If you have a shared template / partial / include, put it there once and you're done.

React (Create React App)

Easy1 min

Add the script tag to the static index.html — not to a component. React Strict Mode mounts components twice in dev, which would load the widget twice.

  1. 1

    Open public/index.html.

  2. 2

    Paste the snippet right before </body>. That's it.

    public/index.htmlcode
    // public/index.html — add before </body>
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

NoteDon't use react-helmet or a useEffect to inject the script — those run on every render and can multi-mount the widget. The static index.html is the right place.

Vite + React

Easy1 min

With Vite, the entry HTML is at the project root (not inside public/).

  1. 1

    Open index.html at the project root. Paste the snippet right before </body>.

    index.htmlcode
    <!-- index.html (project root) — add before </body> -->
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Next.js (App Router)

Easy1 min

Use next/script with strategy="afterInteractive" so the widget loads after hydration but doesn't block first paint.

  1. 1

    Edit your root layout.

    app/layout.tsxcode
    // 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://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

NotePages Router users: drop the same <Script /> into pages/_document.tsx or pages/_app.tsx — same strategy.

NoteIf you want the widget on only specific routes, move the <Script /> into that route's layout instead of the root layout.

Vue 3 (Vite)

Easy1 min

Same pattern as Vite + React — the entry HTML is at the project root.

  1. 1

    Open index.html (project root). Paste the snippet right before </body>.

    index.htmlcode
    <!-- public/index.html (Vue 3 + Vite) — add before </body> -->
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Nuxt 3

Easy1 min

Configure the script in nuxt.config.ts so it ships with every page automatically.

  1. 1

    Add the script entry to your Nuxt config.

    nuxt.config.tscode
    // nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY",
          async: true,
        },
      ],
    },
  },
});

Angular

Easy1 min

Edit the application's index.html. Angular's CLI bundles assets but leaves the entry HTML alone.

  1. 1

    Open src/index.html. Paste the snippet before </body>.

    src/index.htmlcode
    <!-- src/index.html — add before </body> -->
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

SvelteKit

Easy1 min

Add to the SvelteKit app shell so it ships across SSR + client.

  1. 1

    Open src/app.html. Paste the snippet inside the <body> tag, right after %sveltekit.body%.

    src/app.htmlcode
    <!-- src/app.html (SvelteKit) — inside the <body> tag, after %sveltekit.body% -->
<script
  src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
  async
></script>

Astro

Easy1 min

Add to the root layout component so every page inherits it.

  1. 1

    Edit your root layout (typically src/layouts/Layout.astro).

    src/layouts/Layout.astrocode
    ---
// src/layouts/Layout.astro
---
<html>
  <body>
    <slot />
    <script
      src="https://chat.aetherisinnovations.com/widget.js?client=YOUR_PUBLIC_KEY"
      async
    ></script>
  </body>
</html>
Common questions

Before you
paste.

Where do I find my public key?
Dashboard → your chatbot → Embed tab. The key starts with ac_ and is safe to expose in client-side HTML — it's scoped to a single chatbot and read-only.
Can I run different chatbots on different pages?
Yes — load each one with its own public key. Each chatbot has its own knowledge base, branding, and lead inbox. Studio plan lets you run 3, Agency lets you run 20.
Will the widget slow down my site?
No measurable impact. The script is loaded async (it doesn't block parsing or first paint), the widget only mounts when a user clicks it open, and the bundle is ~80 KB gzipped. We use Vercel's edge network for global delivery.
Does it conflict with my site's CSS?
Never. The widget renders inside a Shadow DOM — your CSS can't reach into it and ours can't leak out. Tested against Bootstrap, Tailwind, vanilla CSS, and a dozen WordPress themes.
What if I have a Content Security Policy?
Add chat.aetherisinnovations.com to script-src, api.chat.aetherisinnovations.com to connect-src, and (if your widget logo loads from Supabase) your Supabase project domain to img-src.
How do I verify it's working?
Open your site, look for the launcher in the bottom-right corner. Click it. If you see the welcome message you configured, you're live. If nothing appears, open DevTools → Network and confirm widget.js loaded with status 200.
Can I hide the widget on specific pages?
Yes — only include the script on pages you want it on. For most platforms that means scoping the snippet to specific page templates rather than the global footer.
Still stuck?

We'll wire it up
for you.

Email a link to your site and a sentence about what you want the assistant to know. We'll send back a working snippet, ingested knowledge base, and a 10-minute walkthrough video. No charge for paying customers.

Email usStart free trial