The Blink Developer Community

Welcome to the Blink developer community. You'll find comprehensive guides and documentation to help you start working with Blink as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

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

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"

Field
Type
Required

title

string

Yes

icon_url

string

No

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

- Text

"type":"text"

Field
Type
Required

value

string

Yes

is_markdown

boolean

No (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
}

- Labelled Text

"type": "labelled_text"

Field
Type
Required

label

string

Yes

value

string

Yes

is_markdown

boolean

No (default false)

icon_url

string

No

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

- Image

"type": "image"

Field
Type
Required

image_url

string

Yes

fit_image

boolean

No (default false)

width

number (width in pixels of the image)

No*

height

number (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
}
{  
   "type":"image",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/books-business-computer-459654.jpg"
}
{  
   "type":"image",
   "image_url":"https://s3-eu-west-1.amazonaws.com/blink-public-assets/api-docs/books-business-computer-459654.jpg",
   "fit_image":true
}

- YouTube

"type": "youtube"

Field
Type
Required

video_id

string

Yes

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

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

- Link

"type": "link"

Field
Type
Required

title

string

Yes

url

string

Yes

subtite

string

No

image_url

string

No

image_placement

string (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

right image placement

top image placement

- Buttons

"type": "buttons"

Field
Type
Required

data

Array<Button>

Yes

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

Field
Type
Required

label

string

Yes

client_action

Yes

icon_url

string

No

disabled

boolean

No (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="
      }
   ]
}

- Attachment

"type":"attachment"

Field
Type
Required

file_name

string

Yes

file_ext

string

Yes

file_size

number (size in bytes)

Yes

open_url

string

Yes*

download_url

string

Yes*

*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"
}

- Event

"type": "event"

Field
Type
Required

title

string

Yes

start

string (e.g 2019-03-02T11:31:21.000Z)

Yes

end

string (e.g 2019-03-02T11:31:21.000Z)

No

subtitle

string

No

all_day

boolean

No (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
}

- Horizontal Bar Chart Section

"type": "horizontal_bar_chart"

Field
Type
Required

total_raw_value

number

Yes

data

Array<Bar>

Yes

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

Field
Type
Required

raw_value

number

Yes

display_value

string

Yes

name

string

Yes

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

CardKit


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.