@birdie-so/snippet
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

@birdie-so/snippet

Easily integrate the Birdie screen recording snippet into your application using modern frameworks like React, Vue, Angular, or plain JavaScript — with full control over initialization, metadata, and event hooks.

⚡ This package is a helper utility for integrating Birdie.
You must have a Birdie account and a valid clientId to use this package.
It does not work on its own — visit https://app.birdie.so to get started.

⚡ The core logic is still loaded from our CDN. This package is just a light wrapper for easier integration and customization.

npm license


🚀 Installation

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

✨ Quick Start

React / Vue / Angular / JS

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

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

  // Optional metadata available to recordings
  metadata: {
    user: {
      id: "123",
      email: "user@example.com",
    },
  },

  // 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);
    });
  },
});

🧠 How It Works

This package:

  • Injects the Birdie CDN snippet dynamically using your clientId.
  • Sets global window.birdieSettings before loading.
  • Registers event callbacks once the Birdie SDK is ready (window.birdie is available).

Your original snippet like this:

<script>
  window.birdieSettings = {
    /* ... */
  };
</script>
<script src="https://app.birdie.so/widget/embed/YOUR_CLIENT_ID"></script>

Is now handled via code with initBirdie().


🧩 Advanced

Get Birdie instance later

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

getBirdieInstance((birdie) => {
  birdie.on("start", () => {
    console.log("Recording started!");
  });
});

Or synchronously:

const birdie = getBirdieInstance();
if (birdie) {
  birdie.metadata = { key: "value" };
}

📘 Docs

For full documentation and integration examples, visit our docs page


🛠 Support

Need help? Reach out to us at support@birdie.so


📄 License

MIT

Package Sidebar

Install

npm i @birdie-so/snippet

Weekly Downloads

70

Version

1.0.1

License

MIT

Unpacked Size

6.09 kB

Total Files

4

Last publish

Collaborators

  • birdie-dev