Содержание статьи:
1. Создание виджета в CRM
2. Получение кода html
3. Вставка кода в популярных редакторах:
- PlatformaLP
- Tilda
- Wix
Современные редакторы сайтов и лэндингов (Wix, Tilda, PlatformaLP и пр.) предоставляют простые возможности для установки на ваш сайт собственных скриптов (html-кода). Это несложно и не займет много времени.
Если вы не занимаетесь редактированием сайта, передайте ссылку на эту статью вашему системному администратору или компании, которая обслуживает ваш сайт, - они смогут без проблем разместить код. Код потребуется разместить всего один раз - дальнейшие изменения цвета, размера, групп, направлений автоматически будут появляться на вашем сайте.
ВАЖНО! Чтобы виджет отобразил ваши группы/предметы/занятия, их нужно создать в нашей CRM (читайте об этом в разделе "Группы, программы, занятия").
Шаг 1. Создание виджета в CRM.
Чтобы разместить виджет на сайте, перейдите в раздел нашей CRM "Для сайта". Если виджета нет, то создайте, нажав на "+ Виджет" (если виджет уже создан, переходите к шагу 2). В окне создания виджета выберите нужный вариант - расписание или форму/кнопку. Укажите название (для вашего удобства).
Укажите, для каких филиалов и видов обучения (программ, групп) будет действовать виджет. Также установите прочие опции, в зависимости от типа виджета. Сохраните изменения.
Виджет создан.
Шаг 2. Получение кода html
Для размещения на сайте вам нужно из нашей CRM скопировать html-код виджета и вставить к себе на сайт. Вы можете получить его, нажав на "Код для вставки" в списке виджетов:
или зайдя в редактирования виджета и пролистав вниз.
Код html состоит из двух частей:
1) "визуальной" части - его вы вставляете в то место сайта, в котором вам нужно отобразить виджет,
2) "активирующей" части, которая размещается перед тегом </body>, т.е. "внизу" сайта. Эта часть не показывается посетителям вашего сайта и визуально не вносит изменений на сайт. Но без нее виджет на вашем сайте не отобразится.
Теперь вы можете открывать наборы на новые курсы/мастер-классы, менять данные о группе - данные об этом автоматически попадут в виджеты. Менять код для этого не нужно!
Также вы можете изменить визуальное оформление - цвета, размеры, параметры. И при этом также код менять не потребуется.
Шаг 3. Вставка кода в популярных редакторах
PlatformaLP
Цифрами отмечены первая и вторая часть кода:
Окошко для редактирования не позволяет увидеть весь текст кода второй части:
Результат публикации страницы:
Если вы обладаете знаниями в html-верстке, вы можете проверить наличие обеих частей кода на опубликованной вами странице через просмотр исходного кода страницы.
Tilda
Если у вас уже есть на Tilda созданные формы и кнопки и вы не планируете или не можете их менять, вы можете создать интеграцию с Tilda, и тогда данные с ваших форм будут попадать в CRM "Мой Класс". Подробнее об этом здесь. Однако в таком случае будут существовать ограничения - не будет проверки на кол-во свободных мест, не будет показа занятий и возможности показа всего расписания или календаря.
Помощь по Тильде: http://help-ru.tilda.ws/html
В Тильде вам необходимо в списке блоков выбрать "Другое - html".
ВАЖНО! Данный вид блока доступен только на платных аккаунтах.
Далее выбрать "Редактирование содержимого" данного блока и разместить в нем код форм или расписания.
Вам необходимо разместить два блока html.
1-й блок размещается в той части сайта, в которой вам необходимо разместить сам виджет (форму, кнопку, расписание, календарь). В него помещается первая часть кода:
2-й блок размещается внизу страницы сайта, в любом месте, например, перед футером. В него помещается вторая часть кода (данный блок визуально на сайте не отображается, поэтому беспокоиться о том, что он как-либо повлияет на дизайн, не нужно):
Если у вас на странице размещается только один наш виджет, то вы можете обе части кода разместить сразу в одном блоке html - главное соблюсти последовательность вставки: вторая часть кода должна находиться ниже первой.
После этого сохранить изменения и опубликовать страницу.
Wix
Откройте в редакторе нужную страницу. Нажмите "+ Добавить":
В меню выберите "Еще - HTML-код":
Поместите блок в нужное место на вашем сайте. Нажмите в меню блока "Изменить код", затем вставьте код в соответствующее поле, нажмите "Обновить".
ВАЖНО! Особенность Wix заключается в том, что вам необходимо размещать обе части кода наших виджетов в одном блоке HTML. Про части кода читайте в начале статьи.
Измените размер блока при необходимости, так чтобы виджет "Мой Сайт" отобразился корректно и полностью.
Опубликуйте страницу.
Если это необходимо, вы можете откорректировать размеры блока для мобильной версии вашего сайта на Wix. Для этого перейдите в мобильную версию в вашем редакторе.
Найдите блок с виджетом, измените его размеры при необходимости.
Опубликуйте изменения.