Iframe Widgets

Iframe Widgets enable partners and developers to embed a hosted Iframe into a widgets boards. With this capabilty you can gain important access to user motivation and promote important functionality you are offering in apps you created within inTandem or other offerings you may have.

To create an Iframe widget follow the following steps:

Step 1 - Create an app

You can read all about apps and how they are created here: https://developers.intandem.tech/docs/applications-overview

Step 2 - Create a widget

To create a widget use this API: https://developers.intandem.tech/v3.0/reference/widgets_create

Make sure you use the following in your component_date object:

"component_data": {
      "name": "iFrame",
      "config": {
        "url": "www.partnerdomain.com/calendar"
      }
    },

In the url place the hosted address of your widget. If you need us to pass additional properties, just add them to the config.
Note: only static properties are allowed here. You will have access to dynamic information about the user using your app access token or by using the inTandem js sdk.

Step 3 - Implement the widget life cycle

For your widget to show you need to:

1. Init the inTandem JS SDK
   JavaScript

   import InTandemMessageHandler from 'inTandemAppCom';
   const messageHandler = new InTandemMessageHandler();
   

2. Send a "Ready" state to widget using inTandem JS SDK
   JavaScript

   messageHandler.setState("Ready").then(result => {
   // Do something
   });
   

3. Listen to an Init event to get your initiation data
   JavaScript

   messageHandler.addListener((message, ack) => {
     console.log('Message received', message);
     if (message.type=="WidgetStatus"){
       switch(message.value){
           case "Init":
           	// some code to initialize your app
             let auth=await messageHanler.getAuth()
             console.log(message.data) // a JSON object holding the init data 
             break;
     }
     // ack can receive data to indicate success or failure with additional payload
     ack(); // Success with no information provided
   });
   

4. Start loading the widget assets
5. When your widget is ready to present send "Loaded" state to the widget from the iFrame. This will remove the loader and show your widget to the user.
   JavaScript

   messageHandler.setState("Loaded").then(result => {
   // Do something if needed
   });
   

Step 4 - Test your widget

Download our dashboard simulator here to validate your widget

Step 5- Add the widget to the board

This step involves the vCita professional services team.