👾Snippet

How to install Birdie snippet

Birdie Snippet is required for capturing logs.

Birdie Snippet is required if you want to hide sensitive data.

1. Install Birdie snippet

You can choose between 2 options:

First option: Frontend Integration using NPM

npm install @birdie-so/snippet
# or
yarn add @birdie-so/snippet

Use with React / Vue / Angular / JS

You must get your own clientId, get it from your Birdie settings > incoming section.

import { initBirdie } from "@birdie-so/snippet";

initBirdie({
  clientId: "YOUR_CLIENT_ID", // required

  // Optional metadata available to recordings
  metadata: {
    user: {
      id: "123",
      email: "[email protected]",
    },
  },

  // Optional hook once Birdie is ready
  onReady(birdie) {
    birdie.on("start", (data) => {
      console.log("Recording started", data);
      birdie.metadata = { dynamicKey: "value" };
    });

    birdie.on("stop", (data) => {
      console.log("Recording stopped", data);
    });
  },
});

👉 You will find some more infos about implementation in this page.

---

Second option: Basic JavaScript

We do not recommend installing Birdie through Google Tag Manager or Segment. The preferred method is to paste the code directly onto your web application, as this will result in faster load times.

1. Go to settings > incoming

2. Copy the snippet code and paste it before the </body> tag of your web app. Note that the snippet is unique to your organization.

How to add custom medatada

Optionally add your own metadata if you need to store additional data along the recordings like this:

// 1st method: add this before loading the snippet
window.birdieSettings = {
    contact_email: "[email protected]",
    metadata: {
        mykey: "value",
        otherkey: [
            { x: 12, y: 13 },
            { opacity: 35, width: 440 }
        ]
    }
}

// 2nd method, add metadata after loading the snippet: 
if (window.birdie) {
    window.birdie.metadata = {
        mykey: "value",
        otherkey: [
            { x: 12, y: 13 },
            { opacity: 35, width: 440 }
        ]
    }
}

💡 Note that if you have several tabs open with the snippet loaded, only the latest metadata that was set will be available along a recording.

How to hook into recorder events

Optionally you can register for events to know when a recording has started and stopped. First make sure window.birdie object is present by registering for onBirdieReady event before loading the snippet, then register for "start" and "stop" events like this:

window.birdieReadyCallback = function() {
  console.log("Birdie Ready, window.birdie object is now available")
  window.birdie.on('start', function(data) {
    console.log("A recording was started", data);
    // save custom data, or add metadata
    window.birdie.metadata = { key: "value" }
  });
  window.birdie.on('stop', function(data) {
    console.log("A recording was stopped", data);
  });
}
  
window.birdieSettings={
  onBirdieReady: birdieReadyCallback
}

// then add the snippet…

---

2. Whitelist Birdie in your Content Security Policy

To ensure proper functionality, whitelist the following:

• HTTPS: https://*.birdie.so, https://*.birdiefly.com

• Secure WebSocket protocol: wss://*.birdie.so, wss://*.birdiefly.com

• Port: 443 (TCP and UDP)

• IP Address: 18.189.92.9

This will allow Birdie to function smoothly within your network environment.

How to Send instructions to our developers?

If you don't have access to your codebase and need help with the installation, you can send the instructions to your developers directly for your settings page.

If you need help or have a question, contact us at [email protected]