Создание сайта и основные настройки

Сайт можно использовать как посадочную страницу в рекламе, презентацию ваших товаров и услуг, можно прикрепить к нему свой домен, настроить аналитику и пиксели. Как будет выглядеть ваш сайт зависит только от вашей фантазии. Создаются они в разделе Сайты:

Набор кнопок мессенджеров формируется автоматически на основании привязанных к проекту мессенджеров (ботов) при клике на кнопку "Создать форму" (рассказали ниже). Каждому мессенджеру соответствует одна кнопка независимо от того, сколько экземпляров данного вида мессенджера (бота) подключено к проекту.

В настройках можно выбрать кнопки каких мессенджеров хотите показать на минилендинге. Если к проекту подключено несколько ботов одного мессенджера в настройках минилендига можно выбрать в какого бота будет вести кнопка.

Создать новый сайт

В Salebot реализован блочный конструктор сайтов. Создать свой уникальный лендинг можно без знания программирования.

Зайдите в раздел Сайты и в верхней части экрана нажмите синюю кнопку Создать.

Вам откроется выпадающее меню с выбором создания сайта или формы:

1) Создать сайт:

При клике на кнопку "Создать" откроется окно с возможностью выбора шаблонов:

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

2) Создать форму:

Создается сайт с уже установленным в него блоком с формой.

После того как вы выбрали создание сайта (например, из пустого шаблона), откроется конструктор сайта с выбором типов блоков, которые необходимо добавить, и возможностью перейти в предпросмотр сохраненных изменений на минилендинге.

Функции создания сайтов

Полноэкранный режим с возможностью форматирования текста

Для удобства редактирования сайтов можно скрыть меню разделов проекта и открыть поле предварительного просмотра на весь экран . Для этого можно нажать на кнопку Полноэкранный режим:

Горячие клавиши для входа в полноэкранный режим:

Ctrl+shift+X или Cmd+shit+X

Режим редактирования

На примере видно поле редактирования и добавления секций для сайта: здесь можно увидеть предварительный вид сайта, добавляя или убирая какие-либо настройки:

На экране отображаются добавленные блоки (секции) сайта, а также примененные шрифты, цветовые решения для фонов (отдельных фонов блоков) и т.д.. Все вносимые изменения сразу отображаются в поле Предварительный просмотр

Предпросмотр

После сохранений внесенных изменений, при нажатии на кнопку "Предпросмотр", откроется выпадающий список: можно просмотреть вид сайта и страницу подписки Вконтакте. При клике на одну из кнопок, вас перенесет на созданную вами страницу или сайт:

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

Сохранить / Сохранить и закрыть

При клике по кнопке "Сохранить" сохраняться настройки, но редактирование данного сайта останется открытым, то есть данную функцию можно использовать для предварительного сохранения прогресса работы по созданию сайта.

При клике по кнопке "Сохранить и закрыть" внесенные изменения будут применены к сайту, а страница редактирования закроется. Вы вернетесь на общую страницу всех сайтов проекта.

Экспорт сайта / Импорт сайта

В конструкторе сайтов существует возможность экспорта (выгрузки) сайта и импорта (загрузки) сайта. Это поможет, например, перенести сайт с одного вашего проекта без сборки в другие проекты с сохранением всех файлов.

Как это сделать?

Предварительно сохраните все изменения, которые вы внесли на сайт. Для этого нажмите на "Сохранить":

В режиме редактирования вашего готового сайта найдите кнопку "Экспорт сайта" и кликните на нее для сохранения файла с сайтом:

По окончанию загрузки файла с сайтом вы увидите сам файл в своих загрузках и уведомление об успешной загрузке файла:

Далее перейдите в раздел "Сайты" в проекте, в котором необходимо создать идентичный сайт и кликните по кнопке "Создать":

Далее нажмите на "Загрузить из файла":

Далее выберите файл, который вы сохранили при экспорте сайта:

После чего вы увидите уведомление о том, что файл успешно загружен, а также автоматически перейдете в режим редактирования импортированного сайта:

Настройки: Основная информация

Для перехода к общим настройкам сайта нажмите кнопку "Настройки", находящуюся на верхней панели страницы создания сайта, и откроется меню с разделами:

Основная информация, Мессенджеры, Аналитика, CSS и JS, Автоматический пост ВК

Информация о странице

Название в списке

Здесь может быть любой ваш текст;

URL

Создано для того, чтобы вы могли указывать свою ссылку на минилендинг. По умолчанию, название генерируется автоматически из набора букв и цифр

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

По умолчанию Название вкладки в браузере равно значению в поле Название сайта, однако данное поле можно настроить по своему усмотрению: сделать название более лаконичным или наоборот:

Название вкладки в браузере отображается в адресной строке вашего сайта,

Тег

