Botframework V4的Messenger Webview [英] Messenger Webview for Botframework V4

问题描述

有人可以给我一个使用Facebook Messenger Webview的先机吗?我已经研究了好几天，但我仍然不知道如何去做.我想在这里给出代码，现在我确实知道从哪里开始.官方文档对我没有太大帮助，我以身作则.我正在使用C#Botframework V4 SDK.

Can someone give me a head start in using Facebook messenger Webview? I have been researching it for days and I still don't have any idea on how to do it. And as much as I want give code here, I do now know where to start. The official docs are not helping me so much and I learn best by example. I am using the C# Botframework V4 SDK.

这只是在Messenger上查看的网站吗? 您需要现有的网站吗?

Is it just a website viewed on messenger? Do you need an existing website for it?

推荐答案

位于对话上方的Facebook Webview需要一个支持Messenger Extension的网站.您可以找到支持该扩展程序的网站，也可以建立自己的网站并添加扩展程序.

The Facebook Webview that sits over the conversation requires a website that supports the Messenger Extension. You can either find a website that supports the extension or build your own and add the extension.

设置网站

您可以通过将以下函数调用添加到您的网页来将Messenger Extension添加到您的站点.

You can add the Messenger Extension to your site by adding the following function call to your webpage.

(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扩展程序.

For more details, take a look at the Facebook Messenger Documentation on Adding the Messenger Extensions.

使用Microsoft BotFramework发送模板

有几种方法可以使用Microsoft BotFramework来启动Messenger Extension Webview，但是最简单的选择是使用Facebook按钮模板.将您网站的URL添加到按钮模板中，然后通过将该模板添加到外发活动的频道数据中，将其发送给用户.请参见下面的示例.

There are several ways to bring up the Messenger Extension Webview with the Microsoft BotFramework, but the easiest option is to use a Facebook Button Template. Add the URL for your site to the button template, and send it to the user by adding the template to the outgoing activity's channel data. See the example below.

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);

在按钮模板以获得更多详细信息.请注意，请确保白名单您在Facebook上使用的所有网址.

Take a look at Messengers Documentation on Button Templates for more details. Note, make sure to Whitelist any URLs you use with Facebook.

屏幕截图

希望这会有所帮助！

这篇关于Botframework V4的Messenger Webview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！