Натисніть кнопку "Налаштування" на верхній панелі, щоб отримати доступ до загальних налаштувань сторінки.

Відкривається меню з наступними розділами: Загальні, Месенджери, Аналітика, Кольори, Шрифти та HTML.

Загальні

Інформація про сторінку

Назва в списку

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

URL

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

Вимоги:

Можна використовувати лише такі символи:

  • Літери латиниці (a–z)
  • Цифри (0–9)
  • Символ підкреслення (_)

Назва має бути унікальною в межах платформи. Якщо вона вже зайнята іншим користувачем, ви не зможете використати її знову.

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

Назва вкладки браузера

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

Назва вкладки браузера відображається в адресному рядку сторінки.

Тег

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

Введіть назву тегу в полі "Тригер" блоку тригера.

Тег призначається в налаштуваннях сторінки.

Значення, вказане в полі Тег, буде збережено у змінну tag клієнта. Цю змінну можна використовувати для аналітики.

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

Введіть тег, наприклад: welcome_offer

Збережений тег буде видно на панелі інформації про сторінку.

Як використовувати тег месенджера

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

Налаштування точки входу в чат

Встановіть певний блок (наприклад, початок вашої основної воронки) як точку входу для логіки вашого бота. Коли користувач натискає іконку месенджера на вашому сайті, він потрапляє в месенджер і одразу починає з цієї заздалегідь визначеної точки.

Щоб налаштувати блоки форм і кнопки перенаправлення в месенджери, зверніться до посібника "Відповіді форм" у Налаштуваннях контенту.

Коли користувач натискає кнопку, йому пропонується перейти безпосередньо в месенджер.

  • Користувач переходить з веб-сайту в месенджер.
  • Користувач натискає кнопку "Старт" або "Запустити" (залежно від пристрою). Навіть якщо користувач раніше взаємодіяв з ботом, він повинен натиснути цю кнопку, щоб ініціювати бота з веб-сайту — це вимога платформи месенджера для ботів.
  • Замість /start бот отримає тег, вказаний у налаштуваннях веб-сайту.
  • Клієнт отримує перше повідомлення з воронки, яка запускається за вказаним тегом.
  • Профіль клієнта містить наступну змінну:

Щоб переглянути аналітику за тегом, перейдіть до розділу "Аналітика" та відкрийте вкладку "Клієнти".

Далі створіть новий віджет, де вкажіть основні налаштування:

  • Період аналітики: наприклад, "Минулий місяць", "Весь час" тощо;
  • Назва віджета: будь-яка зручна назва;
  • Вкажіть тег для відстеження.

Потім додайте віджет.

Готово! Тепер ви можете відстежувати, як часто ваш бот запускається з вашого сайту за допомогою тегу.

Вбудована аналітика MaviBot дозволяє безкоштовно відстежувати чати, ефективність операторів, прогрес курсів та метрики клієнтів, усуваючи потребу в зовнішніх інструментах.

Дізнайтеся більше в статті "Аналітика MaviBot".

Налаштування зображення

Зображення для попереднього перегляду

Це мініатюра або обкладинка, яка використовується, коли ваш сайт поширюється (наприклад, у соціальних мережах або месенджерах). За замовчуванням використовується перше зображення з вашої сторінки. Щоб встановити власне зображення для попереднього перегляду, завантажте вибране зображення в це поле.

Налаштування захисту сайту / reCAPTCHA

Щоб налаштувати reCAPTCHA, потрібно надати пару ключів (публічний та секретний) у загальних налаштуваннях вашого веб-сайту та увімкнути перевірку reCAPTCHA в налаштуваннях вашої форми.

Ви можете вибрати будь-який сервіс CAPTCHA для захисту вашого веб-сайту. У цьому розділі ми розглянемо, як встановити Google reCAPTCHA.

  1. Отримання ключів

Для початку потрібно заповнити основну інформацію для отримання ключів: виберіть типи CAPTCHA та додайте домен веб-сайту, на якому планується встановити захист. Потім натисніть "Надіслати".

  1. Введення ключів

Далі ви побачите пару ключів, які потрібно скопіювати та вставити в налаштування сторінки на вашому веб-сайті в MaviBot.

  1. Увімкнення CAPTCHA в розділі "Форма"

Як створити та працювати з розділом "Форма", пояснюється в статті тут.

