Как создать сайт

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

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

Создание сайта

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

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

а) Многостраничный сайт — сайт с несколькими связанными страницами, которые имеют общую концепцию и различный контент на каждой странице;

б) Лендинг — одностраничный сайт, который используется, например, в качестве вашей визитки, рекламы продукта и пр.;

в) Форма — сайт с формой сбора заявок с сайта. Создается одностраничный сайт с блоком "Форма":

г) Опрос и квиз — лендинг с формой одностраничного или постраничного опроса на лендинге:

д) Подписная страница ВК — понадобится для того чтобы создать страницу подписки вконтакте с баннером и кнопкой подписки.

Стоит отметить, что каждый сайт (страница) сайта состоит из блоков (секций):

Многостраничный сайт

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

1) Главная страница;

2) Наша команда;

3) О нас.

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

Чтобы перейти в режим редактирования любой страницы сайта, кликните по строке с нужной страницей:

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

При клике на "Создать шаблон" откроется форма с выбором любого (в том числе пустого) шаблона страницы сайта:

Лендинг (форма, опросы и квизы)

При клике на создать "Лендинг" откроется форма с выбором шаблонов сайта:

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

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

В последующем при клике на плашку лендинга

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

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

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

Как видно из примера, чтобы перейти в настройки сайта типа "Форма" (а также квизы, опрос), необходимо кликнуть на кнопку "Редактировать".

Тогда вы перейдете в режим редактирования страницы, в которой создана одна секция "Форма" (или квизы и постраничные опросы в зависимости от выбранного типа сайта).

Настройки сайта

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

Или кликнуть на шестеренку на плашке сайта в разделе "Сайты":

Тогда справа откроется меню с настройками

Основные

1. Название сайта

Отобразится на плашке с информацией о сайте.

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

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

1. Описание сайта

Отобразится на плашке с информацией о сайте.

1. URL сайта - уникальный адрес сайта:

При клике на адресную строку на сайте отображается следующим образом:

1. Иконка сайта

По умолчанию иконка сайта - уникальное лого Сейлбот. При необходимости можно изменить иконку, загрузив собственное изображение:

Иконка будет отображена во вкладке:

Функции для многостраничных сайтов

Если вы создаете многостраничные сайты, то сможете назначить определенные страницы главными на сайте, добавить какие-либо страницы в футер или шапку сайта.

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

Домен

При создании сайта в конструкторе каждому сайту присваивается домен со значением sbsite.pro. В случае, если вам необходим уникальный домен или у вас уже есть собственный домен, то его можно установить в настройках сайта во вкладке "Домен".

Alias-запись

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

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

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

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

После создания ALIAS записи со значением sbsite.pro, перейдите в настройки сайта, где необходимо установить ваш домен:

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

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

Пример:

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

После установки записи A дождитесь вступления в силу записи. Далее домен уже можно подключать к Salebot.

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

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

Чтобы отключить домен, удалите в настройках сайта.

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

Действия

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

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

Чекбокс "Скрыть надпись" — скрывает надпись "Сделано в Сейлбот" в футере сайта.

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

Аналитика сайта

Во вкладке настроек "Аналитика" вы можете настроить счетчики для подсчета различных данных по пикселям, метрике и гугл аналитике:

Шрифты и цвета

В настройках сайта во вкладке "Шрифты и цвета" можно подобрать цвет фона всего сайта, включая всего его страницы (если сайт многостраничный), а также выбрать цвета контейнера с секциями.

По умолчанию фон и цвет контейнера — белый. Можно сделать однотонный из цветового круга (нажмите на значок Пипетка) или выбрать Градиент (выберите плитку с понравившимся градиентом):

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

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

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

Заявки

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

Также во вкладку "Заявки" можно перейти в общем разделе с сайтами, кликнув по кнопке "Заявки":

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

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

Для выгрузки списка заявок можно воспользоваться кнопкой "Скачать" в верхнем меню:

При клике на кнопку откроется правый бар, в котором можно поменять местами столбцы таблицы и выгрузить таблицу с заявками в CVS формате:

Далее нажмите "Скачать", тогда таблица будет сохранена на вашем устройстве в формате cvs:

Страницы сайта

Любой сайт (многостраничный или лендинг) состоит из страниц(ы), которая содержит в себе определенный контент.

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

1. Многостраничный сайт

Для перехода в режим редактирования страницы сайта нажмите на плашку нужного сайта для перехода в его настройки:

Далее нажмите на нужную страницу сайта:

Тогда вам откроется форма редактирования страницы, где можно добавить/удалить блоки (секции) сайта, поменять шрифты, фон страницы и пр.:

1. Лендинг

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

В случае, если необходимо отредактировать уже существующую страницу, то перейдите в раздел "Сайты", найдите необходимый лендинг (он будет помечен как "Лендинг" на плашке) и нажмите на него:

