1. Home
  2. Docs
  3. API Features
  4. Custom Panel

Custom Panel

When a conversation is opened in ROBIN, a panel containing relevant information to that conversation / the relation is shown in the panel. The profile of the relation is shown, as well as the orders that are recognized with that relation and previous conversations that this relation had. On top of the panel there are 4 navigation icons (this depends on the features that are enabled for the subscription). Using these navigation icons additional functionality like viewed products and co-browsing can be accessed. Now ROBIN supports custom panels. When this feature is enabled, ROBIN supports the displaying of external data in the panel. Version 1 of the ROBIN Custom Panel API supports one custom panel that is always loaded. In the future, multiple custom panel can be defined (and maintained) and can be assigned to different Web Stores.


Configuration

A custom panel needs to be configured in ROBIN. At this time, the configuration is not supported in the app, so the configuration has to be done by ROBIN. Please contact support@robinhq.com when this is required. ROBIN needs the following data for configuring 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)

The URL for retrieving data can contain 2 variables:

$EmailAddress – this is the email address of the shopper

$PhoneNumber – this is the phonenumer of the shopper

These variables can be used in the URL and will be substituted before being invoked. The GetData URL 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. This URL should return a string as follows:

{ 
    "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" 
        } 
    ] 
}

 

The property id is used for navigation to the details view. All other properties are displayed. Some special conventions are available for captions, these are described in the ROBIN API documentation which can be found at http://docs.robinhq.com/faq/robin-api/. The panel shows this information as follows (note that only 3 items are displayed).

 

When navigating to the custom panel, all items are shown and the custom panel (5th navigation item) becomes active:

 

When navigating to a specific item, the GetDetails url 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”, its contents are roughly the same as the details_view property of an ROBIN API detail order, making it possible to provide any kind of information. An example return string is as follows:

{ 
    "data":
    [ 
        { 
            "display_as":"details", 
            "data":
            { 
                "date":"29-01-2014 12:34", 
                "status":"In progress", 
                "payment status":"Partially paid", 
                "shipment_status":"Partially shipped" 
            } 
        }, 
        { 
            "display_as":"rows", 
            "caption":"shipments", 
            "data":
            [ 
                { 
                    "shipment":  "RHQS01","status":  "Shipped"
                }, 
                { 
                    "shipment":  "RHQS02","status":  "Not shipped"
                } 
            ] 
        }, 
        { 
            "display_as":"rows", 
            "caption":"invoices", 
            "data":
            [ 
                { 
                    "shipment": "RHQI01","status":  "Paid","amount":  "$1200.00"
                }, 
                { 
                    "shipment":  "RHQI02","status":  "Not paid","amount":  "$403.50"
                } 
            ] 
        } 
    ] 
}

 

Resulting in the following panel: