### Install Browsee Web SDK
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Installs the Browsee web SDK package for use in your project. This is the primary method for adding Browsee functionality to client-side applications.
```bash
$ npm i @browsee/web-sdk --save
```
```bash
$ yarn add @browsee/web-sdk
```
--------------------------------
### Install Browsee JS Snippet
Source: https://docs.browsee.io/faq/faq-browsee-installation
Instructions for placing the Browsee JavaScript snippet on your web pages. It is recommended to place the code at the bottom of the
tag to ensure optimal page load performance. This asynchronous collection method minimizes impact on user experience.
```html
```
--------------------------------
### React Integration with Browsee SDK
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Demonstrates how to integrate and initialize the Browsee SDK within a React application. The SDK is initialized once when the application starts, typically in the main entry point.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import browsee from '@browsee/web-sdk';
import * as serviceWorker from './serviceWorker';
browsee.init({ apiKey: '' });
ReactDOM.render(
,
document.getElementById('root')
);
```
--------------------------------
### URL Regex Examples for Browsee Rules
Source: https://docs.browsee.io/integration/managing-recordings
Browsee supports Javascript Regular Expressions for defining URL patterns in prioritization and deprioritization rules. These examples illustrate how to match specific URLs or URL structures.
```javascript
// Example 1: Match the exact '/cart' URL
const exactCartUrl = "^/cart$";
// Example 2: Match any URL starting with '/products/'
const productUrls = "^/products/.*";
// Example 3: Match URLs containing 'blog' anywhere in the path
const containsBlog = ".*blog.*";
// Example 4: Match URLs for specific product IDs (e.g., /products/123, /products/456)
const specificProductIds = "^/products/\\d+$";
```
--------------------------------
### Browsee API: Session and Event Tracking
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Provides examples of common Browsee API calls for tracking user activity. These methods allow sending custom events, identifying users with unique properties, and retrieving session URLs.
```APIDOC
browsee.identify(userId: string, properties?: object)
- Identifies a user with a unique ID and associated properties.
- Parameters:
- userId: A unique identifier for the user.
- properties: An optional object containing user attributes (e.g., { name: 'John Doe', email: 'john@example.com' }).
browsee.logEvent(eventName: string, eventProperties?: object)
- Logs a custom event with an optional set of properties.
- Parameters:
- eventName: The name of the event to log (e.g., 'ButtonClick').
- eventProperties: An optional object containing details about the event (e.g., { buttonId: 'submit', value: 100 }).
browsee.getSessionUrl(callback: (url: string) => void)
- Retrieves the URL for the current user session.
- Parameters:
- callback: A function that receives the session URL as an argument.
- Example:
browsee.getSessionUrl(function(url) { console.log('Current session', url); });
```
--------------------------------
### HTML Input Field Name for Search
Source: https://docs.browsee.io/understand-your-users/session-search/user-actions
An example of an HTML input element demonstrating the 'name' attribute, which serves as a search key for sessions.
```html
```
--------------------------------
### Browsee Recording Prioritization Rules
Source: https://docs.browsee.io/integration/managing-recordings
Configure rules to prioritize sessions on specific pages. When a user visits a page matching a prioritized URL pattern, Browsee will start recording the session, regardless of sampling settings. These recordings count towards your quota.
```APIDOC
Rule Type: URL Prioritization
Description: Define rules to ensure sessions on specific pages are recorded.
Parameters:
- url_pattern: (string, regex supported) The URL or pattern to match. Examples: "/cart", "^/products/.*", "blog"
Behavior:
- When a user's session includes a visit to a page matching the `url_pattern`, the entire session is marked for recording.
- Prioritized sessions count towards the user's recording quota.
Related:
- URL Deprioritization Rules
- Ignore Short Sessions
```
--------------------------------
### Initialize Browsee SDK
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Initializes the Browsee SDK with your project's unique API key. Initialization must occur before any other Browsee API calls are made; otherwise, an error will be thrown.
```javascript
browsee.init({ apiKey: '' });
```
--------------------------------
### Browsee SAML SSO Configuration Parameters
Source: https://docs.browsee.io/project/setting-up-sso-login
These parameters are required when configuring a SAML application with your Identity Provider (IdP) to enable Single Sign-On (SSO) with Browsee. Ensure these values are entered accurately in your IdP's application settings.
```APIDOC
SSO URL (Assertion Consumer Service URL):
https://browsee.io/auth/sso/callback
- This is the endpoint where your Identity Provider will send SAML assertions.
SP Entity ID (Service Provider Entity ID):
https://browsee.io/
- This uniquely identifies Browsee as the Service Provider in the SAML exchange.
Name ID Format:
EmailAddress
- Specifies the format for the user identifier sent in the SAML assertion. EmailAddress is the required format for Browsee.
```
--------------------------------
### Configure Session Recording Prioritization
Source: https://docs.browsee.io/faq/faq-session-recordings
Browsee allows flexible configuration to prioritize session recordings based on specific criteria, ensuring more valuable data is captured within your plan's quota. You can define rules for landing URLs, UTM sources, and countries.
```APIDOC
APIDOC:
Configuration:
Recordings:
Prioritize:
- Type: Landing URL
Condition: "contains /app"
Description: Prioritize sessions where the landing URL contains '/app'.
- Type: Landing URL
Condition: "contains /product/"
Description: Prioritize sessions where the landing URL contains '/product/'.
- Type: UTM Source
Condition: "cpc"
Description: Prioritize sessions originating from 'cpc' UTM source.
- Type: UTM Source
Condition: "ads"
Description: Prioritize sessions originating from 'ads' UTM source.
- Type: Country
Condition: "USA"
Description: Prioritize sessions from users in the USA.
- Type: Country
Condition: "India"
Description: Prioritize sessions from users in India.
- Type: Country
Condition: "France"
Description: Prioritize sessions from users in France.
```
--------------------------------
### CSP Error for Inline Script Execution
Source: https://docs.browsee.io/project/content-security-policies
An example of a browser console error encountered when an inline script violates the Content Security Policy. It indicates the need for 'unsafe-inline', a hash, or a nonce.
```console
Refused to execute inline script because it violates the following Content
Security Policy directive: "script-src 'self'". Either the 'unsafe-inline'
keyword, a hash ('sha256-LIWxvaPcpStKaib3stZibHkJmqC6mzhCozh5zG32eP4='), or a
nonce ('nonce-...') is required to enable inline execution.
```
--------------------------------
### Exclude Element Content with data-br-exclude
Source: https://docs.browsee.io/data-privacy/privacy
This example shows how to prevent Browsee.io from recording the content of a `div` element. Applying the `data-br-exclude` attribute to a `div` tag will suppress the recording of its text content, such as a user's email ID, and any subsequent changes to it.
```html
{{email}}
```
--------------------------------
### Get Browsee Session URL (Direct Call)
Source: https://docs.browsee.io/integration/api-calls/session-url
Retrieves the current Browsee session URL directly. This method assumes the Browsee JavaScript SDK has been fully loaded and initialized. It returns a string representing the session URL.
```javascript
_browsee.getSessionUrl()
```
--------------------------------
### Angular Integration with Browsee SDK
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Shows how to integrate and initialize the Browsee SDK within an Angular component. The SDK is typically initialized in the constructor of the root component.
```javascript
import { Component } from '@angular/core';
import browsee from '@browsee/web-sdk';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '...';
constructor() {
browsee.init({ apiKey: '' });
}
}
```
--------------------------------
### Vue Integration with Browsee SDK
Source: https://docs.browsee.io/integration/snippet-integration/sdk-integration
Demonstrates the integration of the Browsee SDK into a Vue.js application. The SDK is initialized when the Vue application is mounted.
```javascript
import Vue from 'vue';
import App from './App.vue';
import browsee from '@browsee/web-sdk';
browsee.init({ apiKey: '' });
new Vue({
render: h => h(App),
}).$mount('#app')
```
--------------------------------
### Get Browsee Session URL (Callback)
Source: https://docs.browsee.io/integration/api-calls/session-url
Retrieves the Browsee session URL asynchronously using a callback function. This is useful when calling the method before the Browsee JavaScript SDK is guaranteed to be loaded. The session URL is passed to the provided callback function.
```javascript
_browsee('getSessionUrl', callback)
```
--------------------------------
### Sample Privacy Policy Text 2 (HTML)
Source: https://docs.browsee.io/data-privacy/sample-for-the-privacy-policy
This sample describes Browsee as a session recording and analytics tool that helps understand user preferences and identify issues for site improvement. It provides links to Browsee's legal and compliance pages.
```html
Browsee is a session recording and analytics
tool that helps us see understand what visitors are liking or not liking about
our product. We also get alerts when something goes wrong which helps us in
improving the user experience on our site.
```
--------------------------------
### Browsee Session Export API
Source: https://docs.browsee.io/integration/api-calls/data-export-api
API to export session data from Browsee. Supports POST requests to `/api/v1/export/sessions`. Allows specifying API keys, secret keys, time ranges, pagination, and segments. Includes detailed request body parameters and example responses for success and error cases.
```APIDOC
POST https://api.browsee.io/api/v1/export/sessions
Description:
An API to export a list of sessions.
Request Body:
Parameters:
apiKey (string): Your project's API Key.
secretKey (string): Secret key generated from Browsee account settings.
start (integer): Timestamp of the starting time. Use Unix seconds (seconds since epoch). Defaults to 24 hours before now.
end (integer): Timestamp of the ending time. Use Unix seconds (seconds since epoch). Defaults to Now.
from (integer): The offset in the result set. For e.g. if the result has total of 1000 entries and you want to fetch the last 100, then this would be 900. Defaults to 0.
limit (integer): The number of results to get. Default to 100. The maximum value of this is also 100.
segmentId (string): The ID of a segment created in Browsee. This ID is found in the URL when viewing a segment's analytics.
options (object): Additional options for data export, such as selecting specific fields.
Responses:
200 OK:
Description: In case of successful execution of request.
Content:
{
"status": "success",
"exports": {
"total": N, // Total sessions satisfying the query
"to": i, // Session index upto which result is being provided
"data": [
// Session data...
]
}
}
400 Bad Request:
Description: In case if any of the required parameters is not provided or if any of the optional parameters does not follow the right format.
Content:
{
"status": "failure",
"message": {
"error": "API Key missing."
}
}
401 Unauthorized:
Description: If Secret key does not match the account.
Content:
{
"status": "unauthorized",
"message": {
"error": "Secret Key invalid."
}
}
Usage Notes:
- This API only supports the `POST` method.
- It is a pagination-based API with a default page size of 100 sessions.
- The first request returns the total number of results and the offset index. Subsequent requests should use the `from` parameter to fetch subsequent pages of data.
- Rate limited to one open request at a time. Wait for a response before initiating another request.
```