База знань Uspacy
Усі матеріалиМаркетингЧат на сайт

Віджет чату на сайт

Віджет чату на сайт

У цій статті ми розкажемо про те як створювати віджети чату, як підключати їх до своїх сайтів і як використовувати для взаємодії з клієнтами

Віджет чату на сайт – це один із інструментів для забезпечення взаємодії компанії з клієнтом.

Функціонально – це візуальний блок, який інтегрується на ваш сайт і надає можливість клієнтам зв’язатися з вами.

JsivkpvTkei5If0tko4Q_WSMT8FLovqIMtN-ClHTtTWXjs7jrxo371MA933tAqFFdjZvYAhOlJkA2UjqPXlTHdupbIssqLJvWmZRL0LQvoG8BQy8Z15DczRQfvsICi_yDrlnN5foJijZp-KiFwuKp8k

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

AD_4nXcvAmtuVGXdowBNulNM9S-HHOHLtGwngfLvP05qM4pvKDlpTwdFzXCR8YMiarL1bZ8uZm-kgeTtfvGTEvOqk0iURvDvN02XvMwLMJMNO8Rj6txiH7ZwisS4fp0ctqYx8_m-B4WJFg

Як створити віджет чату на сайт?

Для цього перейдіть у розділ Маркетинг – підрозділ Чат на сайт.

💡Доступ до цього розділу має тільки адміністратор або власник Простору.

AD_4nXd7_hnjQe0D24g4XsfDVMhR0l186jzxMWwzSEFvavzbUQWFEOR2PoO5p6FRyhXWl4n8dpo6kBUscpPCBXI87JFqV5qG3_qntE_IbZ1zGo8ZhbXNZbr15DFpJQkj269KYE16XW-_

На сторінці, що відкрилася, натисніть на кнопку Створити.

AD_4nXeXOe9rA-_jLY4GFN_V4NoqhgU3C-cje8dncZkrlr6vOQlR_Gfjpxz74TBy6UoZL3TYJZOyL5yIZM1HMGj9pbHIo4e9G99CkScLvY7hJiFSBfYdZzQDgYBqkZmT345CPNrW4jMk-g

Далі потрібно заповнити форму та налаштувати основні параметри.

AD_4nXdsfuX6VXDb7Pbp30DiD79En7aGSQwMDpe68QFDiDAJKK0GPUVMxpy9JOjMBD7cnDWd8VkSF3JHK7-_GFz7MaGN3ggw00ic7yeRpesuK6zw1dMdQoNCsowvsbZ2T7FptS185bXbww

Основна інформація

AD_4nXdtfO4xExUZPOfoeK-f4Edf8hN3NBAva1J72PT30n5Iq2Sbzao8ue66Qt-2iWEW_g4aEeJhbd1GnQfkHhM0CxTUJlY9W5WnOKh4TWeZM6_sRHzrLbdSz6l2uJbze01SUQde0ZSM5g

🟣 Назва каналу зовнішній ліній – назва, що буде відображена, коли чат з клієнтом надійде у Простір.

AD_4nXc8d8Xn6zIIEcEz4DstAdhbBe9SWe8TiAXwZiJaHkl0DP5H6CskrudA7b3MgSjf_DKo_Xtwyxe0FieAEmFJ2O0QodwjOFomTSktTVl-IRE2XvdUGPmWMLEZStmJ-Hh_7oG_Eh_gSA

🟣 Назва каналу на сайті – назва, що відображається у самому віджеті, її бачить клієнт.

urSpPTJBkBaGmJjIi60ceh_k_Ja_4dnoiePcwPe0a_G42Nm1UmqeR9FyKNPGYv3mwMoHfG721SkyK2rM-NQWqRfoCXqniUKhEI5J6P13bxfeDSnKBBkpJstECZyOzJ0H7f_hnIu7kEYW1v8NSF7hS0c

Налаштування оператора

AD_4nXefwNKbTpolbbzb2gZOGX5b9MlE7QzkIoDVtTkM8rifL-rJqepjO0MQK1KQuKg2vaRcHBr5SmYiMYfJWyi3GmMccjh5nWPPKVGNFd6eiJZUTfvvDKu2pLpUP8ZNaLESLYyJWEbfLA

🟣 Аватар та ім’я – будуть відображені безпосередньо у віджеті.

0pUmrPVtbTCXbREGRYKFxjQPA-qU069Po0nx7f1LZwmIGTDsyMfQ6sh_m1iptxxivB7itt0P5DjjmlQ-ezD1giU9nAmFshP171QOvEJ-vlC0AYr1kJtgdyMhCHC5NeaTLMry4VYlTeWC5YPzl0ViK1I

