Віджет каналів зв’язку постачається разом з продуктом G-PLUS CRM – галузевою CRM для девелоперів є його невід’ємною частиною. Даний віджет надає можливість підключити на сайт всі канали зв’язку з компанією забудовника. Таким чином, потенційні покупці, клієнти забудовника зв’язуються з забудовником через зручний канал зв’язку, а забудовник відповідає із CRM.
З точки зору бізнесу, це надає можливість тримати всі комунікації під контролем. Детальніше про те, як організувати процеси комунікації таким чином, щоб переписки були в CRM, а не в телефоні менеджера розповідаємо на сторінці продукту G-PLUS DIALOG.
За замовчуванням віджет відображається у вигляді круглої кнопки, при кліку на яку відкриваються доступні (підключені в CRM) канали зв’язку. Також в віджет можуть бути додані кастомні канали зв’язку (телефонії, call-back системи і т.д)
Відображення каналів, а також налаштування їх позицій налаштовується безпосередньо в CRM. Не залежно від того, в який канал комунікації поступить повідомлення, всі способи зв’язку підключені до CRM. В тому числі чат.
Як індивідуалізувати зовнішній вид елементів зворотного зв’язку?
Як приховати кнопку зворотного зв’язку?
.select-item.callback-button-open {
display: none!important;
}Як додати кнопку ініціації чи замовлення дзвінка через Ringostat в віджет G-PLUS CRM?
<script>
var widget_interval = setInterval(function() {
if (document.getElementById('r-emb')) {
clearInterval(widget_interval);
jQuery('#r-emb .cb-dropdown:first').append('<div class="select-item" onclick="ringostatAPI.openCallbackForm()"><i><span style="cursor: pointer; transform: translate(1px, -1px)">☎️</span></i> Зателефонуйте мені</div>');
}
}, 200);
</script>Віджет ініціації дзвінка з сайту за 30 секунд:
Детальніше про інтеграцію з телефонією Ringostat – https://g-plus.com.ua/info/documentation/how-to-connect-ringostat-telephony-to-g-plus-crm/
Як приховати відображення круглої кнопки Ringostat про замовлення дзвінка?
.rngst_phone_button {display: none!important}Як приховати кнопку чату в списку віджету каналів зв’язку?
.select-item.chat-widget-open {
display: none!important;
}Як змінити колір кнопки віджету зворотного зв’язку?
#r-emb .callback-button-embed.callback-button > i {
padding: 0;
width: 60px;
height: 60px;
background-color: rgb(187, 209, 191);
display: flex !important;
align-items: center;
justify-content: center;
}Як замінити іконку у віджеті каналів зв’язку G-PLUS?
#r-emb .callback-button-embed i.comment-icon span {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>');Зверніть увагу, що блок
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>потрібно виставити тої іконки, яку ви бажаєте виставити.
Як отримати <svg xmlns=”…”/></svg>
Потрібно використати будь-яку безкоштовну бібліотеку іконок. Наприклад, Fontawesome – https://fontawesome.com/
- Обрати набір іконок категорії Free
2. Завантажити SVG файл обраної піктограми
3. Завантажений файл відкрити в будь-якому HTML чи текстовому редакторі (bbedit, notepad++…)
Ви побачите документ ось такого змісту. Дану строку необхідно скопіювати та вставити в CSS-код, після коми utf8,
Нижче вставлений фрагмент коду виділено жирним шрифтом
#r-emb .callback-button-embed i.comment-icon span
{
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>');
}При застосуванні такого типу коду та іконки, буде виведена наступна пікторграма:
В залежності, для якого класу ви використовуєте піктограму, така графіка (іконка) буде застосована. За анімацію відповідає наступне правило
#r-emb .callback-button>.phone-icon {
animation: 10s infinite cb-change-icon-em, 2s infinite pulse;
}Як змінити колір піктограми – іконки?
Спосіб перший
Одразу вибрати колір при створені та завантажені SVG файлу.
Спосіб другий
Вказати налаштування кольору через код fill=”white”.
url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white"d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>')Дизайн може бути змінений як-завгодно гнучко. Нижче приклад змін, які реалізував один з міжнародних клієнтів G-PLUS.SOLUTIONS
