SDK Integration

Integration using Browsee's web client SDK.

To install Browsee web SDK just do:

$ npm i @browsee/web-sdk --save

Or, if you are using yarn

$ yarn add @browsee/web-sdk

Now you can import and start using the SDK. You need to initialize it with your project's API key. You can find your API key in settings or accounts page.

import browsee from '@browsee/web-sdk';

browsee.init({ apiKey: '<Your API Key>' });

Trying to use API calls before init will throw an error.

Examples

React

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: '<Your API Key>' });
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Next

For Next, this web-sdk is not the recommended installation method for Browsee. You can use next/script to directly add script tags.

import { Inter } from 'next/font/google'
import './globals.css'
import Script from "next/script";

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
      <Script strategy="lazyOnload">
        {`
        window._browsee = window._browsee || function () { (_browsee.q = _browsee.q || []).push(arguments) };
        _browsee('init', '<Your API Key>'); 
    `}
      </Script>
      <Script
        strategy="lazyOnload"
        src={"https://cdn.browsee.io/js/browsee.min.js"}
      />
    </html>
  )
}

Angular

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: '<Your API Key>' });
  }
}

Vue

import Vue from 'vue';
import App from './App.vue';
import browsee from '@browsee/web-sdk';
 
browsee.init({ apiKey: '<Your API Key>' });
 
new Vue({
  render: h => h(App),
}).$mount('#app')

API calls

Just like client-side API, you can use browsee object to send events, identify users or get session URL.

Sending custom events

browsee.identify('User ID', {name:...});
 
browsee.logEvent('Event Name', {key: value, ...});
 
browsee.getSessionUrl(function(url) { console.log('Current session', url); });

Learn more about these APIs here.

PreviousGTM Integration NextWordpress Integration

Last updated 1 year ago

Was this helpful?