Как интегрировать функцию живого чата в приложение React с помощью Chatwoot

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

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

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

Что такое онлайн-чат и почему это важно?

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

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

Преимущества интеграции функции живого чата

Интеграция функции живого чата может принести несколько преимуществ:

• Улучшить работу по обслуживанию клиентов. Хороший продукт настолько хорош, насколько хорош его использование. Интеграция функции живого чата помогает значительно улучшить взаимодействие с пользователем, предоставляя простой способ быстро получить помощь и ответы. В конечном счете, это поможет вам предлагать более качественные услуги, которые оптимизируют использование вашего продукта.
• Увеличение вовлеченности клиентов. Живой чат позволяет пользователям взаимодействовать с вашим приложением в режиме реального времени, заставляя их чувствовать себя ценными. Это побуждает их больше участвовать, регистрироваться и тестировать больше функций.
• Генерируйте больше лидов и увеличивайте продажи. Этот канал связи обеспечивает возможность личного общения с вашими пользователями. Вы можете использовать эту возможность для захвата лидов и превращения их в клиентов. Вы также можете предоставлять рекомендации по продуктам и продавать их в определенных пакетах вашего продукта.
• Источник пользовательских данных. В цифровой экономике доступ к точным данным о пользователях может значительно опередить конкурентов. Когда пользователи сообщают вам об ошибках или других проблемах с продуктом, такая обратная связь очень ценна. Вы можете узнать больше о том, как они взаимодействуют с вашим сервисом, и использовать это для улучшения вашего продукта.

Что такое Чатвут?

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

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

Используя это руководство, вы можете интегрировать Chatwoot со своим приложением и протестировать его функцию живого чата с клиентом React и панелью управления поддержкой клиентов.

Настройка проекта Chatwoot

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

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

1. Направляйтесь к Сайт Chatwoot, зарегистрируйте учетную запись и перейдите к панели управления пользователя.
2. Чтобы управлять разговорами ваших пользователей, вам нужно сначала настроить почтовый ящик и настроить его в зависимости от того, что вам нужно. Нажать на Новый почтовый ящик кнопку, чтобы начать.
3. Теперь выберите канал, в который вы хотите интегрировать Chatwoot. Для этого руководства выберите Веб-сайт так как вы интегрируете его в приложение React.
4. Далее заполните данные своего веб-сайта. Для локальной разработки вы можете протестировать эту функцию с URL-адресом домена локального узла, однако после развертывания в рабочей среде не забудьте обновить домен с помощью действующего URL-адреса.
5. Наконец, добавьте агента/ов для управления разговорами в этом почтовом ящике. Это может быть сотрудник вашей службы поддержки.

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

Если вы хотите настроить параметры далее, нажмите кнопку Больше настроек кнопка.

Реагировать на настройку проекта

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

REACT_APP_WEBSITE_TOKEN = токен

Далее, в источник каталог, создайте новую папку и назовите ее компоненты. В этой папке создайте новый файл: Livechat.js.

Добавьте в этот файл следующий код:

Импортировать Реагируйте, {useEffect} от«реагировать»
функцияЖивой чат () {
 использоватьЭффект(() => {
окно.chatwootSettings = {
 скрытьсообщениепузырька: ЛОЖЬ,
 позиция: "верно", 
 локаль: "ан", 
тип: "стандарт"
 };

 (функция(д, т) {
вар БАЗОВЫЙ_URL = " https://app.chatwoot.com";
вар g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 г.отложить = истинный;
 г.асинхронный = истинный;
с.parentNode.insertBefore(г, с);
 г.загрузка = функция() {
окно.chatwootSDK.бегать({
веб-сайтТокен: процесс.env.REACT_APP_WEBSITE_TOKEN,
 базовый URL: BASE_URL
 })
 }
 })(документ, "сценарий");
 }, []);
возвращатьсянулевой;
};
экспортпо умолчанию Живой чат;

Этот код интегрирует функцию живого чата Chatwoot в ваше приложение React. Хук useEffect запускает код внутри обратного вызова один раз при монтировании компонента. Во-первых, он инициализирует настройки Chatwoot для этой функции. Затем он запускает функцию плагина, предоставленную Chatwoot, которая устанавливает виджет живого чата на странице.

Он передает веб-сайтToken в качестве параметра функции chatwootSDK.run, которая связывает приложение с вашей учетной записью Chatwoot. Наконец, функция живого чата возвращает значение null, поскольку вам не требуется отображать какие-либо элементы HTML.

Протестируйте функцию живого чата

1. Импортируйте этот компонент в свой app.js файл и запустите сервер разработки, чтобы обновить внесенные изменения. Вы должны увидеть виджет живого чата на вашем React, работающем в браузере.
2. Чтобы протестировать функцию живого чата, щелкните виджет, чтобы открыть стену чата, и введите сообщение.
3. Теперь перейдите на панель управления пользователя Chatwoot и перейдите в папку «Входящие», вы должны увидеть новое сообщение. По умолчанию Chatwoot будет генерировать некоторые сообщения и автоматически отвечать сразу после того, как пользователь отправит сообщение, подобное тем, которые вы видите ниже. Введите ответ на сообщение и нажмите «Отправить». Вернитесь к стене чата виджета в своем приложении, чтобы просмотреть ответ.

Вы успешно интегрировали функцию живого чата в свое приложение, написав всего несколько строк кода.

Стоит ли использовать функцию живого чата?

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

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