В этом посте мы узнаем, как добавлять чат-ботов в приложения Vue.js. Vue.js - это JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений.

Предварительные условия

Для начала вам понадобится чат-бот Dialogflow или рабочие знания Dialogflow и Vue JS. Для интеграции чат-ботов с Vue.js вам понадобится учетная запись Kommunicate. Все вышеупомянутые инструменты можно попробовать бесплатно.

Если у вас нет чат-бота Dialogflow, мы поможем вам. Скачайте бесплатный образец здесь.

Шаги по добавлению чат-бота Dialogflow в приложения Vue.Js

Здесь приведены инструкции, объясняющие, как Dialogflow и Vue js интегрируются с помощью Kommunicate.

Примечание. Для простоты и ясности в этом руководстве объясняется, как разрабатывать действительно простой и простой код. Этот проект также доступен на Github. Чтобы получить подробное руководство о том, как интегрировать бота на веб-сайт, вы можете проверить здесь.

1. Создайте своего чат-бота Dialogflow.

Вы можете легко создать чат-бота в Dialogflow или отредактировать один из их образцов шаблонов чат-ботов или загрузить наш образец бота. Чтобы пойти дальше, вы можете создать свои собственные намерения и сущности.

Если вы хотите узнать больше о разработке чат-бота Dialogflow, см. Руководство по Dialogflow для начинающих здесь.

2. Интегрируйте чат-бота Dialogflow с Kommunicate.

Войдите в личный кабинет Коммуниката и откройте раздел Бот. Если у вас нет учетной записи, вы можете создать ее здесь. Найдите раздел Dialogflow и нажмите Настройки.

3. Интегрируйте чат-бота - добавьте чат-бота в приложения vue.js

Теперь перейдите в консоль Dialogflow и загрузите файл ключа учетной записи службы. Вы можете найти шаги по загрузке файла служебного ключа на изображении выше.

Задайте имя и изображение профиля своего бота и выберите, разрешить ли передачу бота человеку. Нажмите Завершить настройку интеграции бота, чтобы завершить интеграцию. Ваш бот теперь интегрирован.

Вы можете создать новую рабочую область и инициализировать проект приложения Vue.js или напрямую запустить существующий проект, запустив сервер с помощью команды CLI:

npm run serve

Установка чат-бота в компонент vue.js

Чтобы установить виджет чата в компоненте Vue.js, вы можете либо создать новый файл компонента, либо добавить установочный код Kommunicate в существующий файл компонента. Простой и эффективный способ решить эту проблему - добавить внешний скрипт в раздел Vue connected () вашего компонента.

Запустите любой редактор кода и откройте папку рабочей области, чтобы перейти к файлу компонента.

Примечание. Компоненты Vue - одна из важных функций Vue.js, которые создают настраиваемые элементы, которые можно повторно использовать в HTML.

Чтобы установить чат-бота, откройте Kommunicate и перейдите в Личный кабинет → Настройки. Нажмите Установить в разделе Конфигурация. Скопируйте код и добавьте его на свой сайт или в приложение.

Вставьте код javascript в файл компонента внутри тега ‹script›. Код компонента должен выглядеть так:

<script>
    export default {
        methods: {},
        mounted() {
            (function(d, m) {
                var kommunicateSettings = {
                    "appId": "YOUR_APP_ID",
                    "popupWidget": true,
                    "automaticChatOpenOnNavigation": true
                };
                var s = document.createElement("script");
                s.type = "text/javascript";
                s.async = true;
                s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
                var h = document.getElementsByTagName("head")[0];
                h.appendChild(s);
                window.kommunicate = m;
                m._globals = kommunicateSettings;
            })(document, window.kommunicate || {});
        },
        data: function() {}
    } 
 </script>
//Note: Make sure you replace “YOUR_APP_ID” with your APP Id provided in the install section.

Команда npm run serve запускает сервер, отслеживает ваши файлы и перестраивает приложение, когда вы вносите в эти файлы изменения. И приложение размещается на вашем локальном хосте.

Если вы запустите браузер, вы должны увидеть всплывающий экран виджета чата, и это означает, что ваш чат-бот готов. Вот как вы добавляете чат-бота в приложения Vue.js.

Первоначально опубликовано на https://www.kommunicate.io