The Multichannel component is a wrapper component used to transform existing representations of a channel into another one that does not support it natively. As an example, it can be used to adapt native representations of a Text with Buttons or Carousel (available in Facebook) for WhatsApp : the multichannel component allows you to provide a way to concatenate and unify messages and conversations for your WhatsApp bot.


To get this kind of output:

You just have to add the following code in your action files, under the render section.

text={{ indexMode: 'number' }}

As an example, you would get something like this:

Welcome! Choose from the options below.
<Button key={'1'} payload='payload1'>
Option 1
<Button key={'2'} payload='payload1'>
Option 2
<Button key={'3'} payload='payload1'>
Option 3


You can customize the output by using this list of properties.

PropertyTypeDescriptionRequiredDefault value
childrenBotonic ComponentEnable the multichannelYes-
firstIndexNumber, letter or undefinedEnable the display of the list of options with numbers or letters. Examples: firstIndex={"a"} gives a.b. and firstIndex={1} gives 1.2.No1
boldIndexBooleanApply a bold format to the index elementNoFalse
carousel: indexModeStringAdd a letter or number to the index for a carousel. Accepted values: 'letter', 'number' or undefined (no index)NoUndefined
carousel: showTitleBoolean-No-
carousel: showSubtitleBoolean-No-
text: IndexStringNo-
text: IndexModeStringAdd a letter or number to the index for a text. Accepted values: 'letter', 'number' or undefined (no index)Noletter
text: NewlineStringNo-
IndexseparatorStringAdd a character after the letter or number. Example: a dot or dashNoโ€˜ . โ€˜
Message separatorStringAdd a space between the various messages. {'\n\n'} adds a line break between the index message and the selection optionNoโ€˜ \n โ€™
Was this article useful?