Блог

Может ли кто-нибудь дать мне преимущество в использовании Facebook Messenger Webview? Я изучал это в течение нескольких дней, и у меня все еще нет ни малейшего представления о том, как это сделать. И как бы мне ни хотелось привести здесь код, теперь я знаю, с чего начать. Официальные документы мне не очень помогают, и я лучше всего учусь на собственном примере. Я использую C # Botframework V4 SDK.

Это просто веб-сайт, просматриваемый в messenger? Вам нужен существующий веб-сайт для этого?

Facebook Webview, который находится над диалогом, требует веб-сайта, поддерживающего расширение Messenger. Вы можете либо найти веб-сайт, поддерживающий расширение, либо создать свой собственный и добавить расширение.

Настройка веб-сайта

Вы можете добавить расширение Messenger на свой сайт, добавив следующий вызов функции на свою веб-страницу.

 (function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'Messenger'));

  window.extAsyncInit = function() {
    // the Messenger Extensions JS SDK is done loading 
  };
  

Для получения более подробной информации ознакомьтесь с документацией Facebook Messenger по добавлению расширений Messenger.

Отправка шаблона с помощью Microsoft BotFramework

Существует несколько способов открыть расширение Messenger Webview с помощью Microsoft BotFramework, но самый простой вариант — использовать шаблон Facebook Button. Добавьте URL-адрес вашего сайта в шаблон кнопки и отправьте его пользователю, добавив шаблон к данным канала исходящего действия. Смотрите пример ниже.

 var reply = turnContext.Activity.CreateReply();

var attachment = new
{
    type = "template",
    payload = new
    {
        template_type = "button",
        text = "Sign up for our mailing list!",
        buttons = new[]
        {
            new
            {
                type = "web_url",
                url = "https://mybot.azurewebsites.net/",
                title = "Sign Up!",
                webview_height_ratio = "full",
                messenger_extensions = true,
            },
        },
    },
};

reply.ChannelData = JObject.FromObject(new { attachment });

await turnContext.SendActivityAsync(reply, cancellationToken);
  

Взгляните на документацию Messengers по шаблонам кнопок для получения более подробной информации. Обратите внимание, обязательно внесите в белый список все URL-адреса, которые вы используете в Facebook.

Скриншот

Надеюсь, это поможет!