Blocks is a tree-structured data model that is able to express rich styled text documents. Article contents in Channel Talk Documents are served in Blocks format.

For example,

What is Documents?

It's a feature that helps you manage documents such as how-to guides, blogs, release notes, and more within Channel Talk and publish them on your website. Our AI agent, ALF, can learn the information in your documents and use it when responding to customers.

Why Use Documents?

Create, publish, and chat in one place

Easily create documents, publish them to your website, and utilize them in your chats.

No more jumping back and forth between platforms - write an article in Channel Talk and publish it directly to your website. Copy the link to any part of the article on your website and use it in your chats.

the document above is represented by following Blocks object.

[
  {
    "type": "heading",
    "attrs": {
      "level": 1
    },
    "content": [
      {
        "type" "plain",
        "attrs": {
        	"text": "What is Documents?"
      	}
      }
    ]
  },
  {
    "type": "text",
    "content": [
      {
        "type": "plain",
        "attrs": {
          "text": "It's a feature that helps you manage documents such as how-to guides, blogs, release notes, and more within Channel Talk and publish them on your website. Our AI agent, ALF, can learn the information in your documents and use it when responding to customers."
        }
      }
    ]
  },
  {
    "type": "heading",
    "attrs": {
      "level": 1
    },
    "content": [
      {
        "type" "plain",
        "attrs": {
        	"text": "Why Use Documents?"
      	}
      }
    ]
  },
  {
    "type": "text",
    "content": [
      {
        "type": "plain",
        "attrs": {
          "text": "Create, publish, and chat in one place"
        },
        "marks": [
          {
            "type": "bold"
          }
        ]
      }
    ]
  },
  {
    "type": "text",
    "content": [
      {
        "type": "plain",
        "attrs": {
          "text": "Easily create documents, publish them to your website, and utilize them in your chats."
        }
      }
    ]
  },
  {
    "type": "text",
    "content": [
      {
        "type": "plain",
        "attrs": {
          "text": "No more jumping back and forth between platforms - write an article in Channel Talk and publish it directly to your website. Copy the link to any part of the article on your website and use it in your chats."
        }
      }
    ]
  }
]

Blocks Grammar

-- Block Level Grammar --

Blocks  := [Block]

Block   := | Paragraph
           | CodeBlock
           | UnorderedList
           | OrderedList
           | Heading
           | Callout
           | Blockquote
           | Table
           | Image
           | Video
           | File
           | WebPage
           | Embed
           | Divider

Textual := | Paragraph
           | UnorderedList
           | OrderedList

Inline  := | Emoji
           | Plaintext

Mark    := | Bold
           | Italic
           | Hyperlink
           | Underline
           | Strikethrough
           | InlineCode
           | Color
           | BackgroundColor

-- Block Specification --

Paragraph       := {
                      type: "text"
                      content: [Inline]
                   }

CodeBlock       := {
                      type: "code"
                      language: String | null
                      content: [Plaintext]
                      attrs: {
                        language: String | null
                        caption: Paragraph | null
                      }
                   }

UnorderedList   := {
                     type: "bullets"
                     content: [ListItem]
                   }

OrderedList     := {
                     type: "orderedList"
                     content: [ListItem]
                     attrs: {
                       start: Number | null
                     }
                   }

ListItem        := {
                     type: "listItem"
                     content: [Block]
                   }

Heading         := {
                     type: "heading"
                     content: [Inline]
                     attrs: {
                       level: Number
                     }
                   }

Callout         := {
                     type: "callout"
                     content: [Textual]
                     attrs: {
                       icon: String | null
                       semanticColor: String | null
                     }
                   }

Blockquote      := {
                     type: "blockquote"
                     content: [Textual]
                     attrs: {
                       semanticColor: String | null
                     }
                   }

Table           := {
                     type: "table"
                     content: [TableRow]
                     attrs: {
                       width: String | null
                     }
                   }

TableRow        := {
                     type: "tableRow"
                     content: [TableCell] | [TableHeaderCell]
                   }

TableCell       := {
                     type: "tableCell"
                     content: [Textual]
                     attrs: {
                       width: String | null
                       semanticColor: String | null
                     }
                   }

TableHeaderCell := {
                     type: "tableHeaderCell"
                     content: [Textual]
                     attrs: {
                       width: String | null
                       semanticColor: String | null
                     }
                   }

Image           := {
                     type: "image"
                     attrs: {
                       src: String
                       alt: String | null
                       mime: String
                       width: String | null
                       height: String | null
                       caption: Paragraph | null
                     }
                   }

Video           := {
                     type: "video"
                     attrs: {
                       src: String
                       thumb: String | null
                       mime: String
                       width: String | null
                       height: String | null
                       caption: Paragraph | null
                     }
                   }

File            := {
                     type: "file"
                     attrs: {
                       src: String
                       mime: String
                       name: String | null
                       size: String | null
                     }
                   }

WebPage         := {
                     type: "webPage"
                     attrs: {
                       href: String
                       title: String | null
                       description: String | null
                       imageUrl: String | null
                       favicon: String | null
                       name: String | null
                       caption: Paragraph | null
                     }
                   }

Embed           := {
                     type: "embed"
                     attrs: {
                       src: String
                       mime: String | null
                       caption: Paragraph | null
                       width: String | null
                       height: String | null
                     }
                   }
                   
Divider         := {
                     type: "divider"
                   }


-- Inline Specification --

Emoji     := {
               type: "emoji"
               attrs: {
                 name: String
               }
               marks: [Mark] | null
             }

PlainText := {
               type: "plain"
               attrs: {
                 text: String
               }
               marks: [Mark] | null
             }

-- Mark Specification --

Bold            := {
                     type: "bold"
                   }

Italic          := {
                     type: "italic"
                   }

Hyperlink       := {
                     type: "hyperlink"
                     attrs: {
                       href: String
                     }
                   }

Underline       := {
                     type: "underline"
                   }

Strikethrough   := {
                     type: "strikethrough"
                   }

InlineCode      := {
                     type: "inlineCode"
                     attrs: {
                       semanticColor: String | null
                     }
                   }

Color           := {
                     type: "color"
                     attrs: {
                       semanticColor: String | null
                     }
                   }

BackgroundColor := {
                     type: "backgroundColor"
                     attrs: {
                       semanticColor: String | null
                     }
                   }