Нажмите кнопку "Настройки" на верхней панели, чтобы открыть общие настройки страницы.

Откроется меню со следующими разделами: Основные, Мессенджеры, Аналитика, Цвета, Шрифты и 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: В настройках бота перейдите в раздел Domain.

Шаг 5: Нажмите на "Set domain".

Если вы уже привязали домен к боту или вам нужно установить новый домен для того же бота, кнопка "Set domain" будет заменена на "Reset domain".

Шаг 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 страницы, наведя курсор на нужную страницу сайта.