Тег - метка, которая передается в бот, как только пользователь перейдет в него по значку мессенджера. С помощью него можно запускать разные цепочки бота, не дожидаясь, пока пользователь что-то напишет. Для этого достаточно прописать тег в поле "Условие" в блоке с условием.

При получении сообщения, содержащего заданный тег, бот автоматически распознает его как сигнал к запуску определенного этапа воронки. Это может включать в себя отправку ответного сообщения, переход к следующему этапу воронки или прекращение работы воронки в зависимости от контекста и логики схемы чат-бота.

Укажите тег, например:

После сохранения настроек Тег можно увидеть на плашке вашего сайта:

Пример использования тега в мессенджере.

В настройке сайта указан тег - основная воронка.

Далее вам необходимо указать тег в настройках блока в схеме чат-бота:

Можно настроить логику бота с указанного блока, например, переход в основную воронку.

Пользователь на сайте нажимает кнопку мессенджера и переходит в него:

При клике на кнопку пользователю предлагается перейти непосредственно в мессенджер:

Путь клиента на примере Telegram: - Перешел с сайта в Telegram:

- Нажал кнопку "Запустить"/"Старт" (зависит от устройства). Даже если клиент ранее контактировал с ботом для запуска бота с сайта он должен нажать кнопку Запустить. Это правила мессенджера для ботов.

- В бота вместо /start придет тег, указанный в настройках сайта.

- Клиенту приходит первое сообщение из воронки, запуск которой настроен на данный тег.

- В карточке клиента указана переменная:

Чтобы просмотреть аналитику по тегу, необходимо перейти в раздел "Аналитика", вкладку "Клиенты":

Далее создайте новый виджет, где укажите основные настройки:

1. Период Аналитики: за месяц, за все время и пр;

2. Название виджета: любое удобное название;

3. Укажите тег.

Далее добавьте виджет:

Настройка изображений

Иконка страницы

Иконка отображается в браузере во вкладке перед названием страницы и в качестве картинки рядом с закладкой.

Превью сайта

Превью - это заставка или обложка для предварительного просмотра сайта.

По умолчанию в превью для сайта используется первое изображение с его страницы, поэтому если вы хотите изменить превью, загрузите новое изображение в данное поле:

Настройка защиты сайта

Для установки reCAPTCHA нужно указать пару ключей (публичный и секретный ключи) в общих настройках сайта и в формах включить проверку recaptcha.

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

1. Получение ключей

Для начала вам необходимо заполнить основную информацию для получения ключей: выбрать типы капчи; добавить домен сайта, на котором планируется установить защиту. Далее необходимо кликнуть "отправить".

1. Ввод ключей

Далее вы увидите пару ключей, которые необходимо скопировать и вставить в настройках сайта в Сейлботе:

1. Включение капчи в секции "Форма"

После того как вы настроили секцию "Форма" на сайте, перейдите в настройки секции:

После клика на кнопку "Настройки" справа откроется меню:

Где вы увидите чекбокс для включения капчи.

Требовать аутентификацию из Телеграм

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

Для начала привяжем домен к подключенному в проекте Telegram-боту.

Шаг 1. Перейдите в BotFather, в котором вы создавали своего телеграм-бота:

Шаг 2. Выберите телеграм-бота, которого Вам необходимо подключить к сайту, и кликните на него:

Шаг 3. Перейдите в настройки телеграм-бота:

Шаг 4. В настройках бота перейдите к домену:

Шаг 5. Кликните на "Установить домен"

Шаг 6. Отправьте боту домен, который хотите подключить к телеграм-боту: для этого в поле строки сообщения введите домен:

Это может быть как ваш личный домен, который вы получали в регистраторе доменных имен, либо вида https://salebot.site/.

На данном этапе привязка домена завершена.

После привязки домена к боту, активируйте в настройках формы чекбокс "Требовать авторизацию через Telegram":

Настройки интерфейса и доступа

Доступ только по спискам

Эта опция позволяет предоставить доступ к сайту по наличию пользователя в определенных списках вашего проекта.

Скрыть надпись "Сделано в Salebot"

При необходимости надпись можно скрыть. Для этого поставьте галочку в данном чек-боксе.

Мы благодарны всем, кто оставляет надпись "Сделано в Salebot" на своих сайтах.

Установка домена

Alias-запись

Наиболее приоритетным вариантом для домена является ALIAS-запись - это ресурс специального типа в системах управления DNS, который позволяет связывать несколько разных доменных имен с одним IP-адресом.

Такая запись позволит привязать ваш домен к Salebot, а также не допустить ошибок в работе сайта при изменении IP-адреса. Это значит, что в случае, если со стороны Salebot произойдет изменение IP, то работа вашего сайта никак не нарушится и он продолжит существовать без привязки к определенному айпи.

Alias-запись для сайта создается на ресурсе существования вашего домена - это может быть любой удобный для вас сервис.

