One Buttons component is added by default to all templates.

You can add only one Buttons component in a template. A Buttons component is a container that can contain an unlimited number of buttons.

The Buttons component allows you to add buttons when Create an in-app message (IAM) using the related template. This means the template view doesn't allow you to define the number of buttons that a template will get: you will add as many buttons as you want when creating the in-app message, not the template. We have implemented it this way to provide flexibility: you can use a given template for a wide range of in-app message, regardless of the number of buttons each of these in-app messages need.

Similarly, on the contrary to the other components, the buttons font, background, and border colors are not defined in the template, but when creating the in-app message. This is as well to provide more flexibility when creating in-app messages and avoid you needing to tweak templates all the time.

The mockup view displays 2 buttons so you can visualize the positioning and spacing when several buttons are added to an in-app message.

You can delete a Button component by clicking the "Delete" button, and add it again by clicking on the + button.

Selectors:

1. Name: the name of your Buttons component.
2. Direction: column stacks your buttons in column, row allows buttons to be inline. If you select row but don't see the buttons getting in line, you need to reduce their width.
3. Font size: increase or reduce the size of the CTA. In px.
4. Letter spacing: the space between letters. Generally 0px.
5. Font family: the font used for this text component. Refer to the custom fonts section to see how to upload new fonts to your account.
6. Text margin: side spacing. If your text is aligned left, you can add padding to your button here. In px.
7. Text align: write "left", "right", or "center".
8. Button align: write "left", "right", or "center". If the width of the button is less than 100%, this will align buttons on the left, right or center.
9. Buttons height: the height of each button. In px.
10. Buttons width: the width of each button. In px or %.
11. Buttons radius: round the corners of your buttons. In px or %.
12. In-between spaces: the spaces around each button. Allows separating buttons from each other. To create an authorization template (a button on top, a dismiss button below), you can set this to 0px.