🟣 Текст вітального повідомлення – буде відображений одразу після відкриття віджету клієнтом на сайті. Його можна змінювати на власний смак.

Типовий текст звучить як:

Вітаю!

Зʼявилися запитання? Напишіть і чат і я залюбки відповім на них.

aRyByFRRoX4u2nYcI-ROk1XuC5igjOr0gXJ3wOGdqdl5kAmrxtjuZFL8FVVra5_SouCY8ofxd8wlEWCGoS4Gcu5StROyXqeXhJqo-9YEhGQEgK8ZCycYxlagYFA8pOBxbJvFvXWUz5sngmbYiy3B32Q

Зовнішній вигляд

AD_4nXfhHXty6ROyZoF4LAIK_rgWFEFGmFbzWIZFLEor1ULbmNHDVYTJ6zqasCNj2geXHGHLd1VIobrlAxv9ud-fGvyQ4F_9Z0fLCcNUD7_zwNcvRLXK0RdqOFSuIgjjTd0We1uOpnDidg

🟣 Вигляд віджету – колірне оформлення віджету на сайті. Можна вибрати із запропонованих стандартних кольорів або налаштувати свій.

AD_4nXf2tBdywIaZsAUVUjIHJUbgKOk3je7Uo5ag6o0byV3SO3s_AjRwDXrygzr68MBTiuaumBQt1qGkIlBhXfOaydLVxG0fVSa1zRVvhMXj_DGir84cRI5l_8fjXKN_tgUDwVhxyv8R

🟣 Іконка віджету – значок, який буде відображено на сайті.

R6i5b-ODLDiI3j7k1PZhIwuGBU-v-UnafhaAiRzu0YdCFYX0PsnTbOFZRPymCLVPA9Ln77g4IzqY4nON4hiV-HbOr_YGIpGun5qsOLwzVgIGT17NGE8rOfDbofgJKRaHVrfF8Zvm4ZlmxO2RqIP9Fmw

Коли всі налаштування зроблені, щоб завершити створення віджету, натисніть на кнопку Зберегти та згенерувати код.

AD_4nXcfjRdP28Nb98Oj_5CD2Ph0JHqYG3Uahy1lfmtfTrPy3oyxIquu7QmcuRXtHCBkn296tqfZ9L-YvcaKTmYRooSg0_MOD9vx73uEH2eSRM2Jquo_sf7VCrZK9W0ohJFOJpTGngE1

У результаті він збережеться у списку та відобразиться на сторінці.

AD_4nXd4D5Y_XY7cXGlfv8aJf4nGI22eI3GzuHPTrhFLUHsmGGecAp56SAy59pGfLEeR2KTe97O3JJTa1QtRJsAaznMxHnnHyTYMtoBC5X0xBCcuXcDNA4PZTd9wrEb4VImoocUvpjWnaw

Після цього віджет готовий до використання. Його можна вбудувати у код вашого сайту та використовувати для спілкування з клієнтами.

🌟Кількість віджетів, які можна створити та, з якими можна працювати залежить від тарифу:

Безкоштовний – 1

Стандартний – 5

Професійний – необмежено.

Але зверніть увагу, на такі моменти:

🟪 на тарифі Безкоштовний недоступне налаштування зовнішнього вигляду віджету. Тобто неможливо змінити іконку та її колірну схему.

🟪 при переході на нижчий тариф, «зайві» віджети будуть недоступні для роботи. Вони також зникають із сайтів, де були підключені. Але після повернення на комерційний тариф, віджет одразу активується. Повторно налаштувати та додавати на сайти не потрібно.

Як відредагувати?

Якщо вам потрібно внести зміни в будь-який блок параметрів, то натисніть на назву віджету у списку. Відриється форма налаштувань.

💡Блок Деталі підключення містить код віджету, який генерується автоматично. Звісно, його змінити неможливо. Але натисканням на відповідно іконку, можна його скопіювати.

AD_4nXcfGZyBJZj7w7vuRqC_IlASLHlza2xLLPBKnzBZFjVc8iN0l41NEz7Q0YlbMZYSbvHDrVqc9WcRued7gsk2TUcFf9p46rXEDSS5Yvhx7atMROb2KDEbwkNs2xGaHM--30TmbQgoyg

Відредагуйте необхідні параметри та натисніть Зберегти.

