1. Предварительный просмотр конечного продукта
2. Наш список ингредиентов
3. Создание основного чата
4. Введение нгрок
5. Настройка вашего бесплатного номера
6. Обработка входящих текстов от клиентов
7. Отправка текстовых сообщений обратно клиентам
8. Все готово!

Узнайте больше о бесплатных смс Twilio здесь и начать с новыми номерами здесь ,

Большинству предприятий предоставляется бесплатный номер для обслуживания и поддержки клиентов. Но разве не было бы интереснее, если бы контакт-центры могли взаимодействовать с клиентами по новому каналу? текстовые сообщения - разрешить звонить и отправлять текстовые сообщения на один и тот же бесплатный номер?

В этом уроке я покажу вам, как добавить SMS-канал на ваш бесплатный номер для нового способа взаимодействия с вашими клиентами.

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

Это приложение будет иметь следующие функции:

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

По пути вы не только будете использовать Twilio для его мощного Messaging API, но также получите хорошую дозу AJAX, PHP и Javascript.

Предварительный просмотр конечного продукта

Здесь агент Алиса и агент Боб входят в чат-комнату поддержки. Клиент с номером телефона (650)123-1234 отправляет текстовое сообщение, которое отображается в окне браузера. Пользователь спрашивает о дате выхода телефонных номеров Twilio в Ирландии.

Не зная ответа, Боб спрашивает Алису. Этот обмен является внутренним для чата, и пользователь мобильного телефона не видит его. Получив ответ от Алисы, Боб отправляет текстовые сообщения обратно в чат-комнату на мобильный телефон, обозначенный символом @, за которым следуют номер телефона и текст. Это сообщение получено заказчиком. Текстовые сообщения становятся естественным расширением уже доступного сервисного канала. На данном этапе для агента не имеет значения, как они подключены, голосовая связь, обмен мгновенными сообщениями или SMS. Это безупречный опыт как для них, так и для клиентов.

Вот как выглядит этот обмен. Проверьте бесплатный номер, на который мы отправляем текст, и откуда мы получаем наш ответ.

В этом упражнении мы будем использовать существующие компоненты кода, поэтому вы должны быстро это сделать.

Наш список ингредиентов

Мы используем несколько компонентов, которые делают этот проект действительно простым. Лучше всего они все бесплатны. Для Twilio вам нужно регистрация на портале Twilio , Вы получаете бесплатный кредит в размере 30 долларов на свой счет после регистрации. Через портал вы можете приобрести бесплатные или мобильные телефонные номера с поддержкой SMS и получить доступ к REST API для обмена сообщениями и вспомогательная библиотека для PHP ,

Вот наши 4 основных ингредиента

• XAMPP или другой веб-сервер, который может отображать файлы php
• ngrok - перенаправляет HTTP-запрос через зашифрованный туннель через брандмауэр на локальный компьютер
• Twilio Бесплатные SMS для отправки и получения текстовых сообщений через программный интерфейс
• Готовое приложение для чата, которое мы добавим в текстовые сообщения SMS.

Создание основного чата

Если вы ищете код для систем мгновенного чата, вы найдете множество примеров в Интернете. Мы используем отличную работу Tutorialzine для основной функциональности чата. Я использовал XAMPP в качестве моего сервера приложений с уже настроенной базой данных MySQL. Вы можете скачать и установить XAMPP для вашей любимой ОС Вот ,

Контрольная точка - нагрузка HTTP: // локальный или же http://127.0.0.1

Это то, что вы должны увидеть

Если вы этого не видите, проверьте этот сайт за помощью.

Далее мы настроим базу данных MySQL с помощью удобного инструмента phpMyAdmin. phpMyAdmin поставляется с предустановленным XAMPP. Он предоставляет графический интерфейс для настройки базы данных MySQL. Вы можете загрузить его со стартовой страницы XAMPP, с левой стороны, близко к нижней части.

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

Создайте новую базу данных, выбрав вкладку SQL и указав следующую команду: «CREATE DATABASE ajaxchat», как на этом скриншоте.

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

