How to send template message to user like in FB

[Abgaryan]

I used Botkit for FB bot ,this is code from FB bot, how can you create templates like this for Web bot?

const options = {
    attachment: {
      type: "template",
      payload: {
        template_type: "list",
        top_element_style: "compact",
        elements: [{
            title: i18n.__('title_city_name_berlin'),
            subtitle: i18n.__('subtitle_country_name_Germany'),
            image_url: berlinCity.cityInfo.image_url,
            buttons: [{
              type: "postback",
              title:i18n.__('title_city_name_berlin'),
              payload: "BERLIN"
            }]
          },
          {
            title: i18n.__('title_city_name_munich'),
            subtitle: i18n.__('subtitle_country_name_Germany'),
            image_url: munichCity.cityInfo.image_url,
            buttons: [{
              type: "postback",
              title: i18n.__('title_city_name_munich'),
              payload: "MUNICH"
            }]
          },{
                title: i18n.__('title_city_name_new_york'),
                subtitle: i18n.__('subtitle_country_name_usa'),
                image_url: newYorkCity.cityInfo.image_url,
                buttons: [{
                    type: "postback",
                    title: i18n.__('title_city_name_new_york'),
                    payload: "NEW YORK"
                }]
            },
            {

                title: i18n.__('title_city_name_recommend_new_city'),
                image_url: "http://content.airelo.me/images/New%20City%20Blur%20250x250.png",
                buttons: [
                    {
                        type: 'web_url',
                        title: i18n.__('subtitle_city_name_recommend_new_city'),
                        url: "https://airelo.me/new-city/",
                        webview_height_ratio: 'full',
                        messenger_extensions: true,

                    }]
            }
            ]
      }
    }
  }

  convo.ask(options, [
      {
        pattern: 'BERLIN',
        callback: function(response, convo) {
          logger.debug('Berlin it is')
          convo.setVar('city', 'berlin')

          convo.setVar('questions', require('../form/cities/berlin').questions)
          require('./MAIN_MENU')(response, convo)
         
          convo.next();
        }
      },
      {
        pattern: 'MUNICH',
        callback: function(response, convo) {
          logger.debug('Munchen!')
          convo.setVar('city', 'munich')

          convo.setVar('questions', require('../form/cities/munich').questions)

          require('./MAIN_MENU')(response, convo)
          convo.next();
        }
      },
      {
          pattern: 'NEW YORK',
          callback: function(response, convo) {
              logger.debug('New York!')
              convo.setVar('city', 'newyork')

              convo.setVar('questions', require('../form/cities/newyork').questions)

              require('./MAIN_MENU')(response, convo)
              convo.next();
          }
      },
      {
        default: true,
        callback: function(response,convo) {
            convo.task.bot.reply(convo.source_message, i18n.__('error_message_choose_city'));


          convo.silentRepeat();
        }
      }
    ])

[adantoscano]

You should create a Card Component for your widget

[Abgaryan]

@adantoscano how should I create it, is there any documentation reference?can you show some example, please ?

[adantoscano]

In this project, public/ folder is for Widget purposes and you're free to customize it. Take a look how quick replies works in public/client.js and try to do the same with cards.

//client.js
that.on('message', function(message) {
          that.clearReplies();
          if (message.quick_replies) {

            var list = document.createElement('ul');

            var elements = [];
            for (var r = 0; r < message.quick_replies.length; r++) {
              (function(reply) {

                var li = document.createElement('li');
                var el = document.createElement('a');
                el.innerHTML = reply.title;
                el.href = '#';

                el.onclick = function() {
                  that.quickReply(reply.payload);
                }

                li.appendChild(el);
                list.appendChild(li);
                elements.push(li);

              })(message.quick_replies[r]);
            }

Start adding if(message.attachment) and do magic below :smile:

Some doc here https://github.com/howdyai/botkit-starter-web/blob/master/docs/botkit_web_client.md#customize-the-look-and-feel-of-the-chat-interface

Hope this helps you

[Abgaryan]

@adantoscano what about webViews? is three webView available currently?

[adantoscano]

That's maybe harder... Fast way: open link in other tab <href target="_blank" ... Pretty harder way: insert an iframe into the widget but you have to add close buttons and so on