Custom Panel

Introduction

When a conversation is opened in ROBIN, 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 ROBIN 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

NameRequiredDescription
$EmailAddressYes*The email address of the customer
$PhoneNumberYes*The phone number of the customer
$ExternalIdentifierYes*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

NameTypeRequiredDescription
dataArrayYesThe parent object to store all custom panel objects in
idStringYesThe id that is also used as parameter for the Custom panel details endpoint
custom_fieldStringNoThis 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

NameRequiredDescription
$IdYesThe 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

NameTypeRequiredDescription
display_asStringYesThe layout the information in showed in the panel (details, row and columns)
captionObjectYesThe caption in the details for a category
dataObjectYesThis is the object where all the information is stored