This guide shows you how to add the Pipeback chat widget to any website or web app, for both anonymous visitors and logged-in (identified) users. We’ll cover the base snippet, how to securely pass user data, and a few common integration patterns (SPA, GTM, etc.)

Basic Snippet (Anonymous Visitors)

If you just want the Messenger to load without identifying the user, drop this snippet before the closing </body> tag:

<script>
  window.PIPEBACK_ID = 'YOUR_PIPEBACK_WORKSPACE_ID'
</script>
<script async src="https://widget.pipeback.com/l.js"></script>

Identifying a Logged-in User

To link activity to a specific user (and unlock segmentation, messaging history, etc.), you can simply pass their data to the widget. Signing is optional—only use it if you want to be 100% sure the request really comes from your server and that the user wasn’t spoofed.

Quick (No-Signature) Identification

Just provide the user object without the signature key:

<script>
  window.PIPEBACK_ID = 'YOUR_PIPEBACK_WORKSPACE_ID';
  window.$pipeback = {
    user: {
      id: '9f7618a2',
      name: 'Paulo Castellano',
      email: 'paulo@pipeback.com',
      phone: 17866001518, // numbers only
      attributes: {
          plan: 'pro',
          monthly_spend: 5000,
      },
      company: {
        id: '8f4618a2', // required when is sending company data
        name: 'Pipeback', // required when is sending company data
        website: 'pipeback.com',
        created_at: 1234567891, // unix time
        plan: "scale",
        monthly_spend: 199, // integer
        industry: "software",
        size: 100,
         address: '15th avenue',
         postal_code: '60160',
         city: 'Melrose Park',
         state: 'NY',
         country: 'US',
         attributes: {
             high_ticket: false,
             is_gov: true,
         },
      }
    },
  };
</script>
<script async src="https://widget.pipeback.com/l.js"></script>

Optional: Add a Signature for Extra Security

If you want to guarantee the payload is legit (e.g., prevent someone from faking a user in the console), generate an HMAC-SHA256 signature server-side and include it.

$secretKey = getenv('PIPEBACK_SECRET_KEY');
$email = auth()->user()->email; // or ID
$signature = hash_hmac('sha256', $email, $secretKey);

Node.js example

const crypto = require('crypto');
const secretKey = process.env.PIPEBACK_SECRET_KEY;
function signEmail(email) {
  return crypto.createHmac('sha256', secretKey).update(email).digest('hex');
}
const signature = signEmail(currentUser.email);

Then pass it:`

window.$pipeback = {
  user: {
     id: '9f7618a2',
     name: 'Paulo Castellano',
     email: 'paulo@pipeback.com',
    signature: 'SIGNATURE_FROM_BACKEND',
  }
};