Далее проверьте « Создание веб-чата AJAX Автор Мартин Ангелов. Прочитайте о лучших архитектурах для разработки веб-сайтов и загрузите его код с их сайта в папку htdocs под вашей установкой XAMPP. Разархивировав файлы, вы увидите файл tables.sql в самой верхней папке, который выполняет все необходимые команды для построения таблиц в нашей недавно созданной базе данных «ajaxchat». Давай сделаем это.

Я выбрал свою базу данных ajaxchat, а затем справа на вкладке «Импорт», где я просматривал файл tables.sql. По сути, мы импортируем файл с инструкциями SQL, которые мы собираемся запустить в нашей базе данных.

Нажмите GO и т. Д., В нашей базе данных есть две таблицы: «webchat_lines» и «webchat_users». Таблица пользователей не требует пояснений, это люди, вошедшие в веб-чат. Система принимает любой новый логин, нет необходимости в явной инициализации пользователей. Веб-чаты - это текстовые сообщения (и более поздние СМС). Мартин построил систему наиболее простым для нас способом. Любая строка в таблице webchat_lines отображается в окне чата браузера через AJAX. Позже, когда мы вставим наши SMS-сообщения в виде строк таблицы, они будут отображаться аналогичным образом.

Ниже в этом посте вы найдете файл Download to file 3rdPartyDB.php, который мы собираемся использовать. Вернитесь в загруженную папку ajax-chat. В папке ajax-chat в разделе php добавьте файл 3rdPartyDB.php, добавьте информацию о подключении к базе данных для подключения, которое мы настроили выше. Вот как это выглядит для меня.

Достаточно смел, чтобы попробовать это?

Контрольная точка - Загрузить Http: //localhost/ajax-chat/ajax-chat.html страницу и войдите под своим именем и адресом электронной почты.

Если это не работает, пожалуйста, вернитесь к руководство , который помещает все вещи в контекст. Теперь откройте две разные программы веб-браузера (я использую одну Firefox и одну Chrome), загрузите AJAX-чат в каждую и войдите в каждую под другим именем и адресом электронной почты. Система принимает любое имя / адрес электронной почты прямо сейчас. Мы загружаем чат через локальный URL на данный момент. Мы попадем на ngrok и общедоступные URL через секунду. Когда вы печатаете сообщения в одном окне, под одной учетной записью вы можете ответить из другого окна под своей другой учетной записью. Просто поговорите с самим собой, чтобы увидеть, как это работает. Все, что вы вводите в одном браузере, будет отображаться в вашем и других окнах.

Введение нгрок

Ngrok это бесплатный инструмент, который вы можете скачать Вот , Twilio, который мы собираемся использовать за секунду для текстовых сообщений, ожидает взаимодействия с нашим приложением. Это делается путем использования общедоступных / доступных через Интернет URL-адресов, но мой сервер XAMPP работает на моей машине за моим брандмауэром. Чтобы выставить мой веб-сервер в более широкий Интернет, мы используем ngrok. Это автономный исполняемый файл; У меня все еще есть это в моей папке Загрузок после многих месяцев.

Я зарегистрированный пользователь, поэтому я могу использовать доменное имя, которое легче запомнить. Я начинаю ngrok с ./ngrok -subdomain ralf 80

Это означает, что все запросы http://ralf.ngrok.com будет переадресован на мой сервер XAMPP, пока работает ngrok. Если вы не зарегистрированы в ngrok, вы получите несколько доменных имен. Просто посмотрите на результат работы инструмента, и он скажет вам, что это такое.

Checkpoint - загрузите нашу систему чата через ngrok. Перейдите к http://ralf.ngrok.com/ajax-chat/ajax-chat.html Ну, независимо от того, какое доменное имя вы выбрали или получили.

Если это работает: Браво! Если это не работает, но ngrok работает, проверьте это страница справки ,

