Botframework с WordPress - PullRequest
Новая
       7

Botframework с WordPress

0 голосов
/ 20 марта 2019

Я хочу реализовать BotFramework в WordPress, но каким-либо образом или в форме он не работает должным образом.

Я использовал разные сценарии, но получил тот же неправильный результат.

один 

<script>
(function () {
    var div = document.createElement("div");
    document.getElementsByTagName('body')[0].appendChild(div);
    div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed;
                     bottom: 0; z-index: 1000; background-color: red'>
                     <div id='botTitleBar' style='height: 38px; width: 400px; 
                     position:fixed; cursor: pointer;'></div>
                     [advanced_iframe src="https://webchat.botframework.com/embed/..." 
                     width="100%" height="600"]</div>"; 
    document.querySelector('body').addEventListener('click', function (e) {
        e.target.matches = e.target.matches || e.target.msMatchesSelector;
        if (e.target.matches('#botTitleBar')) { 
            var botDiv = document.querySelector('#botDiv'); 
            botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
        };
    });
}());
</script>

он выдает мне баннер, но не открывает чат при нажатии. в случае если скрипт: 

<!DOCTYPE html>
<html>
  <body>
    <div id="webchat" role="main"></div>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: 'key' }),
        userID: 'YOUR_USER_ID',
        username: 'Web Chat User',
        locale: 'en-US',
        botAvatarInitials: 'WC',
        userAvatarInitials: 'WW'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

но в этом случае он ничего не делает. помогите, пожалуйста: (

1 Ответ

2 голосов
/ 09 апреля 2019

Я не знаю, как структурирована ваша среда, так что, надеюсь, это переводится, но я смог это сделать.Я запускаю это локально, раскрутив сайт WP на сервере WAMP.

Сначала я генерирую токен, вызывая API-интерфейс к

https://directline.botframework.com/v3/directline/tokens/generate.

* 1007.* Если вы уже генерируете токен, перейдите к следующему разделу.Если нет, вы можете сослаться на этот код, найденный здесь (если это интересно).

В WP я использую плагин под названием «WP Coder». Это позволяет вам ввести необходимыекомпоненты, позволяя плагину «заставить его работать» на странице.Я попытался написать его вручную, но страница WP не воспроизводилась нормально, и этот плагин был.

После того, как плагин установлен, поместите его в раздел 'HTML code': 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WebChat</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
        <div id="webchat" role="main"></div>
    </body>
</html>

После этого в разделе «CSS-код»: 

html,
body {
    height: 100%
}

body {
    margin: 0
}

#webchat,
#webchat>* {
    height: 500px;
    width: 100%;
}

Кстати, если вы установите высоту 100% для «#webchat», чат будет непрерывно прокручивать страницу вниз, так как записисделано, заставляя пользователя «прокручивать после него».Помимо этого, настройте его, как вам нужно.

В разделе «Код JS» добавьте следующее.Обратите внимание, что я генерирую токен локально.Вам нужно будет обновить его, чтобы он соответствовал вашему методу генерации токенов: 

( async function () {
        const res = await fetch( 'http://localhost:3979/directline/token', { method: 'POST' } );
        const { token } = await res.json();
        window.WebChat.renderWebChat( {
          directLine: window.WebChat.createDirectLine( { token } )
        }, document.getElementById( 'webchat' ) );
      } )();

Далее, в разделе «Включить файлы» введите два следующих файла JS в качестве URL-адресов (по отдельности): 

https://unpkg.com/markdown-it/dist/markdown-it.min.js
https://cdn.botframework.com/botframework-webchat/master/webchat.js

Наконец, возьмите «Шорткод» публикации (мой выглядит так [WP-Coder id="1"]) и разместите его на своей странице.Это можно найти в плагине WP Coder.

На данный момент, он должен работать для вас.Если нет, я бы внимательно посмотрел, как вы генерируете и передаете токен.

enter image description here

enter image description here

Надежда на помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...