🚧

Installation via NPM is an alternative to the standard integration. You must not mix the two methods under any circumstances. This can lead to unpredictable behavior.

Installation

@join-stories/global-script package is available through NPM. To add JOIN Web SDK to your project using npm, please use one of the following methods:

npm install @join-stories/global-script

pnpm install @join-stories/widget-bubble-list

Global Script

📘

TeamId

You will need your team id. You can find it in the Integration tab of your widget on studio.

Integration in React

To successfully integrate @join-stories/global-script into your webpage, follow these steps:

Step 1: Import initGlobalScript function

import { initGlobalScript } from "@join-stories/global-script";

Step 2: Call initGlobalScript on App start

useEffect(() => {
  const destroy = initGlobalScript("teamId");
  return () => {
      destroy(); // the destroy method allow you to clear global Script listeners
    }; 
  }, []);

Complete overview

Congratulations! By following the steps provided, you've successfully integrated the renderBubbleList widget into your web application. Your code should now look similar to the example below:

import { useEffect } from 'react';
import { initGlobalScript } from "@join-stories/global-script";

const App = () => {
	useEffect(() => {
  	const destroy = initGlobalScript("teamId");
    return () => {
        destroy(); // the destroy method allow you to clear global Script listeners
      }; 
  }, []);

	return <div>Hello World</>;
}

Integration in HTML & JS

import initGlobalScriptfunction and call it when your page loads

<script type="module" src="./globalScript.js"></script>

import { initGlobalScript } from "@join-stories/global-script";

document.addEventListener('DOMContentLoaded', function() {
	initGlobalScript("teamId");
});

Errors handling

Catch loading errors

initGlobalScriptprovides an option, onError, to catch and handle any error happening during the global script loading phase.

initGlobalScript(  
	"teamId",
  {  
    onError(error) {  
      console.warn('an error was caught', error);  
    }  
  }  
);

Reference

Analytics

Analytics callback

You can listen to analytics events triggered by the script like this:

function analyticsCallback(payload) {
  // Do something with the payload...
  console.log(payload.event_type)
}

initGlobalScript(
  "teamId",
  { analyticsCallback },
);

See Analytics to learn more about available events.