Reality Twin
Get started

Embed the AI Twin chat widget on any website

Install the Reality Twin chat widget with one script tag, then customise position, colour, open-state and framework integration.

Updated June 25, 2026 7 min read

The Reality Twin chat widget is a single async script tag that loads a floating chat bubble anchored to a corner of your page. It is fully self-contained: no iframe conflicts, no dependencies, no build step. This guide covers installation, customisation and framework-specific tips for WordPress, Shopify, Webflow, Next.js, HubSpot CMS and more.

The base snippet

Find your Company ID on the Twin screen in the dashboard, then paste the snippet before the closing </body> tag on any page you want the widget to appear.

<script async
  src="https://realitytwin.io/api/public/embed/YOUR_COMPANY_ID"
  data-position="bottom-right"
  data-primary-color="#111827"
  data-open-on-load="false"
></script>

The widget script is ~18 KB gzipped, loads asynchronously, and never blocks page rendering.

Configuration options

  • data-position — bottom-right (default), bottom-left, or custom offsets with data-offset-x / data-offset-y.
  • data-primary-color — any hex, matches your brand accent.
  • data-open-on-load — set to true to open the panel automatically 3 seconds after page load.
  • data-greeting — override the default greeting for this page (e.g. a pricing-page specific opener).
  • data-context — a JSON blob passed to the twin as page context (page title, product SKU, user role).

Framework-specific installation

WordPress

Use a Custom HTML block in the footer widget area, or paste into your theme's footer.php before </body>. Popular header/footer plugins (WPCode, Insert Headers and Footers) also work.

Shopify

Open Online Store → Themes → Edit code → theme.liquid. Paste the snippet directly before the closing </body> tag.

Webflow

Project settings → Custom code → Footer code. Paste and publish.

Next.js (App Router)

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://realitytwin.io/api/public/embed/YOUR_COMPANY_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

HubSpot CMS

Settings → Website → Pages → Site header and footer HTML → Site footer HTML.

Squarespace / Wix

Both support custom footer code injection. Paste the snippet into the site-wide footer code block.

Restrict where the widget can render

By default the widget only initialises on domains you allow-list. Open Twin → Settings → Domains and add your production and staging hostnames. This prevents the widget from appearing on scraped copies of your site.

Content Security Policy (CSP)

If your site sends a strict CSP, add the following to allow the widget to load and connect:

script-src 'self' https://realitytwin.io;
connect-src 'self' https://realitytwin.io wss://realitytwin.io;
frame-src https://realitytwin.io;
img-src 'self' https://realitytwin.io data:;

Programmatic control

The widget exposes a global window.RealityTwin object once loaded:

window.RealityTwin.open();
window.RealityTwin.close();
window.RealityTwin.setContext({ user: { id: "u_123", plan: "pro" } });
window.RealityTwin.on("lead", (lead) => console.log(lead));

Accessibility

The widget ships with keyboard navigation, ARIA labels, focus trapping inside the open panel, and honours prefers-reduced-motion. Contrast is verified against WCAG AA at every colour you configure.

Frequently asked questions

Does the widget slow down my site?

No. It loads async after the main page paint, adds ~18 KB gzipped, and has no impact on Core Web Vitals in our own tests.

Can I hide the widget on certain pages?

Yes — either omit the script tag on those pages, or set data-hide-on to a comma-separated list of URL patterns.

Can I use my own chat UI instead of the widget?

Yes on Pro and above. Use the /api/v1/chat REST endpoint to build a fully custom UI while Reality Twin handles the AI.

Does the widget appear on mobile?

Yes, with a mobile-optimised layout that expands to full-screen when opened.

Related in Getting started

Did this article solve your problem?

If not, email us — a human on the founding team replies, usually within a business day.