Добавьте Видео-Чат в WordPress с помощью плагина

«Поговорите с нами сейчас!» Мы все видели такие всплывающие окна на популярных сайтах, которые сообщают, что если у вас есть вопрос или вам нужна помощь, есть кто-то (или что-то), к кому вы можете обратиться. Однако иногда чат просто не является подходящим средством для получения ответа на ваш вопрос или получения необходимой поддержки. Для более высокого качества опыта лучше использовать видео. В этой статье я покажу вам, как с помощью Twilio Video и немного JavaScript и PHP вы можете создать плагин Видео-Чата для WordPress, самой популярной системы управления контентом. Никогда не создавали плагин для WordPress? Не волнуйтесь, это простой и простой процесс. Хотите сразу перейти к готовому продукту? Нет проблем. Загрузите полный код плагина из этого репозитория Github. В противном случае, давайте начнем строить! Прежде чем мы начнем кодировать, нам нужно собрать несколько элементов, которые мы будем использовать для создания нашего плагина. Сначала вам понадобится установка WordPress, которая позволяет плагины. Это может быть либо установка на вашем локальном компьютере, либо удаленно на хостинг-провайдере, таком как DigitalOcean. К сожалению, WordPress.com не позволяет загружать пользовательские плагины. Далее вам понадобится аккаунт Twilio. Если у вас его еще нет, зарегистрируйтесь бесплатно! С установкой WordPress и аккаунтом Twilio в руках мы можем начать создавать наш плагин. Плагины WordPress — это фрагменты PHP-кода, JavaScript и CSS, которые могут расширить и расширить функциональность вашего сайта WordPress. Когда вы устанавливаете плагин, WordPress размещает ресурсы этого плагина в новом каталоге под каталогом `/wp-content/plugins/` вашей установки WordPress. Именно там мы начнем создавать наш новый плагин, создавая необходимую структуру папок и файлов. Создайте новую папку с именем `twilio-video` в каталоге плагинов. В этой папке создайте структуру папок и файлов, соответствующую списку ниже. На данный момент вы можете оставить файлы пустыми, мы добавим содержимое в них по мере продвижения. — /wp-content/plugins/twilio-video — twilio-video.php — randos.php — twilio-video.html — /js — twilio-video.js — /css — twilio-video.css — /lib С основной структурой плагина на месте давайте начнем добавлять содержимое. Загрузите стили CSS для плагина из репозитория Github и поместите их в файл `twilio-video.css`. Теперь также хорошее время, чтобы добавить библиотеку помощника Twilio-PHP в наш проект. Поскольку Twilio Video все еще находится в бета-версии, вам нужно загрузить библиотеку помощника из быстрого стартера приложения Twilio Video для JavaScript или из ветки edge-release репозитория twilio-php на Github. Как только у вас будут файлы библиотеки помощника, скопируйте их в папку `/lib`. Наконец, нам понадобится один последний подготовленный ресурс. Генератор случайных имен, который мы будем использовать позже, чтобы присвоить идентификатор каждому клиенту, который подключается к агенту. Откройте `randos.php` и поместите код из соответствующего файла Github в него. Отлично. Теперь мы готовы написать код для нашего плагина. Чтобы начать, нам нужно создать заголовок плагина, который представляет собой просто метаданные, которые WordPress использует, чтобы узнать некоторые вещи о нашем плагине. Эти метаданные входят в файл `twilio-video.php`. Откройте этот файл в вашем любимом редакторе и добавьте следующее: Заголовок `Plugin Name` — это единственный обязательный заголовок, но есть много других, которые вы можете использовать, чтобы предоставить еще больше информации о вашем плагине WordPress. На этом этапе файл PHP теперь является действительным плагином WordPress, и вы можете перейти на ваш сайт администратора WordPress и установить его. Плагин пока не делает ничего, поэтому он довольно скучный. Давайте оживим его, добавив WordPress, чтобы он добавил JavaScript SDK Twilio Video и интерфейс нашего плагина на любую страницу, которую он отображает. Вернитесь в `twilio-video.php` и вызовите функцию `add_action`, чтобы подключить действие `wp_enqueue_scripts`. Это действие позволяет нам сказать WordPress о функции, определенной в нашем плагине, которую мы хотим, чтобы он вызвал, когда он определяет, какие ресурсы включить в отображаемую веб-страницу. В этой функции мы вызовем функции `wp_enqueue_style` и `wp_enqueue_script`, чтобы сообщить WordPress о скриптах и стилях, которые наш плагин должен включить в веб-страницу. Для нашего плагина мы подключаем один файл `twilio-video.css`, jQuery, JavaScript SDK Twilio Video и файл `twilio-video.js`, который мы создали ранее. Как только скрипты и CSS окажутся в отображаемом HTML, мы можем использовать API и стили, которые они содержат, чтобы создать интерфейс нашего плагина. Откройте `twilio-video.html` в вашем текстовом редакторе и добавьте следующий HTML: Сохраните этот файл и откройте ваш сайт WordPress в браузере. Вы должны увидеть, что плагин появляется в качестве фиксированного элемента в правом нижнем углу сайта. Давайте посмотрим на шаблон HTML, который мы добавили. У него есть три основных части: — `div`, который приглашает пользователя поговорить с агентом для поддержки. — `div`, который сообщает пользователю, что он подключается к агенту. — `div`, который показывает пользователю и агенту видеопотоки, позволяя им разговаривать. Когда пользователь взаимодействует с интерфейсом плагина, мы будем использовать JavaScript, чтобы показать и скрыть эти различные элементы. Откройте файл `twilio-video.js`, где мы добавим клиентскую логику нашего плагина. Чтобы начать, мы сначала используем jQuery, чтобы сделать асинхронный запрос и получить содержимое файла `twilio-video.html`, а затем добавить это HTML в элемент `body` веб-страницы. Сохраните файл и загрузите ваш сайт WordPress в браузере, чтобы увидеть, как интерфейс плагина оживает. Теперь, когда у нас есть немного интерфейса для нашего плагина, давайте добавим некоторую интерактивность. Вернитесь в наш файл JavaScript и добавьте обработчик клика на кнопку `enter-queue`. Когда эта кнопка нажата, мы переключим интерфейс плагина на следующий этап, сообщив пользователю, что мы подключаем его к агенту. Обновите браузер, нажмите кнопку «Подключиться». Отлично, вы подключаетесь к агенту! Нет, не真的, потому что мы еще не подключили Twilio Video. Чтобы начать видеоконференцию между пользователем и агентом, нам нужно создать нового клиента Conversation для пользователя и заставить этого клиента начать слушать приглашения к разговору. Мы хотим сделать это только тогда, когда пользователь нажимает «Подключиться», сообщая нам, что он хочет поговорить с агентом. Создание клиента Conversation требует токена доступа, который включает в себя идентификатор клиента и учетные данные, необходимые для аутентификации с Twilio. Создание токена доступа требует секретов Twilio. Чтобы помочь сохранить эти секреты в секрете, мы сгенерируем токен на сервере и выставим его через REST API, который может быть вызван нашим JavaScript. WordPress уже выставляет свой собственный REST API и делает очень легко добавить свои собственные конечные точки к нему. Откройте `twilio-video.php` еще раз и используйте функцию `add_action`, чтобы подключить действие `rest_api_init`. Здесь мы говорим WordPress, чтобы он зарегистрировал маршрут, который реагирует на GET-запросы по пути `/wp-json/twilio-video-api/v1/twilio-video-token/`. Когда запрос отправляется по этому URL, WordPress вызывает функцию `twilio_video_get_token`, которая использует библиотеку помощника Twilio-PHP, чтобы сгенерировать новый токен доступа, содержащий грант, позволяющий клиенту участвовать в видеоконференции. Этот токен вместе с случайно выбранным идентификатором возвращается в качестве объекта JSON из функции. С кодом на месте последнее, что нам нужно сделать, — это добавить наши секреты Twilio. Секреты, которые нам нужны, — это: — Account SID — API Key SID — API Secret — Configuration Profile SID Чтобы получить все эти секреты, нам нужно перейти в раздел Programmable Video консоли разработчика Twilio. Как только вы там, получите свой Account SID: Далее создайте новый профиль конфигурации. Профиль конфигурации — это набор значений конфигурации для веб-хуков и других опций для Programmable Video. Введите дружественное имя для вашего профиля конфигурации, нажмите «Сохранить» и получите RTC Profile SID: Поместите свои секреты Twilio в код PHP и дайте вашему новому конечному пункту API WordPress поворот, открыв браузер, указывающий на URL API. Фантастически! Теперь мы можем вернуться к созданию видеоконференции. Вернитесь в `twilio-video.js`, и мы снова воспользуемся jQuery, чтобы получить новый токен доступа из API, который мы только что создали. Используя этот токен, создайте новый объект AccessManager, чтобы передать его в конструктор объекта Conversation Client. Последний шаг — обработать входящее приглашение и позволить пользователю и агенту действительно разговаривать. Чтобы сделать это, мы подключим обработчик события `invite` клиента Conversation. Это событие передает нам объект IncomingInvite, который мы будем использовать, чтобы клиент автоматически принял приглашение. Как только приглашение принято, мы готовы начать вызов, который мы делаем, вызывая функцию `conversationStarted`. Функция `conversationStarted` начинает переключать интерфейс плагина на вид разговора и использует функцию `attach` объекта LocalMedia, предоставленного объектом Conversation, чтобы направить местный видеопоток в интерфейс плагина. Она также начинает слушать событие `participantConnected`, которое сработает, когда агент, который пригласил пользователя, начинает передавать свой видеопоток. Когда это событие срабатывает, плагин использует функцию `attach` объекта Media, предоставленного объектом Participant, переданным в событие, чтобы направить этот видеопоток в интерфейс плагина. Наконец, функция начинает слушать события `participantDisconnected` и `disconnected` разговора, которые сообщают ему, чтобы сбросить плагин обратно в его исходное состояние. Это завершает код для нашего плагина видеочата. Чтобы протестировать его от начала до конца, перезагрузите браузер и нажмите кнопку «Подключиться», чтобы клиент ждал приглашения к разговору. Откройте консоль разработчика в вашем браузере и получите идентификатор, который был записан в нее. Нам понадобится это, чтобы агент знал, какой клиент пригласить. Чтобы протестировать роль агента, вернитесь в раздел Programmable Video консоли разработчика Twilio и откройте раздел инструментов тестирования вкладки Dev Tools. Эти инструменты тестирования позволяют создать клиент Conversation, подключенный к вашему профилю конфигурации, и пригласить другого клиента в разговор. Введите имя, такое как «Агент», в поле идентификатора клиента, выберите свой профиль конфигурации из выпадающего списка и нажмите кнопку «Сгенерировать токен». Теперь прокрутите вниз, введите идентификатор, который вы получили ранее из консоли браузера, и нажмите кнопку «Создать разговор». Это отправит приглашение клиенту, работающему в браузере плагина, и начнет видеоконференцию между инструментами тестирования и вашим пользователем WordPress. Поздравляем! Теперь у вас есть плагин Видео-Чата, который можно вставить в любой сайт на основе WordPress. Подводя итог WordPress лежит в основе впечатляющего числа веб-сайтов и используется для создания всего, от личных блогов до полнофункциональных электронных коммерческих приложений. Если вы или ваша компания используете его в качестве основы для веб-сайта, добавление видеочата, работающего на Twilio, — это высококачественный способ связаться с вашими клиентами. Плагины — это отличный способ расширить функциональность вашего сайта с помощью этой возможности. В этой статье я показал, как с помощью немного PHP и JavaScript вы можете создать плагин, который вставляет Видео-Чат Twilio. Пример в этой статье — это только начало того, что вы можете сделать с помощью Twilio Video и WordPress. Загрузите исходный код и начните экспериментировать. Некоторые интересные способы продолжения этого проекта будут включать добавление видеоконтролов в интерфейс плагина, интеграцию системы пользователей WordPress в плагин, чтобы агент знал, какой клиент звонит, и даже интеграцию TaskRouter, чтобы маршрутизировать входящие видеозвонки к правильному доступному агенту. Мне было бы интересно увидеть, куда вы приведете Twilio Video и WordPress. Напишите мне письмо или свяжитесь со мной в Twitter с вашими хаками.