Далее вы перейдете в настройки и основную информацию о сайте. Здесь необходимо кликнуть по кнопке "Редактировать":

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

Как добавить новую секцию (блок)

Чтобы добавить новый блок на странице, наведите на рабочую область страницы сайта и найдите кнопку "+":

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

Как удалить секцию (блок)

Чтобы удалить ненужный блок, наведите на него и найдите соответствующую кнопку:

Нажмите на кнопку "удалить", тогда секция будет безвозвратно удалена.

Как скрыть секцию (блок)

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

При клике на кнопку секция будет скрыта:

Чтобы вернуть секцию, нажмите эту же кнопку.

Как скопировать секцию

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

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

При клике на кнопку "Скопировать" секция будет добавлена ниже.

Как редактировать секцию (блок)

Чтобы перейти в режим редактирования секции, наведите на нее мышью и кликните на кнопку "Редактировать":

В зависимости от типа блока:

1. Вам откроется меню для редактирования контента блока справа (для всех блоков, кроме универсального):

1. Вам откроется страница с редактированием универсального блока (зеро блока) в отдельном окне:

Настройки секции (блока)

Если сам контент секции редактируется при клике на кнопку "Редактировать", то остальные настройки (шрифтов, положения элементов блока, отображение секции и т.п.) осуществляются при клике на кнопку "Настройки" (для всех блоков, кроме универсального):

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

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

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

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

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

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

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

Пример: одинаковые секции созданы на странице для разных устройств. При этом, первая секция отображается только для устройств, размер экрана которых не превышает 960 px.

Вторая идентичная секция отображается только для устройств от 960 px:

Настройки страницы сайта

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

Тогда откроется меню с разделами настроек: основная информация, мессенджеры, аналитика, цвета/шрифты/HTML:

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

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

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

URL

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

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

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

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

Тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Превью сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Аутентификация

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

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

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

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

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

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

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

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

Это может быть как ваш личный домен, который вы получали в регистраторе доменных имен, либо вида sbsite.pro

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

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

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

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

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

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

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

HTML/CSS/JS

Заполнять данный раздел можно по необходимости. Если вы понимаете в CSS, то сможете сделать свой сайт еще привлекательнее. Также сюда можно вставить код сервиса аналитики, пикселя от Facebook и пр.

Сменить ссылку на политику конфиденциальности

В блоке Форма заявки с кнопками мессенджеров можно отобразить чекбокс Политики конфиденциальности. По умолчанию указана политика конфиденциальности конструктора.

С помощью скрипта можно сменить ссылку на страницу с политикой конфиденциальности.

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

Убрать индексацию страницы

Чтобы убрать индексацию страницы добавьте скрипт в поле html-код head

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

Удалить кнопку ВК со страницы сайта

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

Убрать заголовок страницы сайта

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

Изменить ссылку в кнопке Telegram

<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, vk_link и т.д.

Изменить текст кнопки

1. Для отображения кнопки мессенджера создайте блок форму заявок с вопросами и укажите на какие мессенджеры следует вывести кнопки.

Установите стиль отображения кнопок - Иконка с текстом:

1. В разделе Настройки сайта на вкладке CSS и JS разместите в поле Настройки HTML -> HTML-код 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-код основных настроек минилендинга следующий скрипт:

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

Изменить фавикон

Данный код можно использовать изменения фавикона - значка веб-сайта или веб-страницы.

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

Передать все переменные, с которыми открылся сайт

Если на ваш сайт добавлены прокси-ссылки на мессенджеры со страницы сайта, можно добавить этот скрипт, тогда все переменные, с которыми открылся сайт, будут переданы в бота.

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

Передать в бота куки аналитики

Если вам необходимо пробросить в бота куки аналитики, разместите на сайт следующий скрипт:

<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>

Изменить ссылку на политику конфиденциальности

С помощью данного скрипта можно заменить ссылку на политику конфиденциальности на свою:

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

Экспорт сайта / Импорт страницы

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

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

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

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

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

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

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

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

Где найти ID страницы?

ID страницы сайта в списке сайтов можно передать в функции в боте, чтобы, например, передавать ссылку на ваш сайт через бота или открывать как мини-приложение в Телеграм.

ID страницы можно найти при наведении на необходимую страницу сайта:

Код для сайта

Чтобы интегрировать страницу вашего сайта, собранную в конструкторе Сейлбота, в какой-либо другой конструктор или самописный сайт, вам понадобится код для сайта.

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

Вы увидите кнопку "Код для сайта", кликните на нее чтобы открыть модальное окошко с кодом:

Данный код нужно вставить в блок на вашем сайте.

Ссылки на мессенджеры (Как получить ссылку на бота)

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

Чтобы найти ссылки на месседжеры, наведите на строку со страницей сайта:

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

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

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