Після налаштування розділу Форма відкрийте його налаштування.

Натисніть "Налаштування", щоб відкрити бічне меню.

Там буде видно прапорець для увімкнення CAPTCHA.

Автентифікація

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

Почнемо з прив'язки домену до бота Telegram, підключеного до вашого проекту.

Крок 1: Перейдіть до BotFather, де ви створили свого бота Telegram.

Крок 2: Виберіть бота Telegram, якого ви хочете підключити до веб-сайту, та натисніть на нього.

Крок 3: Перейдіть до налаштувань бота Telegram.

Крок 4: У налаштуваннях бота перейдіть до Домен.

Крок 5: Натисніть "Встановити домен".

Якщо ви вже прив'язали домен до бота або вам потрібно встановити новий домен для того самого бота, кнопка "Встановити домен" буде замінена на "Скинути домен".

Крок 6: Надішліть домен, який ви хочете прив'язати до бота Telegram: для цього введіть домен у поле введення повідомлення та надішліть його боту.

Це може бути ваш особистий домен, отриманий від реєстратора доменних імен, або щось на зразок mavitbot.ai

На цьому етапі прив'язка домену завершена.

Після прив'язки домену до бота активуйте прапорець "Вимагати авторизацію через Telegram" у налаштуваннях форми:

Налаштування інтерфейсу та доступу

Доступ лише за списками

Ця опція дозволяє надавати доступ до сайту на основі наявності користувача в певних списках вашого проекту.

Як приховати напис "Зроблено на MaviBot"

Щоб приховати напис, просто позначте цей прапорець, якщо це необхідно.

Ви можете видалити напис "Зроблено на MaviBot" на будь-якому платному тарифі. Ми цінуємо всіх, хто залишає напис "Зроблено на MaviBot" на своїх сторінках.

HTML/CSS/JS

Ви можете заповнити цей розділ за потреби.
Якщо ви знайомі з CSS, ви можете зробити свій веб-сайт ще більш візуально привабливим. Ви також можете вставити сюди код аналітики, Facebook Pixel тощо.

ЗВЕРНІТЬ УВАГУ!
Копіюючи приклади скриптів, переконайтеся, що якщо тег відкрито, його також потрібно закрити.
Наприклад: <script> ... </script>, <style> ... </style>

Як змінити посилання на Політику конфіденційності

У блоці форми заявки з кнопками месенджерів ви можете відобразити прапорець Політики конфіденційності.
За замовчуванням він веде на політику конфіденційності конструктора.

Ви можете змінити посилання на власну сторінку Політики конфіденційності за допомогою скрипта.

Додайте скрипт у поле "HTML код (body)" у розділі CSS та JS.

<script>
document.getElementsByClassName('mavibot-privacy__link')[0].href = "посилання на політику конфіденційності";
</script>

Як вимкнути індексацію сторінки

Щоб вимкнути індексацію сторінки, додайте скрипт у поле HTML код (head).

<meta name="robots" content="noindex, nofollow">

Як видалити кнопку Facebook на сторінці вашого сайту

Додайте скрипт у поле "HTML код (body)" у розділі CSS та JS.

<script>
document.getElementsByClassName('vk_link')[0].remove()
</script>

Як видалити заголовок сторінки вашого сайту

Додайте скрипт у поле "HTML код (body)" у розділі CSS та JS.
Це стосується старих версій міні-лендінгів.

<script>
document.getElementsByClassName('title_container')[0].remove()
</script>

Як редагувати посилання кнопки Telegram.

Додайте скрипт у поле "HTML код (body)" у розділі CSS та JS.

<script>
window.onload = function() {
    let button = document.querySelector('.tg_link')
    if (button) {
        button.setAttribute('data-url', 'потрібне значення')
        button.removeAttribute('onclick')
        let newUrl = button.getAttribute('data-url')
        button.addEventListener('click', () => {
            window.location.href = newUrl
        })
    }
}
</script>

Для інших месенджерів замініть tg_link на insta_link, fb_link тощо.

Як оновити текст кнопки

Вставте цей код у поле "HTML код (body)" у розділі CSS та JS.

  1. Щоб відобразити кнопку месенджера, створіть блок форми заявки з питаннями та вкажіть, для яких месенджерів мають з'являтися кнопки

