1. Drop in the script
Paste this just before the closing </body> tag of your site, or in your CMS's "custom code" block. That's it.
<script src="https://praatbox.com/widget.js" data-partner="px_4f9c2a" data-color="#1b6e3b" data-locale="auto" async></script>
2. Configure with data attributes
data-partner— required. Your workspace ID, copy it from Settings → Widget.data-color— accent color for the widget. Hex or oklch.data-locale— "auto" detects from browser, or set "en" / "nl" / "de" / etc.data-position— "right" (default) or "left".data-noanalytics— set to disable open-counting.
3. Identify users (optional)
If you know who's logged in, tell Praatbox — replies get personalized and analytics get richer.
Praatbox.identify({
id: "u_482",
email: "[email protected]",
plan: "professional"
});4. Listen for events
The widget fires events for opens, messages, and handoffs. Wire them into your analytics.
Praatbox.on("handoff", (conv) => {
analytics.track("chat_handoff", conv);
});5. Style it
The widget renders in a shadow DOM — your site's CSS can't accidentally bleed in. Use the dashboard to change color, position, greeting, and avatar.
Frameworks
Drop-in guides for popular setups: