What you'll need

An Appalix account on any plan
A Web Widget integration created in your Appalix dashboard
Ability to add a <script> tag to your site (any plan on any website builder)

Step 1 — Create a Web Widget integration

In Appalix, go to Integrations → Add integration and choose Web Widget.
Name the integration, select the bot you want to power it, and set Allowed origins:
- Enter your domain (e.g. https://mysite.com) to restrict chat to your site only.
- Enter * to allow any origin (useful during development).
Click Create integration.
Click the integration name to open the Setup guide — you'll find your embed snippet there.

Step 2 — Copy the embed snippet

Your personalised snippet looks like this (your integration ID will be different):

<script>
  window.AppalixConfig = { integrationId: 'your-integration-id' };
</script>
<script src="https://api.appalix.ai/widget.js" async></script>

Copy it from the Setup guide (it has your real integration ID pre-filled).

Step 3 — Add it to your site

Plain HTML

Paste the snippet just before the closing </body> tag in your HTML file:

  <!-- Appalix Chat Widget -->
  <script>
    window.AppalixConfig = { integrationId: 'your-integration-id' };
  </script>
  <script src="https://api.appalix.ai/widget.js" async></script>
</body>

Next.js / React

Add the snippet to your root layout using Next.js's <Script> component:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="appalix-config" strategy="beforeInteractive">
          {`window.AppalixConfig = { integrationId: 'your-integration-id' };`}
        </Script>
        <Script src="https://api.appalix.ai/widget.js" strategy="lazyOnload" />
      </body>
    </html>
  )
}

WordPress (without the plugin)

Install a plugin like Insert Headers and Footers or Header Footer Code Manager, then paste the snippet into the Footer section.

Webflow

In Webflow, go to Site Settings → Custom Code → Footer Code and paste the snippet.

Squarespace

Go to Settings → Advanced → Code Injection → Footer and paste the snippet.

Framer

Open Site Settings → General → Custom Code → End of <body> tag and paste the snippet.

Shopify

In the Shopify theme editor, open theme.liquid and paste the snippet just before </body>.

Step 4 — Verify

Open your website in a browser. You should see the Appalix chat bubble in the bottom-right corner.
Click the bubble and send a message. The bot should reply within a couple of seconds.
In Appalix, go to Conversations — your test message should appear with platform tagged as Web Widget.

Optional configuration

You can pass additional options via window.AppalixConfig:

window.AppalixConfig = {
  integrationId: 'your-integration-id',
  // Optional: identify a logged-in user
  userId: 'user_123',
  userEmail: 'jane@company.com',
};

When userEmail is set, lead capture will use this email automatically — no need for the visitor to type it.

Tips & best practices

Restrict allowed origins — set your production domain in the integration's Allowed Origins field to prevent other sites from using your widget quota.
Use lazyOnload in Next.js — this loads the widget only after the page is interactive, keeping your Core Web Vitals scores unaffected.
Train the bot on your site content — add your site URL as a knowledge source in Appalix and enable RAG on the bot so it answers questions from your actual pages.
Multiple pages, one snippet — one integration covers your entire site. Create a second integration only if you want different bots or settings on different sites.

🔌

Add a chat widget to your site today

Create a Web Widget integration, copy your snippet, and your AI bot will be live in under 5 minutes.

Go to Integrations →

How to Embed the Appalix Chat Widget on Any Website