One script tag. A small, friendly API.

Install

Paste this before </body> on every page. You’ll find your widget key in Settings → Install; each inbox has its own key.

<script>
  window.ChatWidgetSettings = { widget_key: "YOUR_WIDGET_KEY" };
  window.ChatWidget = window.ChatWidget || function () { (window.ChatWidget.q = window.ChatWidget.q || []).push(arguments); };
</script>
<script async src="https://www.peeredly.com/widget.js"></script>

Add the domains that may load the messenger under Settings → Security. Requests from other sites are refused.

JavaScript API

Calls made before the script loads are queued, so you can use ChatWidget() anywhere.

ChatWidget('show');                    // open the messenger
ChatWidget('hide');                    // close it
ChatWidget('toggle');
ChatWidget('showNewMessage', 'Hi! I have a question about…');  // open with a draft

ChatWidget('onShow', () => analytics.track('Messenger opened'));
ChatWidget('onHide', () => {});
ChatWidget('onUnreadCountChange', (count) => updateBadge(count));

Hide the default launcher and open the messenger from your own button:

window.ChatWidgetSettings = {
  widget_key: 'YOUR_WIDGET_KEY',
  hide_launcher: true,   // open it from your own button instead
  user: { user_id: '4821', user_hash: '…', email: 'ada@example.com', name: 'Ada Lovelace' },
};

Identify users

When a customer is signed in to your product, tell Peeredly who they are. Their conversations follow them across devices, and the details appear on their CRM profile. Anything in attributes becomes a custom attribute you can filter by and use in triggers.

ChatWidget('identify', {
  user_id: '4821',               // your user's id
  user_hash: '<?= hash_hmac(...) ?>',  // see below
  email: 'ada@example.com',
  name: 'Ada Lovelace',
  attributes: { plan: 'pro', company: 'Analytical Engines', ltv: 1200 },
});

// Later, when something changes:
ChatWidget('update', { plan: 'enterprise' });

// On log out, forget this person on this browser:
ChatWidget('shutdown');

Identity verification

To stop anyone from pretending to be one of your customers, sign the user id on your server with your workspace’s identity secret (Settings → Security) and pass it as user_hash. Turn on Require identity verification to refuse unsigned identify calls. Never put the secret in browser code.

// PHP
$hash = hash_hmac('sha256', (string) $user->id, env('PEEREDLY_IDENTITY_SECRET'));

// Node.js
import { createHmac } from 'node:crypto';
const hash = createHmac('sha256', process.env.PEEREDLY_IDENTITY_SECRET).update(String(user.id)).digest('hex');

# Python
import hmac, hashlib
hash = hmac.new(SECRET.encode(), str(user.id).encode(), hashlib.sha256).hexdigest()

# Ruby
hash = OpenSSL::HMAC.hexdigest('sha256', ENV['PEEREDLY_IDENTITY_SECRET'], user.id.to_s)

Single-page apps

The messenger follows pushState and popstate navigation on its own, so page views, live visitors and triggers stay accurate in React, Next.js, Vue, Svelte and similar apps. Load the script once, in your root layout.

Performance & privacy

• The loader is under 10 KB gzipped and loads with async. The messenger itself runs in an iframe, so it never touches your CSS.
• One script powers chat, live visitors, triggers and analytics. There’s no second tag.
• Co-browsing masks password and payment fields in the visitor’s browser before anything is sent.
• Erase any person and their conversations from the CRM in one click.

Need something the API doesn’t cover? Enterprise plans include custom integrations. Tell us what you’re building.