Embed Website Chat Widget — Wiretalk Docs

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',
    // Optional: pass logged-in visitor details for pre-chat auto-fill
    // visitor: { name: 'Jane Doe', email: 'jane@example.com', phone: '9876543210' }
  };
</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',
            // visitor: { name: 'Jane Doe', email: 'jane@example.com', phone: '9876543210' }
          };`}
        </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',
    // Optional: pass logged-in visitor details for pre-chat auto-fill
    // visitor: { name: 'Jane Doe', email: 'jane@example.com', phone: '9876543210' }
  };
</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',
    // Optional: pass logged-in visitor details for pre-chat auto-fill
    // visitor: { name: 'Jane Doe', email: 'jane@example.com', phone: '9876543210' }
  };
</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`.
`visitor`	No	Object with `name`, `email`, and/or `phone` to pre-fill the pre-chat form for logged-in users.
`name`, `email`, `phone`	No	Flat aliases for visitor identity (same effect as `visitor.*`).
`visitorName`, `visitorEmail`, `visitorPhone`	No	Alternative flat keys supported by the embed bootstrap.

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

Pre-fill visitor identity

If your website already knows who is browsing — for example a logged-in customer portal — pass their details in window.wiretalkConfig. Wiretalk stores them on the visitor profile and auto-fills matching pre-chat fields so visitors do not re-enter information they already provided on your site.

logged-in-user.html

window.wiretalkConfig = {
  widgetKey: 'YOUR_WIDGET_KEY',
  apiBase: 'https://wiretalk.tech/api',
  locale: 'en',
  visitor: {
    name: 'Jane Doe',
    email: 'jane@example.com',
    phone: '9876543210'
  }
};

Values are sent on widget init as visitor_name, visitor_email, and visitor_phone
URL query params ?visitor_name=…&visitor_email=…&visitor_phone=… are also supported for quick tests
After a successful data lookup visitor login, profile fields from your database can auto-fill pre-chat fields too
Pre-filled name and email are also reused when visitors tap Book a demo — see appointment booking

Tip: In Laravel or other server-rendered apps, output the visitor object from the authenticated user record in your layout template.

Preview before going live

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

https://www.wiretalk.tech/embed/YOUR_WIDGET_KEY

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

Android & iOS apps (no native SDK)

Wiretalk ships official WebView SDKs for Android, iOS, React Native, and Flutter (sdk/ in your install). They load the full chat UI via the popout URL — same features as the website widget, with a JavaScript bridge for unread badges and visitor identity.

Add app:com.example.app to Allowed Domains (your bundle ID)
Load https://www.wiretalk.tech/popout/YOUR_WIDGET_KEY?platform=android&app_id=com.example.app in a WebView
Copy platform snippets from Widget Settings → Embed → Platform tabs

Full mobile WebView guide →

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 Book a demo (in-chat appointments) Mobile apps (WebView) Embed agent inbox in your app Widget not showing?