Comment on page
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.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')
Just like client-side API, you can use
browsee object to send events, identify users or get session URL.browsee.identify('User ID', {name:...});
browsee.logEvent('Event Name', {key: value, ...});
browsee.getSessionUrl(function(url) { console.log('Current session', url); });
Last modified 1mo ago