Components

Key to understand all props and design: Send API reference. Please use it as a kind of cascade - if something is not described here, refer to the Send API docs. If something fails, it's likely that you could violate Send API requirements.

Block

Block is used to group elements. Blocks can be nested. Components in Block will be rendered in the order they are declared.

<Block>
    <Text>Hello</Text>
    <Text>How are you</Text>
</Block>

Text

Simple text message. It's children is a message to be send. You can insert a variable just like in React (in curly braces. Accepts quickReplies prop (with QuickReply as array items)

GenericTemplate

Accepts imageAspectRatio and sharable props. Accepts GenericTemplate.Element children. Each element accepts defaultAction prop and Title (GenericTemplate.Title and so on), Subtitle and Image children. Image accepts url prop.

Take a look at List template below. Markup is very similar.

ButtonTemplate

Accepts text prop and Buttons as children (up to three).

QuickReplies, QuickReply

quickReplies is a prop accepted by blocks that can have quick replies (e.g. ButtonTemplate, GenericTemplate or Text). quickReplies should be an array of <QuickReply/> buttons.

Button

Can be a child of different templates (Media, List, Button, Generic template). Accepts props: type (optional for URL and Postback buttons), url, payload, shareContents, paymentSummary, priceList, gameMetadata, messengerExtensions, webviewHeightRatio, fallbackURL.

<Button url='http://chatblocks.net'>Title</Button>

MediaTemplate

Accepts url or attachmentId prop. Can have Button children.

ListTemplate

Accepts topElementStyle and sharable props.

It has to have Element children. Button is optional. Element can consist of Image, Title, Subtitle and Buttons. It also accepts defaultAction prop. Image accepts url prop.

<ListTemplate.ListTemplate quickReplies={[
    <QuickReply payload="MENU">Reservation</QuickReply>
]}>
    <ListTemplate.Element>
        <ListTemplate.Image url="http://image.com/image.jpg"/>
        <ListTemplate.Title>Prestigious pizza</ListTemplate.Title>
        <ListTemplate.Subtitle>$10.99</ListTemplate.Subtitle>
        <Button url="http://chatblocks.net">Order</Button>
        <Button type="element_share" />
    </ListTemplate.Element>
    <ListTemplate.Element>
        <ListTemplate.Image url="http://image.com/image.jpg"/>
        <ListTemplate.Title>Perfect pasta</ListTemplate.Title>
        <ListTemplate.Subtitle>$11.99</ListTemplate.Subtitle>
        <Button url="http://chatblocks.net">Order</Button>
    </ListTemplate.Element>
    <ListTemplate.Element>
        <ListTemplate.Image url="http://image.com/image.jpg"/>
        <ListTemplate.Title>Lazy lasagne</ListTemplate.Title>
        <ListTemplate.Subtitle>$12.99</ListTemplate.Subtitle>
        <Button url="http://chatblocks.net">Order</Button>
    </ListTemplate.Element>
    <ListTemplate.Element>
        <ListTemplate.Image url="http://image.com/image.jpg"/>
        <ListTemplate.Title>Big bigos</ListTemplate.Title>
        <ListTemplate.Subtitle>$99.99</ListTemplate.Subtitle>
        <Button url="http://chatblocks.net">Order</Button>
    </ListTemplate.Element>
    <Button url="http://menu.com">See our menu</Button>
</ListTemplate.ListTemplate>

MarkSeen

Marks messages as seen. Usage: <MarkSeen />

TypingOn

Shows typing indicator. If you won't send TypingOff, it will hide after 20s. Usage: <TypingOn />

TypingOff

Stops typing indicator.