Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Представете си това: някой, който използва един от вашите продукти, среща проблем. Има няколко канала, които могат да използват, за да докладват за проблема и да се опитат да го разрешат.

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

Функцията за чат на живо се оказа много полезен инструмент за комуникация. Това е така, защото ви позволява да се ангажирате по-добре с потребителите, да подобрите потребителското изживяване и да отстранявате проблеми бързо и в реално време.

Какво е чат на живо и защо е важен?

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

instagram viewer

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

Ползите от интегрирането на функция за чат на живо

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

  • Подобрете усилията за обслужване на клиенти. Страхотният продукт е толкова добър, колкото и неговата употреба. Интегрирането на функция за чат на живо помага за значително подобряване на изживяването на потребителя, като предоставя лесен начин за бързо получаване на помощ и отговори. В крайна сметка това ще ви помогне да предложите по-добри услуги, които рационализират използването на вашия продукт.
  • Увеличете ангажираността на клиентите. Чатът на живо позволява на потребителите да взаимодействат с вашето приложение в реално време, което ги кара да се чувстват ценени. Това ги подтиква да се ангажират повече, да се регистрират и да тестват повече функции.
  • Генерирайте повече потенциални клиенти и увеличете продажбите. Този комуникационен канал предоставя възможност за лично взаимодействие с вашите потребители. Можете да използвате тази възможност, за да привлечете потенциални клиенти и да ги превърнете в клиенти. Можете също така да предоставяте препоръки за продукти и да ги продавате нагоре за конкретни пакети от вашия продукт.
  • Източник на потребителски данни. В цифровата икономика достъпът до точни данни за потребителите може значително да ви постави пред конкуренцията. Когато потребителите ви съобщават за грешки или други проблеми с продукта, тази обратна връзка е много ценна. Можете да научите повече за това как те взаимодействат с вашата услуга и да я използвате, за да подобрите продукта си.

Какво е Chatwoot?

Chatwoot е платформа за обслужване на клиенти с отворен код, която предоставя персонализиран начин за ангажиране с вашите потребители. Той също така предоставя опростена платформа, за да отговаряте на запитванията на потребителите и да предоставяте обратна връзка в множество канали в реално време.

Можете да използвате неговите инструменти за автоматизация, анализи и отчети, за да анализирате ангажираността на потребителите и лесно и ефективно да управлявате операциите по обслужване на клиенти.

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

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

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

След като вградите кода на приставката във вашето приложение, потребителят може да комуникира с вашите екипи за поддръжка на клиенти и те могат да управляват тези разговори от таблото за управление на агента на Chatwoot.

  1. Насочете се към Уебсайтът на Chatwoot, регистрирайте се за акаунт и отворете потребителското табло за управление.
  2. За да управлявате разговорите на вашите потребители, първо трябва да настроите входяща кутия и да я персонализирате въз основа на това, от което се нуждаете. Кликнете върху Нова входяща кутия бутон, за да започнете.
  3. Сега изберете канала, в който искате да интегрирате Chatwoot. За това ръководство изберете уебсайт тъй като го интегрирате в приложение на React.
  4. След това попълнете данните за уебсайта си. За локално развитие можете да изпробвате функцията с URL адрес на домейн на локален хост, но след като внедрите в производствена среда, не забравяйте да актуализирате домейна с активния URL адрес.
  5. И накрая, добавете агент/и, за да управлявате разговорите в тази входяща кутия. Това може да е член на вашия екип за поддръжка на клиенти.

Успешно сте настроили чата на живо на Chatwoot с вашия уебсайт, зададен като комуникационен канал. Chatwoot ще генерира кода, който трябва да вградите в приложението си, за да добавите приспособлението за чат на живо. Този код е много гъвкав, тъй като лесно го интегрирате в уеб клиент, изграден с който и да е от JavaScript фронтенд рамки.

Ако искате да персонализирате настройката, щракнете върху Още настройки бутон.

Настройка на проекта React

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

REACT_APP_WEBSITE_TOKEN = токен

На следващо място, в src директория, създайте нова папка и я наименувайте компоненти. В тази папка създайте нов файл: Livechat.js.

Добавете следния код към този файл:

импортиране Реагирайте, {useEffect} от"реагира"
функцияЧат на живо () {
 useEffect(() => {
прозорец.chatwootSettings = {
 hideMessageBubble: невярно,
 позиция: "вдясно", 
 локал: "bg", 
Тип: "стандартен"
 };

 (функция(d, t) {
вар BASE_URL = " https://app.chatwoot.com";
вар g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 g.defer = вярно;
 g.async = вярно;
с.parentNode.insertBefore(ж, с);


 g.onload = функция() {
прозорец.chatwootSDK.бягай({
websiteToken: процес.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(документ, "скрипт");
 }, []);


връщаненула;
};
износпо подразбиране Чат на живо;

Този код интегрира функцията за чат на живо на Chatwoot във вашето приложение React. Куката useEffect изпълнява кода вътре в обратното извикване веднъж, когато компонентът се монтира. Първо, той инициализира настройките на Chatwoot за функцията. След това изпълнява функцията на приставката, предоставена от Chatwoot, която настройва приспособлението за чат на живо на страницата.

Той предава websiteToken като параметър към функцията chatwootSDK.run, която свързва приложението с вашия акаунт в Chatwoot. И накрая, функцията за чат на живо връща нула, тъй като не се изисква да изобразявате никакви HTML елементи.

Тествайте функцията за чат на живо

  1. Импортирайте този компонент във вашия app.js файл и завъртете сървъра за разработка, за да актуализирате направените промени. Трябва да видите приспособлението за чат на живо на вашия React, работещо в браузъра.
  2. За да тествате функцията за чат на живо, щракнете върху изпълнимия модул, за да отворите стената за чат за разговори и въведете съобщение.
  3. Сега преминете към вашето потребителско табло за управление на Chatwoot и отворете входящата си поща, трябва да видите ново съобщение. По подразбиране Chatwoot ще генерира някои съобщения и ще отговаря автоматично веднага след като потребителят изпрати съобщение, като тези, които виждате по-долу. Въведете отговор на съобщението и щракнете върху изпращане. Върнете се към стената за чат с приспособления на вашето приложение, за да видите отговора.

Успешно сте интегрирали функция за чат на живо в приложението си с много малко редове код.

Заслужава ли си функцията за чат на живо?

Функцията за чат на живо е чудесен начин за предоставяне на обслужване на клиенти, повишаване на удовлетвореността на клиентите и подобряване на потребителското изживяване.

Той осигурява комуникационен канал с потенциал за увеличаване на ангажираността, намаляване на времето за реакция и персонализиране на поддръжката на клиентите. В крайна сметка това трябва да ви помогне да подобрите операциите за обслужване на клиенти с малко усилия.