Како интегрисати функцију ћаскања уживо у Реацт апликацију користећи Цхатвоот

Замислите ово: неко ко користи један од ваших производа наилази на проблем. Постоји неколико канала које могу користити да пријаве проблем и покушају да га реше.

Међу њима су могли да се одлуче за имејл или позив. Али ови канали комуникације не гарантују брзе одговоре, а камоли у реалном времену. Али живо, интерактивно ћаскање са професионалцем за корисничку подршку може се показати непроцењивим.

Функција ћаскања уживо се показала као веома користан алат за комуникацију. То је зато што вам омогућава да боље комуницирате са корисницима, побољшате корисничко искуство и брзо и у реалном времену решавате проблеме.

Шта је ћаскање уживо и зашто је важно?

Функција ћаскања уживо је обично укључена као виџет са стране веб странице или искачући прозор који се појављује након што се сајт учита. Омогућава комуникацију у реалном времену између корисника и представника корисничке службе или тимова за подршку, директно унутар апликације.

Корисници функције ћаскања уживо могу да постављају хитна питања о производу, да се распитају о областима које не разумеју или да пријаве проблем и траже решења. У међувремену, ваши тимови за корисничку подршку могу пружити детаљне повратне информације у реалном времену, персонализоване за корисника.

Предности интеграције функције ћаскања уживо

Интеграција функције ћаскања уживо може донети неколико предности:

• Побољшајте напоре за корисничку подршку. Одличан производ је добар онолико колико је добра његова употреба. Интеграција функције ћаскања уживо помаже да се значајно побољша корисничко искуство пружајући једноставан начин да брзо добијете помоћ и одговоре. На крају, ово ће вам помоћи да понудите боље услуге које поједностављују употребу вашег производа.
• Повећајте ангажовање купаца. Ћаскање уживо омогућава корисницима да комуницирају са вашом апликацијом у реалном времену, чинећи да се осећају цењено. Ово их подстиче да се више ангажују, пријаве и тестирају више функција.
• Генеришите више потенцијалних клијената и повећајте продају. Овај комуникациони канал пружа могућност за личну интеракцију са вашим корисницима. Можете искористити ову прилику да ухватите потенцијалне клијенте и претворите их у купце. Такође можете да дате препоруке за производе и да их додатно продате на одређеним пакетима вашег производа.
• Извор корисничких података. У дигиталној економији, приступ тачним подацима о корисницима може значајно да вас стави испред конкуренције. Када вам корисници кажу о грешкама или другим проблемима са производом, те повратне информације су веома драгоцене. Можете сазнати више о томе како они ступају у интеракцију са вашом услугом и користити је за побољшање вашег производа.

Шта је Цхатвоот?

Цхатвоот је платформа за корисничку подршку отвореног кода која пружа персонализован начин интеракције са вашим корисницима. Такође пружа поједностављену платформу за одговарање на упите корисника и пружање повратних информација на више канала у реалном времену.

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

Користећи овај водич, можете интегрисати Цхатвоот са својом апликацијом и тестирати његову функцију ћаскања уживо са Реацт клијентом и контролном таблом за корисничку подршку.

Подешавање Цхатвоот пројекта

Цхатвоот пружа прилагодљиви додатак за ћаскање уживо који можете лако да интегришете у своју апликацију. Можете га прилагодити колико год је то могуће да одговара вашим потребама корисничке службе.

Када уградите код додатка у своју апликацију, корисник може да комуницира са вашим тимовима за корисничку подршку и они могу да управљају тим разговорима са контролне табле Цхатвоот агента.

1. Пређите на Цхатвоот-ова веб страница, пријавите се за налог и идите на корисничку контролну таблу.
2. Да бисте управљали разговорима својих корисника, прво морате да подесите пријемно сандуче и прилагодите га на основу онога што вам је потребно. Кликните на Ново пријемно сандуче дугме за почетак.
3. Сада изаберите канал у који желите да интегришете Цхатвоот. За овај водич изаберите Веб сајт пошто га интегришете у Реацт апликацију.
4. Затим попуните детаље своје веб локације. За локални развој можете да тестирате функцију са УРЛ-ом локалног домена домаћина, међутим, када га примените у продукцији, не заборавите да ажурирате домен активним УРЛ-ом.
5. На крају, додајте агента/е за управљање разговорима у овом пријемном сандучету. Ово може бити члан вашег тима за корисничку подршку.

