Embed Chat Widget

Before you start: Sign in to the agent dashboard, open Widget Settings → Embed Code, and copy your widget key (wk_…).

Standard HTML websites

Paste this snippet immediately before the closing </body> tag on every page where chat should appear.

embed.html

<!-- Wiretalk Chat Widget -->
<script>
  window.wiretalkConfig = {
    widgetKey: 'YOUR_WIDGET_KEY',
    apiBase: 'https://wiretalk.tech/api',
    locale: 'en'
  };
</script>
<script type="module" src="https://wiretalk.tech/build/assets/embed.js" defer></script>

1

Replace YOUR_WIDGET_KEY with your key from the dashboard.

2

Deploy and open your site — the green chat bubble appears bottom-right.

3

Test by sending a message; it appears in the agent inbox instantly.

Framework & CMS guides

Add the config script and module loader in your root layout. Use lazyOnload so the widget does not block page paint.

layout.tsx

// app/layout.tsx or pages/_document.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="wiretalk-config" strategy="beforeInteractive">
          {`window.wiretalkConfig = {
            widgetKey: 'YOUR_WIDGET_KEY',
            apiBase: 'https://wiretalk.tech/api',
            locale: 'en'
          };`}
        </Script>
        <Script src="https://wiretalk.tech/build/assets/embed.js" type="module" strategy="lazyOnload" />
      </body>
    </html>
  );
}

Paste the HTML snippet in your theme footer, or use a plugin like Insert Headers and Footers.

footer.php

# Appearance → Theme File Editor → footer.php (before </body>)

<!-- Wiretalk Chat Widget -->
<script>
  window.wiretalkConfig = {
    widgetKey: 'YOUR_WIDGET_KEY',
    apiBase: 'https://wiretalk.tech/api',
    locale: 'en'
  };
</script>
<script type="module" src="https://wiretalk.tech/build/assets/embed.js" defer></script>

Shopify Admin → Online Store → Themes → Edit code → theme.liquid. Paste before </body>.

theme.liquid

<!-- Wiretalk Chat Widget -->
<script>
  window.wiretalkConfig = {
    widgetKey: 'YOUR_WIDGET_KEY',
    apiBase: 'https://wiretalk.tech/api',
    locale: 'en'
  };
</script>
<script type="module" src="https://wiretalk.tech/build/assets/embed.js" defer></script>

Configuration options

Option	Required	Description
`widgetKey`	Yes	Your site key from Widget Settings (`wk_…`).
`apiBase`	Yes	Wiretalk API URL — use `https://wiretalk.tech/api` in production.
`locale`	No	Widget language code (`en`, `hi`, etc.). Default: `en`.

The script URL must point to your Wiretalk CDN: https://wiretalk.tech/build/assets/embed.js

Preview before going live

Use the built-in demo page to test your widget key without editing your production site:

https://wiretalk.tech/embed/YOUR_WIDGET_KEY

Or click Preview widget ↗ in Widget Settings inside the dashboard.

Allowed domains

For security, the widget only loads on domains you whitelist in Widget Settings → Allowed domains.

Add example.com (no protocol, no trailing slash)
Add localhost for local testing
Subdomains must be added separately unless you use a wildcard pattern supported in settings

Next steps

Customize colors & pre-chat form Embed agent inbox in your app Widget not showing?