CardKit

CardKit is a JSON structure used to construct the cards that are shown in the feed for each feed event. A CardKit JSON string is sent as the 'body' field when sending or editing feed events via the API.

Structure of a Card

A CardKit card has 2 base fields. ribbon_color and sections.

sections is an array of CardKit section objects.

ribbon_color is an optional hex code color string which will be used to render a ribbon of that color on the left side of the card.

An example of a complete CardKit card JSON, and the card it renders in the feed, is shown below.

{  
   "ribbon_color":"#fa5655",
   "sections":[  
      {  
         "type":"header",
         "title":"Main API Service - Build Failed",
         "icon_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/cardkit/iconography/Code.png"
      },
      {  
         "type":"text",
         "value":"2/32 Tests Failed"
      },
      {  
         "type":"labelled_text",
         "label":"Time Taken",
         "value":"12m 23s",
         "icon_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/cardkit/iconography/Clock.png"
      },
      {  
         "type":"buttons",
         "data":[  
            {  
               "label":"View",
               "client_action":"blink:link?url=aHR0cHM6Ly9qb2luYmxpbmsuY29t&action=open"
            },
            {  
               "label":"Restart",
               "client_action":"blink:post?url=L2Nvbm5lY3Rvci9sLTZjZDdhMDkyLWQ4NDQtNGUzMi1hY2FmLTc4M2I3ODRhYzYyMy9wZXJmb3JtLWJ1aWxkLWFjdGlvbg==&body=eyJjb21tYW5kIjoicmVzdGFydCIsInVzZXIiOiJqb2UuYmxvZ2dzIiwiYnVpbGRfaWQiOiJhZDNlYjMxMmNmIn0="
            }
         ]
      }
   ]
}
670

CardKit Sections

Each CardKit section is a JSON object. Sections will be rendered in the order they appear in the sections array in the CardKit JSON.

Every section must include a type field to denote what type of section it is.

Each section below includes a table of fields, example JSON and an image of how the card will look when rendered in the feed.

- Header

"type": "header"

FieldTypeRequired
titlestringYes
icon_urlstringNo
{  
   "type":"header",
   "title":"Hello World",
   "icon_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/cardkit/iconography/Globe.png"
}
671

- Text

"type":"text"

FieldTypeRequired
valuestringYes
is_markdownbooleanNo (default false)
{  
   "type":"text",
   "value":"Text sections are great for longer bits of text. They can even include **markdown** if you specify `is_markdown` as true in the section's JSON.",
   "is_markdown":true
}
670

- Labelled Text

"type": "labelled_text"

FieldTypeRequired
labelstringYes
valuestringYes
is_markdownbooleanNo (default false)
icon_urlstringNo
{  
   "type":"labelled_text",
   "label":"Comment",
   "value":"Some text. *Markdown* is supported in the value field if is_markdown is set to true.",
   "is_markdown":true,
   "icon_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/cardkit/iconography/Chat.png"
}
672

- Image

"type": "image"

FieldTypeRequired
image_urlstringYes
fit_imagebooleanNo (default false)
widthnumber (width in pixels of the image)No*
heightnumber (height in pixels of the image)No*

The combination of fit_image, width and height determines how the image is displayed. Both width and height must be set to change how the image is displayed. If width and height are set, the value of fit_image does not affect how the image is displayed. Examples of how an image is displayed with different values of these parameters are below.

{  
   "type":"image",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/books-business-computer-459654.jpg",
   "width":5184,
   "height":3456
}
5184
{  
   "type":"image",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/books-business-computer-459654.jpg"
}
671
{  
   "type":"image",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/books-business-computer-459654.jpg",
   "fit_image":true
}
671

- YouTube

"type": "youtube"

FieldTypeRequired
video_idstringYes

You can find the video id for a YouTube video in the browser URL bar for the video:

786
{  
   "type":"youtube",
   "video_id":"nVxyqSQOD2s"
}
1340

- Link

"type": "link"

FieldTypeRequired
titlestringYes
urlstringYes
subtitestringNo
image_urlstringNo
image_placementstring (left, right or top)No (Default left)
{  
   "type":"link",
   "title":"Blink",
   "url":"https://joinblink.com",
   "subtitle":"Reach and engage your entire workforce. Improve productivity. Put everything in one place. Simple to set up and free to try.",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/white-gradient-logo.png",
   "image_placement":"left"
}

left image placement

1340

right image placement

1348

top image placement

1342

- Buttons

"type": "buttons"

FieldTypeRequired
dataArrayYes

A button section can have one or more buttons in the data field. The model of a button is as follows:

FieldTypeRequired
labelstringYes
client_actionstring (Find out more about client actions)Yes
icon_urlstringNo
disabledbooleanNo (default false)
{  
   "type":"buttons",
   "data":[  
      {  
         "label":"Open",
         "client_action":"blink:link?url=aHR0cHM6Ly9qb2luYmxpbmsuY29t&action=open",
         "icon_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/cardkit/iconography/Launch.png",
         "disabled":"true"
      },
      {  
         "label":"Restart",
         "client_action":"blink:post?url=L2Nvbm5lY3Rvci9sLTZjZDdhMDkyLWQ4NDQtNGUzMi1hY2FmLTc4M2I3ODRhYzYyMy9wZXJmb3JtLWJ1aWxkLWFjdGlvbg==&body=eyJjb21tYW5kIjoicmVzdGFydCIsInVzZXIiOiJqb2UuYmxvZ2dzIiwiYnVpbGRfaWQiOiJhZDNlYjMxMmNmIn0="
      }
   ]
}
1342

- Attachment

"type":"attachment"

FieldTypeRequired
file_namestringYes
file_extstringYes
file_sizenumber (size in bytes)Yes
open_urlstringYes*
download_urlstringYes*

*At least one of open_url or download_url should be set.

{  
   "type":"attachment",
   "file_name":"Company Results 2018/19",
   "file_ext":"pdf",
   "file_size":21479,
   "download_url":"https://api.joinblink.com/file/a-08801a93-adca-4902-bfd7-57334aaa2f1a"
}
671

- Event

"type": "event"

FieldTypeRequired
titlestringYes
startstring (e.g 2019-03-02T11:31:21.000Z)Yes
endstring (e.g 2019-03-02T11:31:21.000Z)No
subtitlestringNo
all_daybooleanNo (default false)
{  
   "type":"event",
   "title":"Sales Call",
   "start":"2019-03-02T11:30:00.000Z",
   "end":"2019-03-02T12:00:00.000Z",
   "subtitle":"Discussion with Acme Corp. about their Blink rollout.",
   "all_day":false
}
672

- Horizontal Bar Chart Section

"type": "horizontal_bar_chart"

FieldTypeRequired
total_raw_valuenumberYes
dataArrayYes

A horizontal bar chart section can have one or more bars in the data field. The model of a bar is as follows:

FieldTypeRequired
raw_valuenumberYes
display_valuestringYes
namestringYes
{  
   "type":"horizontal_bar_chart",
   "total_raw_value":12000,
   "data":[  
      {  
         "raw_value":5986,
         "display_value":"£5,986",
         "name":"Unit A"
      },
      {  
         "raw_value":2384,
         "display_value":"£2,384",
         "name":"Unit B"
      },
      {  
         "raw_value":3630,
         "display_value":"£3,630",
         "name":"Unit C"
      }
   ]
}
670