AD_4nXee2gH8RjVrXvGQ4snMSJtZw08gkbcSwHP_oBG-71FcoORxC1zuOcdF1S0DyWiLeFg1HjG29v9s2FkDL7Hw0FixMTYkefxXPYfPiOlf6Jcj4aSQrmi1hJXtTAV_zvlqmNVBdbYt_Q

💡 Якщо змінюєте вигляд віджета, то завжди зберігайте нові кольори для нього, щоб отримати коректне відображення.

AD_4nXdPnFO4JuakL7F5bBCBl5VDMTiT9xbJCL-V6BTMWF98KOc4ppcIvw7kvpWz8DFpv1rG1e8SiKYgwsPe2FSju0E8_Xaws3sGZx0HwD8gF--81HT4nHiVGhJvhV2mDxphKvfnyhETrg

Усі зміни одразу застосуються і відобразяться у віджеті.

Як видалити?

Для цього викличте меню взаємодії з потрібним віджетом і натисніть на відповідний пункт.

AD_4nXcRDDbg25lsTpd0nxjdXsE2dfmYs5l33t1RIj489-qhdIDqlKlWh3O7gwql-xdJeiJZFvEwK1TLkVP-N0IZQ2ohPYpyJmPoe4Z0NNg7NAn71zpWHRoUQKzk-T5E0XV5TJfk-qhsbg

Видалення потребує підтвердження.

віджет+чату22.jpg

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

Як додати на сайт?

Для цього спершу скопіюйте код віджета. Це можна зробити як одразу у списку, натиснувши на відповідну кнопку.

AD_4nXeG2mOmF8cQr37W6GZrngKxF7_gaWmvCVnJ6OIKy1k2BxuabGiT4Ah8f0KO3vM1JNZMBTq5NmB8cBDQo-VJ8Vv4a1qYMgLi6P5u44UnQelGtHSyzrCWNgV1rQL9fofnMIXwl7i59A

Або через блок Деталі підключення.

AD_4nXcPrnLPkDmoJKh1ii0B9jnPhBrzhFTRXIT1be11JTq453RaIU-XHOOCnSgGMsGdl4bxtkF0zWz7SID3ZELs2V_Grj_UyiNUXvo9OnjK76Fth7MjMmGsA3Q7yfoYuK-kFKNd9gQphQ

Далі потрібно перейти до налаштувань свого сайту та вставити скопійований код віджету перед закриваючим тегом /body.

💡Наприклад, у сервісі Хорошоп, це можна зробити так ⬇️

5acEVkLsIExit42ktB3V6Co0VtdPxygYunbtgZwzcW2ZvCCYi5OUPQUSaFCCHaI-cchPC6wtYRy4uwUvhvmRGJ7aPOtvLwgICKlbjrGWz1dQDJ5pqzBx8EkCkBjE3LJaqwIrErMOunUgO710liuDNnc

Як працює віджет чату?

Клієнт заходить на ваш сайт, знаходить віджет чату та пише вам.

mTb1d4qNiVGxWezihnSNnYdTpL6edfSmiX4MIBJ0YctRMgAeZKPwyhm_72BJhlxrnhx9q93TzmhtiF61jsrPohk2Lqczh7e6QyRC-ljRVXQsH_bVoy2Ca2lk6X3EhJEsw5SeIpPAy6YdSJgmLLBKaA8

Ви отримаєте його повідомлення у Зовнішні канали на вашому Просторі. Тобто ви зможете спілкуватися з клієнтом прямо в чаті.

AD_4nXf7XWiEd9UNhn3YnuKMgIIMJOzhhv5rYv2I_Lw-JzNvMbYq5-yNbIIB-YOYItOkmGhPP4diMfzZja5Km6-VA1gDBeBv6FOVYdCwLXWCVeeg5OmF5FqA-ancQ27pyFQELor1Iwi3

.

А він буде отримувати всі ваші відповіді у вікні віджету на сайті.

ntQ79dimm7x5e4VTrJ-V085MD7hxXHMnjvsP5ykeXE3IMfpKUM2VKTrLWhn4JOpVJUFFTQkRhEmRtiVzBmuT52eotwYTvsYZKV_HXvf-4bglPlvv2BdAOINFq0UJSxiPQIGkxuHSL-BsoxpWXMgBlbc

Крім того, на основі кожного діалогу буде створено Лід, з яким ви далі можете працювати в CRM і провести його всією воронкою продажів.

🔍 Детальніше про роботу з чатами зовнішніх каналів можна прочитати в окремій статті.

Створено: 13 лютого 2024 р. / Оновлено: 10 лютого 2026 р.