Далее при установлении домена, в поле со значением передайте salebot.site

После создания ALIAS записи со значением salebot.site, перейдите в раздел "Сайты", где необходимо установить ваш домен:

После нажатия на кнопку "Установить свой домен", откроется окошко, где в поле пропишите созданный вами домен:

Как создать запись А

Запись А создаётся на стороне вашего домена.

Пример:

Далее в значение передайте IP - 84.201.187.29 (внутри России), международный - 188.166.193.161;

После установки записи A дождитесь, когда при переходе на домен вы увидите эту страницу. Жирным цветом будет выделен ваш домен.

Далее домен уже можно подключать к Salebot.

Для добавления домена нажмите кнопку "Установить свой домен" в созданном сайте.

Затем ввести свой домен и нажать Готово.

На этом все. Все ссылки сайтов будут с вашим доменом.

Домен будет работать по защищенному протоколу https

Чтобы отключить домен, удалите его и нажмите "Готово"

Если вы видите эту ошибку, переподключите домен.

Контент и настройки блока

При наведение на блок (секцию) сайта можно увидеть кнопки настроек, применяемых только для данного блока:

При клике по кнопке "Редактировать" откроется окно с возможными настройками контента блока (секции):

В зависимости от выбранного блока настройки контента будут разные.

Настройки Контента определяют тип блока:

• Универсальный блок (зеро блок): блок без предустановленных настроек - размещайте любой контент и самые разные элементы сайта по своему уникальному дизайну

• Обложка: блок для добавления изображение и видео, заголовок. Доступны шаблоны для добавления обложки страницы.

• Заголовок и текст: текстовый блок с заголовком.

• Меню: для создания футера с кнопками в начале сайта (можно сделать плавающее меню).

• Онлайн-запись: для добавления формы онлайн-записи для клиентов (для уже настроенным филиала) с автоматическим подключением к SalebotCRM.

• Этапы для создания уникального дизайна сайта с хронологией событий.

• Аккордеон: для добавления информации или данных на сайт в вопросно-ответной форме.

• HTML: блок позволяет добавить на страницу HTML и CSS коды

• Форма: блок для добавления кнопок мессенджеров, вопросов, политики конфиденциальности.

• Квиз формы: блок для создания постраничных опросов (квизов) на сайте.

• Медиа: блок для добавления картинки или видео

• Кнопки: блок для добавления кнопок с функцией Ссылка, Телефон, email, Оплата

• Цитата: блок для добавления цитаты

• Список: блок с возможностью вставить нумерованные и маркированные списки

• Выпадающий текст: блок для добавления выпадающего текста

• Галерея: блок для добавления галереи изображений.

• Pop-up: для добавления всплывающего окна на сайте

• Настраиваемые карточки: поможет добавить отзывы клиентов или информацию о товаре.

• Карточки курсов понадобится для продажи курсы прямо с сайта: вам не нужно самим собирать и настраивать карточку, данные подтягиваются из раздела "Онлайн-курсы".

• Список уроков: достаточно выбрать курс в настройках блока и все уроки этого курса отобразятся на сайте

• Таймер: блок для добавления таймера обратного отсчета.

Универсальные настройки

К универсальным настройкам блока относятся схожие функции для редактирования: это настройки шрифтов, фона, диапазона видимости. Чтобы настроить шрифты и фоны отдельно для каждого блока, необходимо навести на нужный блок и клинуть по кнопке "Настройки":

В открывшемся меню вы увидите поля, необходимые для настройки шрифтов, фона и отображения применительно к данному блоку:

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

Если вам необходимо настроить единый фон и шрифты для всего сайта в целом, то перейдите в общие настройки сайта:

Далее найдите раздел "Цвета, шрифты, HTML":

Тогда вам откроются настройки шрифтов и фона, которые будут применены ко всему сайту в целом:

Настройка отображения

С помощью данного меню можно настроить отображение данного блока на сайта и подписной ВК. А также сделать оптимизацию под любой тип устройств: настроить видимость блока в зависимости от размера экрана устройства.

Диапазон видимости

В настройках отображения секции (блока) есть возможность указать для устройств с каким размером экрана будет отображаться текущая секция(блок). Таким образом можно для мобильных устройств сделать более адаптированную версию сайта. В этом поле выводится значение настройки "Диапазон видимости на устройствах"

Сменить положение блока на странице: выше/ниже

Если в процессе создания сайта появилась необходимость поменять местами блоки, достаточно нажатием по данной кнопке поднять/отпустить блок относительно соседних:

Копирование/удаление/добавление блока

Команда "Скопировать" помогает быстро создать точную копию блока, также при наведении компьютерной мыши на блок можно легко его удалить.

При клике по кнопке для выбора откроется список типов блока. Выберите подходящий, чтобы добавить на сайт новый блок.