Example responses

Basic integration

Basic integration showing a list of labels and values. Could be used to show information about a contact

Response

{
  "contactName": null,
  "contactLink": null,
  "blocks": [
    {
      "name": "Contact information",
      "icon": "contact_page",
      "data": [
        {
          "type": "list",
          "rows": [
            { "label": "Customer Id", "text": "CUST12345" },
            { "label": "Name", "text": "John Doe" },
            { "label": "Title", "text": "Senior Account Manager" },
            { "label": "Customer since", "text": "2024-01-01" }
          ]
        }
      ]
    }
  ]
}

Table

Basic integration showing a table of customer orders with table headings

Response

{
  "contactName": null,
  "contactLink": null,
  "blocks": [
    {
      "name": "Customer orders",
      "icon": "receipt_long",
      "data": [
        {
          "type": "table",
          "headers": [
            { "text": "Order Id" },
            { "text": "Value" },
            { "text": "Date" }
          ],
          "rows": [
            [{ "text": "1" }, { "text": "100" }, { "text": "2024-01-01" }],
            [{ "text": "2" }, { "text": "200" }, { "text": "2024-02-02" }],
            [{ "text": "3" }, { "text": "300" }, { "text": "2024-03-03" }]
          ]
        }
      ]
    }
  ]
}

Mixed block types

You may combine block types in the same block to show multiple data formats simultaneous.

Response

{
  "contactName": null,
  "contactLink": null,
  "blocks": [
    {
      "name": "Contact information",
      "icon": "contact_page",
      "data": [
        {
          "type": "list",
          "rows": [
            { "label": "Customer Id", "text": "CUST12345" },
            { "label": "Name", "text": "John Doe" },
            { "label": "Title", "text": "Senior Account Manager" },
            { "label": "Customer since", "text": "2024-01-01" }
          ]
        },
        {
          "type": "table",
          "headers": [
            { "text": "Order Id" },
            { "text": "Value" },
            { "text": "Date" }
          ],
          "rows": [
            [{ "text": "1" }, { "text": "100" }, { "text": "2024-01-01" }],
            [{ "text": "2" }, { "text": "200" }, { "text": "2024-02-02" }],
            [{ "text": "3" }, { "text": "300" }, { "text": "2024-03-03" }]
          ]
        }
      ]
    }
  ]
}

Multiple blocks in same response

You may combine multiple blocks in the same response to show multiple plugins simultaneous.

Response

{
  "contactName": null,
  "contactLink": null,
  "blocks": [
    {
      "name": "Contact information",
      "icon": "contact_page",
      "data": [
        {
          "type": "list",
          "rows": [
            { "label": "Customer Id", "text": "CUST12345" },
            { "label": "Name", "text": "John Doe" },
            { "label": "Title", "text": "Senior Account Manager" },
            { "label": "Customer since", "text": "2024-01-01" }
          ]
        }
      ]
    },
    {
      "name": "Customer orders",
      "icon": "receipt_long",
      "data": [
        {
          "type": "table",
          "headers": [
            { "text": "Order Id" },
            { "text": "Value" },
            { "text": "Date" }
          ],
          "rows": [
            [{ "text": "1" }, { "text": "100" }, { "text": "2024-01-01" }],
            [{ "text": "2" }, { "text": "200" }, { "text": "2024-02-02" }],
            [{ "text": "3" }, { "text": "300" }, { "text": "2024-03-03" }]
          ]
        }
      ]
    }
  ]
}

Accordion

Accordions could be used to group different types of blocks or used to create an expandable section within a plugin

Expanded

Collapsed

Response

{
  "contactName": null,
  "contactLink": null,
  "blocks": [
    {
      "name": "Plugin",
      "icon": "receipt_long",
      "data": [
        {
          "type": "accordion",
          "headers": [
            { "text": "Orders", "subtext": "3st" },
            { "text": "Total", "subtext": "1197:-" }
          ],
          "data": [
            {
              "type": "table",
              "headers": [
                { "text": "Id" },
                { "text": "Product" },
                { "text": "Value" },
                { "text": "Date" }
              ],
              "rows": [
                [
                  { "text": "1" },
                  { "text": "Shoes" },
                  { "text": "699:-" },
                  { "text": "2024-01-01" }
                ],
                [
                  { "text": "2" },
                  { "text": "Sunglasses" },
                  { "text": "199:-" },
                  { "text": "2024-02-02" }
                ],
                [
                  { "text": "3" },
                  { "text": "Scarf" },
                  { "text": "299:-" },
                  { "text": "2024-03-03" }
                ]
              ]
            }
          ]
        }
      ]
    }
  ]
}

Advanced example

Plugin showing customer information with links and a table with an accordion header

Response

{
  "contactName": "John Doe",
  "contactLink": "https://crm-system.com/contact/12345",
  "blocks": [
    {
      "name": "Customer Information",
      "icon": "receipt_long",
      "data": [
        {
          "type": "list",
          "rows": [
            { "label": "Customer Id", "text": "CUST12345" },
            { "label": "Name", "text": "John Doe" },
            { "label": "Title", "text": "Senior Account Manager" },
            { "label": "Customer since", "text": "2024-01-01" },
            {
              "label": "Track orders",
              "text": "Open",
              "href": "https://example.org/track-orders/CUST12345"
            },
            {
              "label": "Issue refund",
              "text": "Open",
              "href": "https://example.org/issue-refunds/CUST12345"
            }
          ]
        },
        {
          "type": "accordion",
          "headers": [
            { "text": "Orders", "subtext": "3st" },
            { "text": "Total", "subtext": "1197:-" }
          ],
          "data": [
            {
              "type": "table",
              "headers": [
                { "text": "Id" },
                { "text": "Product" },
                { "text": "Value" },
                { "text": "Date" }
              ],
              "rows": [
                [
                  { "text": "1" },
                  { "text": "Shoes" },
                  { "text": "699:-" },
                  { "text": "2024-01-01" }
                ],
                [
                  { "text": "2" },
                  { "text": "Sunglasses" },
                  { "text": "199:-" },
                  { "text": "2024-02-02" }
                ],
                [
                  { "text": "3" },
                  { "text": "Scarf" },
                  { "text": "299:-" },
                  { "text": "2024-03-03" }
                ]
              ]
            }
          ]
        }
      ]
    }
  ]
}