Add the Synaptiq chat widget to any website with a single script tag.
The Synaptiq chat widget is a lightweight JavaScript snippet that loads asynchronously on your page. It does not affect page load speed, works on any website, and requires no build tools or dependencies.
Add the following script tag to any HTML page where you want the chat widget to appear. Place it just before the closing </body> tag:
<script
src="https://synaptiqintel.com/widget.js"
data-tenant="YOUR_TENANT_ID"
></script>
Replace YOUR_TENANT_ID with your actual Tenant ID, which you can find in the Synaptiq dashboard under Settings > General > Tenant ID. It looks like tn_a1b2c3d4e5f6.
Once added, a chat bubble appears in the bottom-right corner of the page. Visitors click it to open a conversation with your AI agent.
You can customize the widget's behavior using HTML data attributes on the script tag. Every attribute is optional except data-tenant.
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| data-tenant | string | (required) | Your unique Tenant ID |
| data-position | string | "bottom-right" | Widget placement: "bottom-right", "bottom-left", "top-right", or "top-left" |
| data-theme | string | "light" | Color theme: "light", "dark", or "auto" (follows system preference) |
| data-greeting | string | Dashboard setting | Override the default greeting message for this specific page |
| data-color | string | "#6366f1" | Primary accent color as a hex code |
| data-delay | number | 0 | Delay in milliseconds before the widget appears after page load |
| data-open | boolean | false | If "true", the chat window opens automatically on page load |
| data-hide-launcher | boolean | false | If "true", hides the chat bubble (use the JavaScript API to open programmatically) |
| data-page-context | string | none | Tell the AI what page the visitor is on (e.g., "pricing", "features", "homepage") so it can tailor the conversation |
<script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
data-position="bottom-left"
data-theme="dark"
data-greeting="Hi! Looking for pricing details? I can help."
data-color="#0ea5e9"
data-delay="2000"
data-page-context="pricing"
></script>
This configuration places the widget in the bottom-left corner with a dark theme, sky-blue accent color, a pricing-specific greeting, and a 2-second delay before appearing.
For plain HTML websites, paste the script tag directly into your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<!-- Your page content -->
<!-- Synaptiq Widget -->
<script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
></script>
</body>
</html>
If you want the widget on every page, add the script to your shared layout or footer template.
For React-based applications, use the next/script component (Next.js) or a useEffect hook (plain React) to load the widget.
Next.js (App Router) — Recommended
Add the widget to your root layout so it appears on every page:
// 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://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
strategy="lazyOnload"
/>
</body>
</html>
);
}
The strategy="lazyOnload" setting ensures the widget loads after the page is fully interactive, so it never blocks rendering.
Next.js (Pages Router)
Add it to your _app.tsx or _document.tsx:
// pages/_app.tsx
import Script from "next/script";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
strategy="lazyOnload"
/>
</>
);
}
Plain React (Vite, CRA, etc.)
Use a useEffect hook to inject the script at runtime:
// components/SynaptiqWidget.tsx
import { useEffect } from "react";
export function SynaptiqWidget() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://synaptiqintel.com/widget.js";
script.setAttribute("data-tenant", "tn_a1b2c3d4e5f6");
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
}
Then render <SynaptiqWidget /> in your app's root component.
You have three options for adding Synaptiq to WordPress, from simplest to most flexible:
Option A: Use a Plugin (Easiest)
Option B: Edit Your Theme's Footer
footer.php from the right sidebar</body> tagWarning: Theme updates will overwrite your changes. Use a child theme or Option A to avoid this.
Option C: Add via functions.php
Add the following to your theme's functions.php file:
function synaptiq_enqueue_widget() {
wp_enqueue_script(
'synaptiq-widget',
'https://synaptiqintel.com/widget.js',
array(),
null,
true
);
wp_script_add_data('synaptiq-widget', 'data-tenant', 'tn_a1b2c3d4e5f6');
}
add_action('wp_enqueue_scripts', 'synaptiq_enqueue_widget');
theme.liquid file under Layout</body>:<script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
></script>
The widget will now appear on every page of your Shopify store, including product pages, the cart, and checkout (if your plan supports checkout customization).
Tip: If you only want the widget on certain pages, wrap it in a Liquid conditional:
{% if template == 'index' or template == 'product' %}
<script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
></script>
{% endif %}
<script
src="https://synaptiqintel.com/widget.js"
data-tenant="tn_a1b2c3d4e5f6"
></script>
To add the widget to a single page instead of the entire site, open the page's settings (gear icon) and paste the script into that page's Before </body> tag field.
The widget exposes a global window.Synaptiq object that you can use to control it programmatically. This is useful for opening the widget in response to a button click, passing visitor data, or triggering events.
// Open the chat window
window.Synaptiq.open();
// Close the chat window
window.Synaptiq.close();
// Toggle open/closed
window.Synaptiq.toggle();
If you already know who the visitor is (they are logged in, or you captured their email in a form), pass that data to the widget so the AI agent does not ask for it again:
window.Synaptiq.identify({
email: "jane@acme.com",
name: "Jane Smith",
company: "Acme Corp",
plan: "Enterprise",
});
Identified visitors show up in your leads dashboard with pre-filled fields, and the AI agent adjusts its questions accordingly.
Dynamically tell the agent what page the visitor is on:
window.Synaptiq.setContext({
page: "pricing",
product: "Enterprise Plan",
referrer: "google-ads-campaign-q1",
});
The AI agent uses this context to tailor its opening message and qualification strategy.
window.Synaptiq.on("lead:qualified", (lead) => {
console.log("New qualified lead:", lead.email);
// Fire your own analytics event, redirect, etc.
});
window.Synaptiq.on("conversation:started", () => {
console.log("Visitor started a conversation");
});
window.Synaptiq.on("widget:opened", () => {
console.log("Widget was opened");
});
After adding the script tag, verify the widget is working:
window.Synaptiq — if it returns an object, the widget loaded successfully/admin/conversations to confirm your test conversation appearsdata-greeting attribute overrides the dashboard setting. Remove it if you want to use the dashboard greeting.data-hide-launcher attribute combined with the JavaScript API.Was this page helpful?