Подключите интеграцию Chatwoot к Netlify за 10 минут

Создайте функционального чат-бота, не написав 1000 строк кода!

Вам когда-нибудь приходило в голову реализовать диалоговый чат-бот или вариант чата на вашем сайте? Но увы! Вы не знали об удивительном инструменте, который поможет вам реализовать функционального чат-бота, не написав 1000 строк кода! Если это так, вам не о чем беспокоиться, так как Chatwoot является отличным решением!

Итак, что такое Чатвут?

Короче говоря, Chatwoot — это инструмент поддержки клиентов для каналов обмена мгновенными сообщениями, который может помочь компаниям обеспечить исключительную поддержку клиентов.

Chatwoot — это в основном пакет для взаимодействия с клиентами с рядом функций. Отслеживайте разговоры на разных коммуникационных платформах, автоматизируйте разговоры с ботами и т. д. Программное обеспечение может значительно сократить ваше время и усилия на отслеживание ваших клиентов на ходу.

Некоторые из основных функций, которые Chatwoot предоставляет, чтобы занять свою нишу в индустрии программного обеспечения и бизнеса, — это общий почтовый ящик, совместимость с облаком, конфиденциальность, настраиваемые меню и множественная интеграция с такими платформами, как Rasa, DialogFlow и т. д.

Прочтите этот блог до конца, чтобы узнать, как интегрировать функцию живого чата Chatwoot в ваше веб-приложение, развернутое на Netlify. Я буду использовать простое погодное приложение, созданное с использованием HTML, CSS и JavaScript, а также некоторых API с открытым исходным кодом.

Зачем нужен чат-бот?

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

Чат-боты помогают клиентам добраться из пункта А в пункт Б как можно быстрее и плавнее, не чувствуя себя забытыми или дезориентированными. Считайте чат-бота небольшим гидом, который помогает клиентам ориентироваться в информации на вашем веб-сайте. Чат-боты — это виртуальные помощники для веб-сайтов.

Они помогают решить распространенные проблемы с устранением неполадок, с которыми пользователи могут столкнуться при просмотре веб-сайта. Это рентабельно, поскольку вам не нужно назначать агента по обслуживанию клиентов. Короче говоря, это улучшает общее впечатление от веб-сайта.

Как подключить Chatwoot к сайту Netlify?

Давайте быстро начнем с внедрения инструмента Chatwoot.

• Создайте новую учетную запись в Chatwoot, перейдя по этой ссылке, или войдите в существующую учетную запись.
• Введите свои данные и нажмите Отправить.

• После входа в систему главная Панель управления Chatwoot будет выглядеть примерно так, как показано на снимке ниже.

• Теперь нажмите кнопку +Новый почтовый ящик на левой панели. Он показывает несколько каналов, в которые мы хотим интегрировать нашу функцию чат-бота.

• Выберите вариант Веб-сайт, так как мы хотим развернуть чат-бот на нашем веб-сайте погоды в Netlify. Заполните данные своего веб-сайта и настройте цвет и приветствие чат-бота.

• Нажмите Создать папку "Входящие". На странице «Добавить агентов» вам нужно будет выбрать несколько сотрудников службы поддержки вашего проекта, которые будут действовать в качестве ответчика на сайте. Для этого блога это был бы я.

• Ура!! Наш почтовый ящик готов. Скопируйте код JavaScript, он пригодится на следующем шаге. Генерируется токен веб-сайта, и он уникален для каждого пользователя, мы скроем это, чтобы люди не использовали токен не по назначению.

Давайте теперь поместим этот фрагмент кода в наше исходное приложение погоды!

• Клонируйте погодное приложение repo from GitHub и откройте его в редакторе кода.
• Вставьте код папки «Входящие», созданный Chatwoot на предыдущем шаге, в файл chatwoot.js.

• Добавьте тег script, содержащий исходное местоположение chatwoot.js, в файл index.html: <script src="src/chatwoot.js"></script>
• Теперь, чтобы скрыть токен веб-сайта, создайте файл config.js. Обязательно добавьте config.js в файл .gitignore, чтобы ваши ключи API не попадали в репозиторий.

• Теперь в вашем файле chatwoot.js для экспорта TOKEN используйте config.CHATWOOT_KEY.
• Вот и все! Вы успешно реализовали функцию живого чата на своем сайте! Обновите, чтобы увидеть вашу реализацию локально на Live Server.

• Мы видим, как эта работа работает локально, теперь, если вы хотите разместить ее на такой платформе, как Netlify, вам придется выполнить еще несколько шагов. После привязки вашего репозитория в приложении Netlify вам нужно будет создать файл config.js, который содержит наши ключи API и TOKEN. Для этого перейдите в раздел Netlify > Развернуть > Параметры развертывания, а затем отредактируйте Команду сборки.

• Вставьте следующее в раздел Build Command: cd src && echo -e "var config = {\nWEATHER_API : 'API_KEY',\nGEOLOCATION_API : 'API_KEY',\nCHATWOOT_KEY: 'WEBSITE_TOKEN'\n}" > config.js
• Нажмите Сохранить, а затем Разверните свое веб-приложение. Нажмите на сгенерированную ссылку на сайт и проверьте функцию бота вживую!

Теперь вы, наконец, завершили базовую реализацию Chatwoot на своем веб-сайте, размещенном на Netlify!

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

Заключение

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

Чтобы узнать больше о Chatwoot, посетите здесь.

Спасибо, что дочитали до конца! Надеюсь, это поможет… 👩‍💻

Свяжитесь со мной, если у вас возникнут вопросы, или просто поздоровайтесь!👇