Skip to main content

Interactions

An interaction in our context refers to a specific type of request originating from Bettermode's UI to the app. This request is triggered by a user's click on either a dynamic block's element or a shortcut. When a user interacts with these elements, it generates a distinct action or event, prompting the app to respond accordingly.

For instance, when a user clicks on a dynamic block or a shortcut, the app receives the interaction request, which can initiate a wide range of actions or data retrieval processes based on the app's functionality. These interactions facilitate seamless communication between the UI and the app, empowering developers to create dynamic and engaging user experiences within the platform.

Requests structure​

Every interaction request sent by Bettermode follows the below structure:

{

    "networkId": "CAxOmI7I7t", // The community ID
    "context": "NETWORK", // The context of the action
    "entityId": "CAxOmI7I7t", // The ID of the context
    "currentSettings": [],
    "type": "INTERACTION",
    "data": {
      "actorId": "DT12skI901s", // The member ID
      "appId": "QC1xmIy3xO", // The app ID
      "interactionId": "Ax12skI901y3xO", // The interaction ID
      "preview": false,
      "dynamicBlockKey": "settings", // The dynamic block key. For example for setting's page this is `settings`
      "shortcutKey": null, // The shortcut key
      "callbackId": null, // The callback ID
      "inputs": null // Form inputs filled by member
    }
}

Response structure​

For every interaction sent by Bettermode you must respond with a following structure:

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [] // An array of interactions. 
  },
}

Currently there are 7 types of interaction supported by Bettermode and you can have multiple of them at the same time. For example you can show a toast while closing a modal.

Show a block​

You can show a block by responding this JSON:

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "type": "SHOW",
        "id": "dynamic-block",
        "slate": {
          "rootBlock": "root",
          "blocks": [
            {
              "id": "root",
              "name": "Container",
              "props": { 
                "spacing": "md" 
              },
              "children": ["text"],
            },
            {
              "id": "text",
              "name": "text",
              "props": {
                "format": "markdown",
                "value": "Enhance your understanding of community engagement by sending activity data to Hubspot's platform. With this integration",
              },
            }
          ],
        }
      }
    ],
  },
}

Reload a block​

You can reload an existing block by responding this JSON:

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "id": "reload",
        "type": "RELOAD",
        "props": {
          "dynamicBlockKeys": ["related-posts"]
        },
      }
    ],
  },
}

Toast​

You can show a toast by responding this JSON:

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
      "type": "OPEN_TOAST",
      "id": "toast-id",
      "props": {
        "title": "Create a ticket",
        "status": "Success",
        "description": "Ticket has been created successfully",
        "link": {
          "href": "https://bettermode.com/",
          "text": "Go to ticket",
          "enableCopy": true,
        },
      },
      }
    ],
  },
}

You can show a modal in a UI.

Open a modal​

You can open a modal by responding this JSON.

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "id": "modal-id",
        "type": "OPEN_MODAL",
        "props": {
          "size": "md",
          "title": "Create a Hubspot ticket",
        },
        "slate": {},
      }
    ],
  },
}

Close a modal​

You can close a modal by responding this JSON. Make sure the id of the interaction is the same id as the modal interaction.

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "id": "modal-id",
        "type": "Close"
      }
    ],
  },
}

Redirect​

You can open redirect to a new page by responding the following JSON.

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "id": "redirect",
        "type": "Redirect",
        "props": {
          "url": "https://bettermode.com",
          "external": true
        }
      }
    ],
  },
}

Data​

This interaction type is useful when you want to dynamically alter the field. Right now we only support Select component. For example you have a searchable select component and you want to show a new set of items when user performs a search query. You can respond with the following JSON:

{
  "type": "INTERACTION",
  "status": "Succeeded",
  "data": {
    "interactions": [
      {
        "id": "data",
        "type": "DATA",
        "props": {
          "items": [{ "text": "Bettermode Dev Portal", "value": "1N25ZZyz5c" }]
        }
      }
    ],
  },
}