Даже если мы еще ничего не сделали с текстовыми сообщениями, мы находимся за три четверти до конечного продукта. В остальном все легко, peasy лимон сжимается и только 15 минут осталось от работы.

Добавление соуса для обмена текстовыми сообщениями

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

Дизайн прост. Входящие текстовые сообщения, которые отправляются на бесплатный номер Twilio, будут отображаться в окне чата под номером телефона в виде метки. Исходящие текстовые сообщения, т. Е. Сообщения, отправленные клиенту, будут активированы путем ввода символа @, затем номера телефона и текста сообщения. Например, если набрать «@ 4151231234 Hello World» в окне чата, вы отправите Hello World на номер телефона +1 (415) 123-1234.

Я принял подход, чтобы использовать Twilio PHP вспомогательная библиотека , В качестве альтернативы, вы можете использовать cURL, но вспомогательная библиотека имеет такую ​​прекрасную инкапсуляцию функциональности Twilio REST.

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

Настройка вашего бесплатного номера

Купите бесплатный номер и давайте использовать его для текстовых сообщений.

Twilio отвечает на входящее текстовое сообщение обратным вызовом, иногда называемым webhook. Другими словами, Twilio отправит сообщение, а также мета-информацию на URL-адрес, который вы указали на портале своей учетной записи для своего номера. Основная информация включает параметры «От» (отправитель), «Кому» (номер Twilio) и «Тело» сообщения. Мы укажем этот URL-адрес запроса на сообщение в нашем веб-браузере, откуда он будет вставлен в базу данных и в конечном итоге появится в окне чата.

Вот скриншот, как вы настраиваете номер на портале вашей учетной записи.

Здесь мы указываем URL запроса обмена сообщениями на http://ralf.ngrok.com/ajax-chat/php/3rdPartyDB.php , Файл 3rdPartyDB.php, который вы можете найти в папке ajax-chat в папке php на диске, является тем файлом, в котором мы будем обрабатывать входящее сообщение. Нам просто нужно написать код, чтобы отобразить его в окне чата.

Обработка входящих текстов от клиентов

Нам нужно написать код, который получает обратный вызов Twilio и отображает текстовое сообщение на экране. Проверь это! Как упоминалось ранее, когда Twilio получает сообщение, он отправляет параметры «От», «Кому» и «Тело» на ваш URL-адрес запроса сообщения, который мы только что настроили как http: //…../3rdPartyDB.php. Итак, в этом файле мы сначала извлекаем, откуда приходит сообщение «От». «От» - номер телефона отправителя. Мы отобразим этот номер в окне чата. Далее мы также извлекаем само сообщение из запроса, который Twilio отправляет нам в том же запросе в параметре «Body».

Как я упоминал ранее, все, что вставлено в виде строки в нашу таблицу базы данных webchat_lines, будет отображаться в окне чата. Это то, что мы должны сделать. Мы вставляем пользователя, здесь пользователь - номер мобильного телефона, который отправил текстовое сообщение и само сообщение в базу данных. Мы избегаем строк, чтобы избежать атак на нашу базу данных.

Хотите верьте, хотите нет, но это все, что нужно для отображения входящего текстового сообщения в окне чата. Это 11 дополнительных строк простого кода. Слава Мартину и Слава Twilio. Идентификатор пользователя здесь - номер телефона отправителя. Входящее сообщение отображается после идентификатора пользователя.

Контрольная точка - давайте сначала проведем некоторое базовое тестирование. Мы подражаем Twilio здесь. В вашем браузере загрузите страницу http://ralf.ngrok.com/ajax-chat/php/3rdPartyDB.php?From=%2B14151231234&Body=test

Вы должны увидеть строку в окне чата, которая показывает сообщение «test» от пользователя 14151231234. [% 2B - это форма «+» в кодировке urlenco - об этом мы поговорим позже]. Если это не сработает, вернитесь в руководство, чтобы перепроверить все шаги.

Если это работает, продолжите, отправив номер Twilio, который вы настроили на портале учетной записи, текстовым сообщением со своего мобильного телефона и дождитесь его появления в окне чата, что должно быть в течение нескольких секунд.

