Basic Setup

This section provides information about how to setup the Bigin Widget SDK into your project.

The Bigin Widget SDK for Javascript provides a set of client-side functionality for developers to do the following without disturbing the existing system:

manage widget UI
handle configurations and connections with third-party applications
provide seamless flow of data

The JS SDK bundle for Bigin can be accessed using the following CDN URL:

Copiedhttps://js.zohocdn.com/biginsdk/dist/js/bigin-widget-sdk.js

You need to add a <script> tag along with the above CDN URL to the project's HTML file for accessing the JS SDK bundle.

For example,

Copied<html>
<head>
    ...
	<script type="text/javascript" src="https://js.zohocdn.com/biginsdk/dist/js/bigin-widget-sdk.js"></script>
    ...
</head>
</html>

Register listeners for handling events in widgets

In certain scenarios where contextual data needs to be passed to the widget, you must register listeners for the appropriate events. Registering a listener for a specific event involves defining a function that will be executed when that specific event is triggered by your application. An event can be triggered by actions within the browser or by user interactions.

Let's consider the following event:

PageLoad - This event is triggered when a particular page (Detail Page) is loaded or accessed within the Bigin account.

To register a listener for the PageLoad event in your widget, use the following code:

CopiedZOHO.embeddedApp.on("PageLoad", function(data) {
    console.log(data);
});

When you register a listener for the PageLoad event, you are essentially telling your widget to listen for the PageLoad event.

The data parameter in the above function represents the contextual data passed along with the event.

Before you start listening to events, you need to initialize your widget using ZOHO.embeddedApp.init().

To initialize your widget and start listening to events within your application, use the following code:

CopiedZOHO.embeddedApp.init();

This function sets up the necessary environment to handle events within your widget and establishes the interaction between your widget and the application.

For example,

Copied<script>

/*Subscribe to the EmbeddedApp onPageLoad event before initializing the widget */
 
ZOHO.embeddedApp.on("PageLoad",function(data)
{
		console.log(data);
		//Add custom business logic here
})

/*To initialize the widget, use this.*/

ZOHO.embeddedApp.init();

</script>