Get Praatbox live in three minutes.

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://app.praatbox.com/widget.js"
  data-license="px_4f9c2a"
  data-color="#1b6e3b"
  data-position="bottom-right"
  async></script>

2. Configure with data attributes

• data-license — required. Your license ID, copy it from Settings → Widget. data-partner still works as a legacy alias.
• data-color — accent color for the widget. Any CSS color.
• data-position — "bottom-right" (default) or "bottom-left".
• data-auto-open — set to "true" to open the panel automatically on load.

The widget's language, greeting, and avatar are set in the dashboard (Settings → Widget), not via the script tag — so you can change them without touching your site's code.

3. Control it from JavaScript (optional)

Once the script loads it exposes a small global, window.PraatboxChat, so you can open or close the panel from your own buttons.

// The widget exposes a small global once it loads.
window.PraatboxChat.open();   // open the chat panel
window.PraatboxChat.close();  // close it

4. Listen for events (optional)

The widget dispatches DOM events on document when the visitor opens or closes the chat. Wire them into your own analytics.

document.addEventListener("praatbox-chat:open", () => {
  // visitor opened the chat — fire your own analytics here
});
document.addEventListener("praatbox-chat:close", () => {
  // visitor closed the chat
});

5. Style it

Use the dashboard to change the widget's color, position, greeting, avatar, and agent name — no code changes needed. The widget ships its own scoped styles so it stays consistent across host sites.

Frameworks

The install is the same everywhere — paste the snippet from step 1. A few platform-specific notes:

• Next.js — add to layout.tsx with the <Script> component (SSR-safe).
• Webflow — paste into Site Settings → Custom Code → Footer.
• Shopify — paste into your theme (Online Store → Themes → Edit Code).
• WordPress — add via a Custom HTML block or your theme's header (no plugin required).
• Framer — paste into Site Settings → Custom Code.

See all integrations for the full list.