В этом посте мы узнаем, как добавлять чат-ботов в приложения 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>

Примечание. Убедитесь, что вы заменили YOUR_APP_ID на свой идентификатор приложения, указанный в разделе установки.

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

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

Спасибо за чтение!

Первоначально опубликовано на https://www.kommunicate.io/blog/add-chatbot-vue-js-apps/ 17 марта 2020 г.