Встановіть стиль відображення кнопки на "Іконка з текстом"

Детальніше про розділ Форма пояснюється тут. посилання

  1. У розділі Налаштування сайту, на вкладці CSS та JS, вставте наступний код у поле "HTML налаштування" → "HTML код (body)":

Цей код змінить текст кнопки для Telegram та Viber. Для інших месенджерів додайте аналогічний код за прикладом.

Як вирівняти кнопки в ряд

Вставте наступний скрипт у поле "JS код" в основних налаштуваннях вашої міні-лендінг сторінки.

$(function() {
$('.link_group').css("flexWrap", 'noWrap')
})

Як змінити фавікон

Додайте скрипт у поле "HTML код (head)" у розділі CSS та JS.

Цей код можна використовувати для зміни фавікона — іконки веб-сайту або веб-сторінки.

Як передати всі змінні/параметри URL під час відкриття вашого веб-сайту

Вам потрібно розмістити скрипт на всіх сторінках ВАШОГО веб-сайту, які містять проксі-посилання. Скрипт потрібно додати одразу після тега <body>.

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

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

<script>
var links = document.getElementsByTagName("a")
for (let i of links) {
    if (i.href.startsWith("https://mavibot.site/")) {
        if (i.href.split("?").length > 1) {
            i.href += "&" + location.search.split("?")[1]
        } else {
            i.href += location.search
        }
    }
}</script>

Як передавати файли cookie аналітики боту

Скрипт потрібно розмістити на всіх сторінках ВАШОГО веб-сайту, які містять проксі-посилання. Його слід додати одразу після тега <body>.

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

Якщо вам потрібно передати файли cookie аналітики боту, додайте наступний скрипт на ваш сайт:

<script>
setTimeout(function() {
    var links = document.getElementsByTagName("a");
    var cookies = ['_fbc', '_fbp', '_ga', '_ym_uid', 'roistat_visit'];
    var cookies_string = '';

    cookies.forEach(function(cookie_name){
        let cookie_val = get_cookie(cookie_name);
        if (cookie_val !== undefined) {
            cookies_string += (cookies_string != '' ? "&" : '') + cookie_name + "='" + cookie_val + "'";
        }
    });

    for (let i of links) {
        if (i.href.startsWith("https://salebot.site/")) {
            if (i.href.split("?").length > 1) {
                i.href += "&" + cookies_string;
            } else {
                i.href += "?" + cookies_string;
            }
        }
    }

    function get_cookie(name) {
        let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
}, 3000);
</script>

Як змінити посилання на політику конфіденційності

На вкладці CSS та JS вставте наступний код у поле "HTML налаштування" → "HTML код (body)":

Цей скрипт дозволяє замінити посилання на Політику конфіденційності на ваше власне.

<script>
document.getElementsByClassName('mavibot-privacy__link')[0].href = "посилання на політику";
</script>

Месенджери

Початкове повідомлення WhatsApp

Текст, який ви введете тут, автоматично з'явиться як чернетка в WhatsApp, коли вони натиснуть посилання з вашого сайту.

Вони можуть просто натиснути "Надіслати" в месенджері.

  1. Створіть блок "Старт" у конструкторі.
  2. Введіть у нього текст з вашого початкового повідомлення.

Аналітика

Увімкніть налаштування "Зберігати дані аналітики для конверсії", щоб зберегти відстеження конверсій вашого сайту.

Це дозволить вам відстежувати конверсії на вкладці Аналітика.

Експорт веб-сайту / Імпорт сторінки

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

Як експортувати/імпортувати сторінку:

  1. Спочатку переконайтеся, що всі ваші зміни збережено, натиснувши кнопку "Зберегти".

Натисніть "Експортувати сторінку" в редакторі, щоб експортувати вашу сторінку.

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

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

Якщо необхідно, внесіть потрібні корективи та натисніть кнопку "Зберегти".

Де знайти ID сторінки?

ID сторінки зі списку сайтів можна передавати в функції бота — наприклад, щоб надіслати посилання на ваш сайт через бота або відкрити його як міні-додаток у Telegram.

Докладніше про Telegram WebApp читайте в цій статті.

Номер сайту призначається автоматично з символом #.

Ви можете знайти ID сторінки, навівши курсор на потрібну сторінку сайту.