Налаштування сторінки

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

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

Загальні

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

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

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

URL

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

Вимоги:

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

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

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

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

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

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

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

Тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Увімкнення CAPTCHA в розділі «Форма»

Як створити та працювати з розділом «Форма» описано в статті тут.

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

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

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

Авторизація

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Як приховати мітку «Made with MaviBot»

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

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

HTML/CSS/JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Додайте скрипт у поле «HTML code (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 code (body)» у розділі CSS і JS.

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

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

Докладніше про розділ Form пояснюється тут. ссылка

У розділі Site Settings, на вкладці CSS and JS, вставте такий код у поле «HTML settings» → «HTML code (body)»:

<style>
.tg_link {
font-size: 0 !important;
padding: 15px 15px !important;
}
.viber_link {
font-size: 0 !important;
padding: 15px 15px !important;
}

.tg_link:after {content: "Зареєструватися в Telegram";font-size: 15px;color: white}
.viber_link:after {content: "Зареєструватися у Viber";font-size: 15px;color: white}
</style>

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

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

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

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

Як змінити favicon

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

Цей код можна використати, щоб змінити favicon — іконку вебсайту або вебсторінки.

<link rel="shortcut icon" type="image/x-icon" href="посилання на іконку" />

Як передати всі змінні/параметри 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>

Як передати аналітичні cookies боту

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

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

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

<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 and JS вставте такий код у поле «HTML Settings» → «HTML code (body)»:

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

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

Месенджери

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

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

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

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

Аналітика

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

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

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

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

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

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

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

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

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

За потреби внесіть необхідні зміни та натисніть кнопку «Зберегти».

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

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

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

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

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

ПопередняЛіди сайту НаступнаІнформація про сайт

Останнє оновлення 5 місяців тому