In the constructor module you can customize the appearance of the keyboard buttons.

An example of such a keyboard:

https://developers.viber.com/docs/img/keyboard_example_restaurant2.png

Styling settings are available for keyboard blocks, list, slider (the slider must be tweaked by the developer, from the constructor it will not work yet)

How to go to settings?

To go to the settings you need:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/90db3e90-c424-46a0-aaa6-61feb6f90ef0/viber_style1.jpg

Gif instructions for use:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/da54c823-8cb8-4a43-9db4-a9a6b4c5cdaf/viber_style.gif

Button design templates

For your convenience, we have prepared a design template for bot buttons in different versions in Figma

Viber buttons template

Examples of JSON-configuration of keyboard buttons

Adding the background of the button pad

Пример отображения фона на клавиатуре в чат-боте

Пример отображения фона на клавиатуре в чат-боте

Json code must be added to the "Json text configuration (to customize the display of text)" field

Json code must be added to the "Json text configuration (to customize the display of text)" field

Json code must be added to the "Json text configuration (to customize the display of text)" field

Sample JSON-config code:

{
"BgColor": "#2db9b9",
"DefaultHeight": null
}