Embed an element

Use Salsa.js to easily integrate pre-built UI elements into your applications.

Salsa.js is our browser-side JavaScript library that let's you easily embed Salsaโ€™s pre-built UI elements in your payroll application. In this guide, you'll learn to set up Salsa.js, and create and mount an element.

Load and initialize Salsa.js

The first step is to to load Salsa.js into your application:

<script type="text/javascript" src="https://js.salsa.dev/v0" />

๐Ÿ“˜

Asynchronous loading

Use the async or defer attributes to load the script asynchronously.

Next, create an instance of the Salsa.js using your Client Key and specifying the environment:

const salsa = window.Salsa('my-public-client-key', {env: 'sandbox'});

Insert a UI element

Create an element instance in your desired view, and specify its name.

const demoElement = salsa.elements.create('demo');

๐Ÿ“˜

Authorization

Many elements that you will use in a production application will require a user token for authorization.

Next, create an empty div that will act as a container for your element.

<div id='salsa-container' /> 

Now mount the element inside of the div you just created.

salsa.elements.mount(demoElement, '#salsa-container');

When your view loads, you should see the demo element embedded in your application.

It should look similar to this

Demo element

Cleanup

When unmounting a view that contains a Salsa UI element, make sure you call destroy to clean up any open items.

salsa.elements.destroy(demoElement);