Fast Reply with Keyboards

ItamarMItamarM RSS Feed

Natural language is good, but typing on mobile remains hard! Instant gratification demands intents be satisfied with fewer taps. With Viber’s keyboard you can utilize UI to reduce cognitive load and offer functionally/choices at the same time.


The keyboard sits right below the composer. When a button is tapped, the message is sent in the conversation with developer-defined metadata in the callback (also known as action body).

Keyboard template

The keyboard design interface allows limitless possiblities, but it may be best to offer a simple selection option to users.

The following NodeJS module allows you to send a vertical scrollable keyboard with items. Use this module to customize the keyboard title, action, background, font color and more.

For instance, in the following segment we create a simple yes/no keyboard and send it back to the user:

const ViberBot = require('viber-bot').Bot;
const TextMessage = require('viber-bot').Message.Text;
const KeyboardGeneratorModule = require('./keyboard_generator.js');

const actionBodyYes = 'Yes';
const actionBodyNo = 'No';

function redeemYesOrNoKeyboard() {
    let keyboardGenerator = new KeyboardGeneratorModule();
    keyboardGenerator.addElement('Yes I would', actionBodyYes, '#57B8FF');
    keyboardGenerator.addElement('Not now', actionBodyNo, '#DB3069');
    return keyboardGenerator.build();
}

function sendQuestion(response) {
    return response.send(new TextMessage('Would you like to build a bot?',
                                        redeemYesOrNoKeyboard()));
}

bot.on(BotEvents.MESSAGE_RECEIVED, (message, response) => {
	
    // That's not a text message. Just ask the question.
    if (!(message instanceof TextMessage))  {
        sendQuestion(response);
        return;
    }

    let messageActionBody = message.text.toUpperCase();

    if (messageActionBody === actionBodyYes.toUpperCase()) {
        // TODO: Handle yes!
    }
    else if (messageActionBody === actionBodyNo.toUpperCase()) {
        // TODO: Handle no!
    }
    else {
        sendQuestion(response);
    }
}

Which, in turn, will render like this:

Next steps

Allow your user to respond faster by adding a keyboard user interface into your chatbot. Feel free to customize our keyboard template module for your needs.

Need help or found a bug? Contact us.