Кнопка «Перездвоніть мені» допомагає швидко збирати заявки із сайту. Відвідувачу не потрібно шукати контакти, щоб зв’язатися з вами, — достатньо натиснути кнопку і залишити номер телефону.
У WordPress такий функціонал можна реалізувати за допомогою плагіна Spectra. Він додає в редактор сайту нові блоки, і один з них — блок Modal — як раз дозволяє створити кнопку з вікном, куди можна додати контактну форму. Плагін розроблений авторами теми Astra, але працюватиме з будь-якими іншими темами.
👀 Стаття на тему
Огляд плагіна Spectra
Навіщо потрібна кнопка зворотного дзвінка
Таку кнопку в основному використовують на сайтах послуг, де немає класичного кошика чи швидкого оформлення замовлення. Наприклад, якщо спеціалізація вашого бізнесу:
- консультації;
- ремонт та будівництво;
- медицина;
- нерухомість;
- юридичні послуги;
- онлайн-школи;
- локальний бізнес.
Замість того щоб шукати ваші контакти, користувач просто залишає свій номер, а ви зв’язуєтесь з ним самі. Це робить зв’язок з вами помітніше та простіше, демонструє готовність відповісти на запитання та підходить людям, які не люблять дзвонити самі.
Крок 1. Встановіть плагін Spectra
У WordPress перейдіть до розділу «Плагіни – Додати новий». Введіть у пошуку «Spectra», встановіть та активуйте плагін.
Крок 2. Додати блок Modal
Відкрийте потрібну сторінку в редакторі Gutenberg (стандартний редактор WordPress) та додайте в потрібне місце блок Modal. Після цього на сторінці з’явиться кнопка та спливаюче вікно.
👀 Стаття на тему
Як користуватися редактором блоків
Крок 3. Налаштуйте кнопку
Наприклад, змініть текст кнопки на «Перезвоніть мені» або «Залиште заявку». Також відрегулюйте стиль кнопки та спливаючого вікна.
В опціях блоку Modal на бічній панелі буде кілька розділів:
- Trigger — параметри кнопки;
- Container — параметри спливаючого вікна;
- Close button — параметри кнопки «Закрити»;
- Background — параметри фону спливаючого вікна.
На вкладці «General» будуть налаштування розміру та поведінки, на вкладі «Style» — кольори та відступи, на вкладці «Advanced» — анімації та умови відображення.
Крок 4. Додати форму всередині Modal
Всередину спливаючого вікна також можна вставляти блоки. Наприклад, заголовок та контактну форму (блок Form у списку блоків Spectra).
Всередині контактної форми буде + для додавання різних полів. Є окреме поле для імені, номера телефону, електронної пошти, тексту, чекбоксу.
Крок 5. Налаштуйте форму
Наприклад, додайте в поля попередньо заповнений текст сірого кольору, змініть стиль кнопки «Надіслати», перекладіть повідомлення про успішне відправлення та про помилку заповнення форми (за замовчуванням вони будуть англійською), змініть адресу електронної пошти, на яку надіде лист про заповнення форми, а також тему цього листа.
За замовчуванням лист про заповнення форми надходитиме на пошту, яка вказана у вас у налаштуваннях WordPress — розділ «Налаштування – Загальні», опція «Адміністративна електронна адреса».
Альтернативні способи додати кнопку callback на сайт
Якщо ви хочете, щоб кнопка зворотного дзвінка була закріплена в нижньому кутку сайту або щоб, крім дзвінка, була можливість написати вам у месенджер, можна використовувати плагін. Ось кілька варіантів:
Деякі з цих плагінів не надають можливості саме замовити зворотній дзвінок — лише зателефонувати самостійно, але кнопка завжди буде у полі зору. Іноді її навіть можна «оживити», щоб вона рухалася і краще привертала увагу.
Що ще
Блок Modal Spectra можна використовувати не тільки для форми зворотного дзвінка. Наприклад, з його допомогою також зручно робити:
- popup з акцією;
- форму передплати;
- вікно із контактами;
- повідомлення про знижку;
- форму запису чи бронювання.
Крім блоку Modal в Spectra є більше 30 інших блоків, які допоможуть створити, наприклад, красивий блок з відгуками, карусель із зображеннями, галерею, блок FAQ, лічильник і ще багато інших корисних штук. Це робить плагін Spectra корисним не тільки для callback-кнопок, а й для багатьох інших елементів сайту.