Успешно сте поставили Цхатвоот-ово ћаскање уживо са вашом веб локацијом која је постављена као канал комуникације. Цхатвоот ће генерисати код који треба да уградите у своју апликацију да бисте додали виџет функције ћаскања уживо. Овај код је веома флексибилан јер га лако интегришете у веб клијент изграђен са било којим од ЈаваСцрипт фронтенд оквири.

Ако желите да прилагодите подешавање даље кликните на Више подешавања дугме.

Реацт Пројецт Сетуп

Направите Реацт апликацију и уградите Цхатвоот-ов додатак за ћаскање уживо да бисте тестирали функцију. Направите Реацт апликацију и креирајте ЕНВ датотеку у основном директоријуму фасцикле вашег пројекта да бисте држали токен ваше веб локације.

РЕАЦТ_АПП_ВЕБСИТЕ_ТОКЕН = токен

Следеће, у срц директоријум, креирајте нови фолдер и назовите га компонентама. У овој фасцикли направите нову датотеку: Ливецхат.јс.

Додајте следећи код овој датотеци:

увоз Реагујте, {усеЕффецт} из'реаговати'
функцијаУживо ћаскање () {
 усеЕффецт(() => {
прозор.цхатвоотСеттингс = {
 хидеМессагеБуббле: лажно,
 позиција: "јел тако", 
 локација: "ен", 
тип: "стандардни"
 };

 (функција(д, т) {
вар БАСЕ_УРЛ = " https://app.chatwoot.com";
вар г = д.цреатеЕлемент (т), с = д.гетЕлементсБиТагНаме (т)[0];
 г.срц = БАСЕ_УРЛ + "/пацкс/јс/сдк.јс";
 г.дефер = истина;
 г.асинц = истина;
с.парентНоде.инсертБефоре(г, с);
 г.онлоад = функција() {
прозор.цхатвоотСДК.трцати({
вебситеТокен: процес.енв.РЕАЦТ_АПП_ВЕБСИТЕ_ТОКЕН,
 басеУрл: БАСЕ_УРЛ
 })
 }
 })(документ, "скрипта");
 }, []);
повратакнула;
};
извозУобичајено Уживо ћаскање;

Овај код интегрише Цхатвоот-ову функцију ћаскања уживо у вашој Реацт апликацији. УсеЕффецт кука покреће код унутар повратног позива једном када се компонента монтира. Прво, иницијализује Цхатвоот подешавања за ову функцију. Затим покреће функцију додатка, коју обезбеђује Цхатвоот, која поставља виџет за ћаскање уживо на страници.

Он прослеђује вебситеТокен као параметар функцији цхатвоотСДК.рун која повезује апликацију са вашим Цхатвоот налогом. Коначно, функција ћаскања уживо враћа нулту вредност пошто се од вас не захтева да рендерујете ХТМЛ елементе.

Тестирајте функцију ћаскања уживо

1. Увезите ову компоненту у свој апп.јс датотеку и покрените развојни сервер да бисте ажурирали направљене промене. Требало би да видите виџет за ћаскање уживо на вашем Реацт-у који ради у прегледачу.
2. Да бисте тестирали функцију ћаскања уживо, кликните на виџет да бисте отворили зид за ћаскање и откуцали поруку.
3. Сада идите на своју корисничку таблу за Цхатвоот и идите до свог пријемног сандучета, требало би да видите нову поруку. Подразумевано, Цхатвоот ће генерисати неке поруке и аутоматски одговорити одмах након што корисник пошаље поруку, попут оних које видите испод. Унесите одговор на поруку и кликните на пошаљи. Вратите се на зид за ћаскање са виџетима у својој апликацији да бисте видели одговор.

Успешно сте интегрисали функцију ћаскања уживо у своју апликацију са врло мало линија кода.

Да ли је функција ћаскања уживо вредна тога?

Функција ћаскања уживо је одличан начин да пружите корисничку услугу, повећате задовољство купаца и побољшате корисничко искуство.

Пружа комуникациони канал са потенцијалом да повећа ангажовање, смањи време одговора и персонализује корисничку подршку. На крају, то би требало да вам помогне да побољшате рад корисничке службе уз мало труда.