How to use Syntage's Widget

What is this widget script?

This project is responsible for including the registry in third-party applications.

Using the script widget

To use the widget it is necessary to include our JS in your application.

The basic configuration for adding the widget is the script below.

Add the script below to your application:

<script
  async
  id="satws-widget-id"
  type="text/javascript"
  src="SCRIPT_URL"
  data-key="COMPANY_SLUG"
></script>

To start the registration you must run the command below:

window.Satws.init();

To terminate the widget, run:

window.Satws.destroy();

Widget Information

You can get the SCRIPT_URL and COMPANY_SLUG from the dashboard at:

Account > Widget > Widget script

In the widget screen you can customize the widget.

Test environment

For people to see the "sandbox" warning they would have to pass this parameter. This does not interfere with the operation, only the token makes this enter production and sandbox rule. It's just a warning. The script with this parameter will look like this:

<script
  async
  id="satws-widget-id"
  type="text/javascript"
  src="SCRIPT_URL"
  data-key="COMPANY_SLUG"
  data-sandbox="true"
></script>

Events (experimental)

EventDescription
registerWithSuccessFired when the integration was successful.
errorOnRegisterFired when there was an error sending user data.

Using the events

To use events we must use window.Satws.subscribe to subscribe to widget events.

Example:

registerWithSuccess:

window.Satws.subscribe("registerWithSuccess", () => {
  // your code here
});

errorOnRegister:

window.Satws.subscribe("errorOnRegister", () => {
  // your code here
});

Tips

Using dynamic loading in SPA's or GTM it can happen that when executing the Widget codes it is not ready yet, to get around this type of problem we can use the code below:

try {
  window.Satws.init();
} catch {
  // This event is listening for the `widgetScriptLoaded` event to be fired
  window.addEventListener("widgetScriptLoaded", (e) => {
    window.Satws.init();
  });
}