Introduction

When a conversation is opened in Agent Inbox, the right-side panel can contain relevant information to that conversation and/or the customer. The profile can show personal customer details, as well as the orders that are associated with this customer, but also a conversation history for all channels. The API also offers the possibility to add a ‘custom’ panel to the profile. This custom panel can contain anything other entities such as orders from a separate retail POS system, repairs, newsletters, reviews, forum posts, tickets from a third party ticking system and more.

There also is the possibility to implement multiple custom panels and assign them to different Web Stores.

Configuration
A custom panel needs to be configured in Agent Inbox and can be found in the settings in the integration section. To implement a custom panel the following data is required for a custom panel:

The name of the panel (e.i. the caption that is to be displayed in the main panel)
The name of the details view
The URL for retrieving data
The URL for retrieving details
Headers to be submitted to both URLs
An icon to be displayed in the main panel (size 18*21)
An icon to be displayed in the navigation area (size 26*52 black and white version. This is for the hover effect)

Custom panel list

The Custom panel list endpoint should return an object containing items that are to be displayed. The main panel will only show 3 items, when navigating to all items, the remaining will also be displayed.

GET https://example.com/customerpanellist?<yourEmailParameter>=$EmailAddress&?<yourPhoneParameter>=$PhoneNumber&?<yourExternalIdentifierParameter>=$ExternalIdentifier

Parameters

Name	Required	Description
$EmailAddress	Yes*	The email address of the customer
$PhoneNumber	Yes*	The phone number of the customer
$ExternalIdentifier	Yes*	An identifier of the customer that isn't an email address or phone number

at least one of the three parameters need to be configured.

Response body

{
    "data":
    [
        {
            "id":"1",
            "description":"record 1",
            "field1":"this is field 1",
            "field2":"this is field 2"
        },
        {
            "id":"2",
            "description":"record 2",
            "field3":"this is field 3",
            "field4":"this is field 4"
        },
        {
            "id":"3",
            "description":"record 3",
            "field5":"this is field 5"
        },
        {
            "id":"4",
            "description":"record 4",
            "field6":"this is field 6"
        }
    ]
}

Response schema

Name	Type	Required	Description
data	Array	Yes	The parent object to store all custom panel objects in
id	String	Yes	The id that is also used as parameter for the Custom panel details endpoint
custom_field	String	No	This variable you can rename the key and the value to anything you'd like -- as long as the value is returned in a string form

Custom panel details

When navigating to a specific item, the Custom panel details endpoint is invoked. This URL has one parameter: $id. This parameter is substituted with the id property if the item that is navigated to, and can be any string necessary to identify the item. The expected return string is an object with one property: “data”.

GET https://example.com/custompaneldetails?<yourOrderNumber>=$Id

Parameters

Name	Required	Description
$Id	Yes	The order_number of the clicked object of “orders” from Endpoint 2 “Order list”

Response body

{
  "data": [
    {
      "display_as": "details",
      "data": {
        "date": "29-01-2021 12:34",
        "status": "In progress",
        "payment_status": "Partially paid",
        "shipment_status": "Partially shipped"
      }
    },
    {
      "display_as": "columns",
      "caption": "products",
      "data": [
        {
          "product": "Phone",
          "quantity": "1",
          "price": "$695.50"
        },
        {
          "product": "Tablet",
          "quantity": "2",
          "price": "$898.00"
        },
        {
          "product": "Shipment",
          "quantity": "",
          "price": "$10.00"
        },
        {
          "product": "Total",
          "quantity": "",
          "price": "$1603.50"
        }
      ]
    },
    {
      "display_as": "rows",
      "caption": "invoices",
      "data": [
        {
          "shipment": "<a href='http://shop.example.com/invoice/CMI01'>CMI01</a>",
          "status": "Paid",
          "amount": "$1200.00"
        },
        {
          "shipment": "<a href='http://shop.example.com/invoice/CMI02'>CMI02</a>",
          "status": "Not paid",
          "amount": "$403.50"
        }
      ]
    }
  ]
}

Response schema

Name	Type	Required	Description
display_as	String	Yes	The layout the information in showed in the panel (details, row and columns)
caption	Object	Yes	The caption in the details for a category
data	Object	Yes	This is the object where all the information is stored