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 .
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.
