# Multiple Domains Setup
{% hint style="warning" %}
**Before you begin - activation required** \
Multiple domain support is not enabled by default. You must contact the Birdie team to have it enabled for your workspace before following this guide. \
Your setup will not work until this is done. [Contact us](mailto:support@birdie.so)
{% endhint %}
{% hint style="info" %}
**How it works** \
The snippet is dormant until a recording starts. When triggered, the recorder needs to communicate with the snippets across different domains… However browser-native communication channels won't work cross-origin, so instead both sides connect to a shared WebSocket channel. The channel is keyed on the authenticated user's email, which means the snippet must be initialized with that email so both ends subscribe to the same channel. That's why step 3 is required here, unlike the single-domain setup.
{% endhint %}
### Setup overview
To capture console logs, you need to:
1. Install the Birdie snippet on your app
2. Whitelist Birdie in your Content Security Policies
3. Identify your users with an email
## 1. Install the Birdie snippet
You can choose between 2 options:
### Option A: Frontend Integration using NPM
```javascript
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 → Logs](https://app.birdie.so/settings/logs) section.
```javascript
import { initBirdie } from "@birdie-so/snippet";
initBirdie({
clientId: "YOUR_CLIENT_ID", // *** required ***
contact: { // *** required to get logs ***
email: "alex@empire.com", // *** required to get logs ***
name: "Alexander", // optional
id: 65523 // optional
},
// Optional metadata available to recordings
metadata: {
any: {
key: "123",
product_id: "EBF-233"
},
},
// 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);
});
// if you need to update the contact email after initialization:
birdie.update({ contact: { email: "alex@empire.com" } })
// or update your metadata:
birdie.update({ metadata: { status: { id: "123", label: "active", color: "#000000" } } })
},
});
```
👉 You will find some more infos about implementation [in this page](https://www.npmjs.com/package/@birdie-so/snippet?activeTab=readme).
***
### Option B: Manual installation
{% hint style="info" %}
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.
{% endhint %}
1. Go to [Settings → Logs](https://app.birdie.so/settings/logs)
2. Click on Send to developer, or Copy the snippet code and paste it in the `` section 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:
```javascript
// 1st method: add this before loading the snippet
window.birdieSettings = {
contact_email: "john.doe@acme.com",
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:
```javascript
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`
* **Secure WebSocket protocol:** `wss://*.birdie.so`
* **Port**: `443, 3478 (TCP and UDP)`
* **IP Address**: `18.189.92.93` and `3.20.198.186`
#### Popup communication compatibility
Some Birdie flows require the Recorder opened in a new window to communicate with the window that opened it.
If your page sends the following header:
`Cross-Origin-Opener-Policy: noopener-allow-popups`
then the opened page may not have access to `window.opener`, and popup-to-opener communication may not work.
Make sure your opened page does not isolate itself from its opener in a way that disables `window.opener`.
***
## 3. Identify your customer with an email - *required*
Capturing logs with the Birdie Screen Recorder for a given user requires that the **same user email** be used both in the recorder and in your snippet.
How the multiple-domains recording works under the hood?
{% hint style="info" %}
The diagram below shows what happens technically when a recording starts across multiple domains - in particular why your customer's email must be passed to the snippet at init time, so the recorder can remotely trigger log collection on the right pages.
{% endhint %}
The setup depends on how you installed the snippet:
**If you installed with NPM**
Set the `contact: { email: ""}` value, or update it as soon as you have it. See full example above:
```javascript
onReady(birdie) {
birdie.update({ contact: { email: "alex@empire.com" } })
...
```
**If you installed manually**
Add `contact_email` info in your `window.birdieSettings` . See example above:
```javascript
window.birdieSettings = {
contact_email: "john.doe@acme.com",
...
```
***
{% hint style="info" %}
Tip: when a snippet is loaded into your app, a cookie named `__birdie_snippet_status` is maintained as long as the snippet is loaded, and expires 60s after the snippet is unloaded. If you need to detect the presence of the snippet in one of your pages you can test the presence of this cookie.
{% endhint %}
{% hint style="success" %}
If you need help or have a question, contact us at
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.birdie.so/birdie-docs/request-screen-recordings/installation/snippet/multiple-domains-setup.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.