Отправка текстовых сообщений обратно клиентам

Теперь, когда мы можем получать входящие текстовые сообщения в нашем окне чата, мы должны иметь возможность ответить. Тот же метод применяется и для охвата совершенно новых получателей. Мы будем отличать внутренние сообщения чата от внешних текстовых сообщений, используя специальный формат адреса. Как упоминалось ранее, мы будем использовать @sign, за которым следует номер телефона и текст для отправки, например @ 4151231234 Здравствуйте.

Давайте проверим код, который анализирует эту строку чата и использует Twilio для отправки текста на мобильный телефон. Мы работаем с файлом ajax.php здесь.

В ajax.php добавьте свои учетные данные Twilio в качестве переменных на страницу. Учетные данные вашей учетной записи можно найти в разделе панели управления вашей учетной записи Twilio. Мы также создаем экземпляр клиентского объекта Twilio, который предоставляет все методы для интеллектуального общения с Twilio. Да, и не беспокойся о проверке моих полномочий. Я изменил их с тех пор.

Оставшаяся задача - проверить текст, который был представлен в виде строки чата, и посмотреть, есть ли у него специальный маркер @phonenumber. Если это произойдет, мы сделаем вызов библиотеки Twilio для отправки текстовых сообщений. Вы можете увидеть это в следующем разделе.

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

Следующий блок кода используется для определения, является ли это текстовое сообщение со специальным маркером @, и для выполнения инкапсулированного запроса REST Twilio к ресурсу Twilio Messages, чтобы отправить сообщение.

Сначала мы убираем @symbol и определяем номер телефона и текст сообщения. Это делается с помощью некоторых функций разбора PHP. По сути, мы ищем группы номеров в текстовой строке и используем первую числовую строку в качестве номера телефона.

Одно замечание о $ to = ”+ 1”. $ К. Twilio ожидает числа в формате E.164. Это означает, что номер телефона должен быть отформатирован со знаком «+», затем кодом страны и номером. Также Twilio отправляет вам номера. В Северной Америке код страны равен 1, поэтому полный номер в E.164 будет выглядеть как +16501231234. Я не ожидаю, что агент узнает об этом и предположит, что он просто вводит @ 6501231234, как мы делаем это весь день. Вот почему я добавляю +1. Мы могли бы применить больше логики, но это кажется естественным.

Затем мы отправляем запрос в ресурс REST Twilio / Messages, чтобы отправить сообщение. Это делается с помощью вспомогательной библиотеки и этой строки кода:

$ sms = $ client -> account -> sms_messages -> create ($ from, $ to, $ chatFilteredText, array ());

За кулисами к ресурсу сообщений обращаются через https://api.twilio.com/2010-04-01/Accounts/ '. $ twilioAccountSid. '/SMS/Messages.xml',

POST к этому ресурсу ожидает «From», «To» и «Body», которые мы поставляем. Вспомогательная библиотека отнимает у нас все это RESTful мышление в цепочке объектов и методов. Милая.

Контрольная точка: зайдите в окно браузера своего веб-чата и отправьте себе текстовое сообщение. Вы можете набрать @ 4151231234 Я могу отправлять текстовые сообщения и общаться прямо сейчас через мой компьютер .

Все готово!

пара строк кода. Есть много других возможных улучшений. Вы можете отобразить номер телефона в имя пользователя прозрачно в базе данных. Вы можете использовать Twilio Message Delivery Information для отображения, если сообщение доставлено на устройство клиента. Или вы можете добавить клиент Twilio для включения голосовых вызовов в том же окне браузера, что и система чата.

Скачать

https://github.com/rschiffert/ajaxchat/blob/master/3rdPartyDB.php

Контакты и комментарии

Мы хотим увидеть, что вы создаете с помощью SMS-сообщений Twilio на бесплатных телефонных номерах, поэтому напишите нам и покажите, что у вас есть. Я в сети [email protected] или @guglhupf.

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

Похожие

Комментарии