html код для вставки внутрь head тильда
Размещение кодов в блоках head и body
На некоторых сайтах для размещения различных кодов (счетчиков, информеров, пикеслей ретаргетинга, кодов Google Analytics и Яндекс.Метрики и т.д.) предусмотрены отдельные блоки для вставки.
Данные блоки позволяют буквально в несколько кликов вставить нужный код, без правки шаблонов сайта.
Рассмотрим, как они работают.
Шаг 1
Раскройте меню «Настройки» и перейдите к пункту «Настройки сайта».
Шаг 2
На открывшейся странице в разделе «Блоки сайта» слева вы сможете найти блоки «Блок с кодом head» и «Блок с кодом body».
Обратите внимание!
Шаг 3
Теперь, если вам необходимо вставить какой-либо код в тег head, просто нажмите на данный блок в списке, вставьте в открывшемся окне код и сохраните изменения (аналогично с тегом body).
Примеры:
У меня в «Настройках сайта» нет таких блоков. Что делать?
Не все сайты предусматривают описанные выше блоки. Если у вас в системе управления их нет, то вставить код вы можете следующим образом:
В открывшемся списке шаблонов выберите шаблон «Главная.Верх»;
Коды для сайтов на платформе Тильда
Градиентные кнопки для сайтов на платформе Тильда
Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev
Тут нам достаточно зайти на страницу, вставить нужные цвета, здесь же посмотреть как будет выглядеть наша кнопка. После чего копируем код и вставляем на тильде в блок другое T123. И не забудьте класс кнопке прописать, об этом я рассказываю тут
Тоже интересный эффект, который можно применить на различных сайтах. Код для глитч эффекта можно взять с этого сайта romanyu.ru Там же есть инструкция, которая поможет сделать подобный эффект на своём сайте.
У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.
Глитч в zero block на Тильде для текста
Калькулятор и квиз в zero block на Тильде
Если вам мало модификаций на сайтах, которые я написал выше, то на этом mo-ti.ru их много.
Различные модификации и код начиная от изменения эффектов кнопки и заканчивая сложными калькуляторами и квизами, которые периодически я использую в своих проектах.
Автора данного ресурса с модификациями для Тильды зовут Дмитрий. За небольшую плату можно получить доступ ко всем видео инструкциям на сайте. А если вы дружите с кодом, то и так поймёте как установить модификацию на сайт.
Эффект кнопок в стиле Material design для Tilda
Я расскажу, как сделать кнопки в стиле Material design с эффектом анимации ripple при клике. Данный эффект выглядит, как блик или полупрозрачная волна и исходит именно из того места где было произведено нажатие курсора мыши.
Данный метод достаточно прост, т.к. я заранее подготовил готовые файлы css и js для поключения к вашему проекту.
Кнопки в стиле Material design для Tilda
Эффект для кнопок в Zero block
Зайдите в редактор, создайте любой элемент, кликните по нему правой кнопкой мыши, в выпадающем меню выберите последний пункт «Add CSS Class Name» (см. изображение).
Напишите свое значение, например ripple-white, класс указывается без точки.
Данная манипуляция необходима, для того чтобы «зацепить» скрипт за необходимый нам элемент по названию его css класса и смены цвета эффекта, плюс удобно глобально стилизовать кнопки с помощью css кода. Так же это удобно, если элементы повторяются не только на странице, но и на всем сайте.
Я задал в редакторе цвет кнопок и выставил border-radius, остальное в примере ниже.
Интеграция Roistat с Tilda¶
Интеграция Roistat с конструктором сайтов Tilda позволяет загружать заявки посетителей в ваш проект Roistat и автоматически создавать для них сделки в подключенной CRM.
Заявки загружаются на страницу Состояние проекта → Список отправленных заявок:
Заявки в проекте Roistat и CRM могут создаваться не сразу после отправки формы с сайта, а с небольшой задержкой. Поэтому рекомендуем подождать какое-то время (1-3 минуты), прежде чем обращаться в службу поддержки.
Звонки на номера, размещенные на сайте, созданном в Tilda, можно отслеживать с помощью Коллтрекинга Roistat. Подробнее – в шаге 5.
Как работает интеграция¶
Распределение заявок с нескольких сайтов в разные воронки продаж можно настроить с помощью вебхука или автоматизации маркетинга.
Шаг 1. Установите счетчик Roistat¶
Код счетчика можно установить только на платном тарифе Tilda. На бесплатном тарифе и в пробном периоде этого сделать нельзя.
На каждую страницу, куда заходят посетители, нужно установить счетчик, который позволит Roistat получать данные о посетителях. Сразу будет доступна функциональность промокодирования (для отслеживания продаж через телефон). Счетчик установит в cookie переменную roistat_visit, которая будет содержать номер визита.
Чтобы установить счетчик:
В проекте Roistat откройте раздел Настройки на закладке Код счетчика:
Нажмите кнопку Сохранить в буфер.
Добавьте скопированный скрипт в блок типа HTML-код и сохраните его:
Счетчик должен быть установлен на каждой странице сайта в единственном экземпляре. Установка нескольких счетчиков приведет к ошибке, и информация о посетителях будет отображаться некорректно.
Если не удается найти элемент body¶
Если вы не можете найти элемент body, чтобы вставить код счетчика Roistat, то нужно выполнить следующие действия:
Добавить блок Т123 на страницу вашего сайта (если его еще нет):
Перейти в блок Т123 и нажать кнопку Контент:
Вставить код счетчика Roistat:
Опубликовать введенные изменения:
Шаг 2. Настройте Webhook для передачи заявок из форм Tilda в Roistat¶
Чтобы заявки из форм Tilda передавались в Roistat, имена переменных для полей в Tilda должны иметь следующий формат:
Добавьте имя переменной для поля в Tilda
Наведите курсор на элемент формы и нажмите Контент:
Откроется страница настройки содержимого формы.
В блоке Поля для ввода для поля, значение которого вы хотите передавать в Roistat, заполните поле Имя переменной:
Нажмите Сохранить.
Настройте Webhook для передачи заявок
Нажмите Добавить интеграцию. В открывшемся окне в строке поиска введите Tilda, кликните по карточке и нажмите кнопку Добавить:
Затем перейдите в настройки интеграции с Tilda:
В шаге Инструкция скопируйте содержимое поля Webhook URL:
В вашем кабинете Tilda перейдите в раздел Мои сайты, выберите нужный сайт и в открывшемся подразделе со списком страниц нажмите кнопку Настройки сайта:
На странице настроек откройте раздел Формы и нажмите Webhook:
В поле Webhook URL вставьте адрес Webhook, скопированный в пункте 3, и нажмите Добавить.
В разделе Формы откройте настройки нужного вам сервиса:
В дополнительных настройках поставьте галочку напротив Посылать Cookies:
Нажмите Сохранить.
Передача информации об опциях товаров
Если вы используете опции товаров в форме заказа Tilda, то информацию о них вы сможете увидеть:
В комментарии к заявке в разделе Диагностика проекта → Список отправленных заявок:
В созданной сделке в CRM:
Передача информации из пошаговых форм (квизов)
Интеграция поддерживает формы квизов от Tilda (BF919 – Пошаговая форма). Вопросы и ответы из формы вы сможете увидеть:
В комментарии к заявке в разделе Диагностика проекта → Список отправленных заявок:
В созданной сделке в CRM:
Если по каким-либо причинам вы хотите заменить ключ вебхука, обратитесь в техническую поддержку Roistat.
Установите скрипт для передачи данных (необязательно)¶
Этот шаг не является обязательным. Он необходим, если вы хотите, чтобы в заявках отображался адрес страницы, на которой пользователь оставил заявку. Если скрипт не установлен, в заявках не отображается адрес страницы, на которой пользователь оставил заявку.
В проекте Roistat на странице настройки интеграции с Tilda откройте шаг Подключение скрипта и нажмите Скопировать в буфер:
В вашем кабинете Tilda перейдите в разделе Мои сайты, выберите нужный сайт и на странице со списком страниц сайта нажмите кнопку Настройки сайта:
На странице настроек откройте раздел Еще.
В блоке HTML-код для вставки внутрь HEAD нажмите Редактировать код:
В поле Вставка кода в head вставьте скрипт, скопированный в пункте 1 инструкции:
Нажмите Сохранить.
Опубликуйте внесенные изменения:
Шаг 3. Настройка поведения¶
В настройках интеграции с Tilda на шаге Настройка поведения вы можете:
Настроить отправку заявок в CRM:
Опция Отправлять заявки в CRM включена по умолчанию. Если ее отключить, лиды будут создаваться в списке отправленных заявок, но не будут отправляться в CRM.
Инициировать обратный звонок по номеру клиента:
Если опция включена, ваши менеджеры будут звонить на номер клиента, который создал заявку.
Создать сценарии отправки заявок:
Сценарий позволяет автоматически создавать заявки в определенном статусе или назначать их на определенного менеджера в зависимости от выбранных условий. Подробнее – в статье Сценарии отправки заявок.
Если в настройках интеграции с amoCRM и Tilda вы укажете разные воронки, в которые необходимо отправлять заявки в статусе Неразобранное, заявки будут отнесены к воронке, указанной в настройках amoCRM.
Шаг 4. Настройте заполнение дополнительных полей сделки в CRM¶
Если вы хотите, чтобы в сделке в CRM, помимо основных полей, заполнялись дополнительные поля:
В раскрывающемся списке Выберите поле выберите название дополнительного поля в CRM.
Список полей загружается из подключенной к проекту Roistat CRM.
В поле ниже введите значение дополнительного поля сделки: если вы хотите, чтобы значение было статичным, просто введите текст. Если вы хотите использовать переменные:
Как указать имя переменной поля в Tilda
Наведите курсор на элемент формы и нажмите Контент:
Откроется страница настройки содержимого формы.
В блоке Поля для ввода для поля, значение которого вы хотите передавать в дополнительное поле CRM, заполните поле Имя переменной. Это имя переменной и нужно ввести в настройках интеграции.
Нажмите Сохранить.
При настройке дополнительных полей можно использовать как переменные Roistat, так и переменные из Tilda:
При использовании переменной из Tilda в дополнительное поле будет передаваться название формы в Tilda.
Если вы хотите использовать свой шаблон комментария при создании заявки, заполните поле Комментарий заявки:
Интеграция с корзиной Tilda позволяет Roistat обрабатывать заявки из корзины.
Шаг 5. Настройте отслеживание звонков (необязательно)¶
Если на вашем сайте, созданном на Tilda, есть контактные номера, звонки на них можно отслеживать с помощью Коллтрекинга Roistat. Для этого нужно добавить сценарий коллтрекинга и настроить разметку номера.
Разметку номера возможно сделать в настройках сценария. Если же вы хотите сделать это через код сайта на Tilda, сначала нужно в Head сайта добавить скрипт:
В кавычки » » необходимо вставить CSS-селектор нужного элемента (в Инструментах разработчика Chrome кликните правой кнопкой по нужному элементу и выберите Copy → Copy selector).
После добавления скрипта вы можете продолжить настройку по стандартной инструкции.
Интеграция конструктора сайтов Tilda Publishing и сервиса сквозной аналитики UTMSTAT
1. Установите код UTMSTAT на страницы вашего сайта в Tilda
1.1 Перейдите в раздел “Настройки проекта”, подраздел “Код для установки на сайт” в панели управления UTMSTAT. Прямая ссылка на раздел: https://utmstat.com/projects/js
Скопируйте полностью код для вставки на сайт.
Настройки проекта. Код для установки на сайт в UTMSTAT
1.2 Зайдите в панель управления сайтом Tilda
Нажмите кнопку “Настройки сайта”.
Настройки сайта в tilda
Выберите пункт “Ещё” (1). Щелкните пункт “Редактировать код” (2) в разделе “HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD”.
настройки сайта. ещё. Раздел HTML-код для вставки внутрь тега head. Расположение ссылки “редактировать код”
В окне редактирования кода вставьте код UTMSTAT (см. пункт 1.1). Нажмите кнопку “Сохранить”. Код сохранен успешно. Нажмите кнопку “Вернуться к настройкам сайта”.
Код UTMSTAT сохранен успешно
Нажмите кнопку “Сохранить изменения.
СОхранение внесенных изменений
Опубликуйте все страницы.
Если ваш сайт содержит только одну страницу, то можно разместить код UTMSTAT непосредственно на одностраничнике. Для этого, перейдите в режим редактирования страницы. Нажмите кнопку “Все блоки” (1). Отобразится список всех доступных блоков для вставки на страницу. Нажмите кнопку поиска (2). В поле поиска (3) введите первые буквы название нужного блока – html. Отобразится блок под номером T123 – HTML-код. Выберите этот блок.
Список готовых блоков для вставки на страницу
Блок размещен на странице. Нажмите кнопку “Контент”.
Блок HTML размещен на странице
Вставьте код UTMSTAT (см. пункт 1.1) в поле HTML КОД / КОД ВИДЖЕТА в окне редактирования кода. Нажмите кнопку “Сохранить и закрыть”. Опубликуйте страницу.
2. Подключение формы на странице Tilda
2.1 Получение ссылки WEBHOOK в UTMSTAT
Перейдите в раздел “Интеграции с сервисами“. В подразделе “Конструкторы сайтов”, в пункте “Tilda” нажмите кнопку “Подключить”.
Расположение кнопки подключения интеграции tilda
Услуга доступна. Нажмите кнопку “Настройка”.
расположение кнопки настройки интеграции
Скопируйте ссылку для Webhooks.
2.2 Создание дополнительных полей формы в UTMSTAT
Чтобы добавить дополнительные поля в форму (например, если в форме нужно запросить ИНН или ОГРН), кроме таких стандартных полей, как имя, телефон или email, необходимо предварительно создать эти поля в UTMSTAT.
Для создания дополнительных полей перейдите в раздел “Поля для формы” в UTMSTAT
https://utmstat.com/crm-fields-list/index
расположение кнопки “Создать поле” в разделе “Поля для формы” UTMSTAT
На странице создания поля для формы заполните поля: название, название для HTML/PHP кода (в этом поле указывается имя переменной, его потребуется указать позже при настройке формы в Tilda).
Вид страницы создания поля для формы в utmstat
Поле для формы создано.
вид списка созданных полей для формы в utmstat
Перейдите в раздел “Заявки” и откройте любую заявку. В карточке заявки появилось созданное поле.
Вид созданного поля в карточке заявки
2.3 Подключение Webhook сервиса приема данных из формы в Tilda
Перейдите в панель управления сайтом Tilda. Нажмите кнопку “Настройка сайта”.
Настройка сайта Tilda
Выберите раздел “Формы”. В разделе “Другое” выберите пункт “Webhook”.
пункт webhook – отправка данных с формы в свой скрипт
Введите адрес ссылки для webhook UTMSTAT в поле WEBHOOK URL (см. пункт 2.1). Нажмите кнопку “Сохранить”.
форма подключения приема данных webook
Сервис приема данных Webhook подключен. Теперь необходимо его настроить. Нажмите кнопку “Настройки”.
Сервис приема данных webhook подключен. Расположение кнопки “Настройки”
В окне настроек сервиса приема данных Webhook установите все чекбоксы:
В поле “Название в списке” введите – UTMSTAT. Нажмите кнопку “Изменить”.
Щелкните ссылку “Подключить сервис ко всем формам на сайте”. Щелкните ссылку “Вернуться к настройкам форм”. Нажмите кнопку “Сохранить изменения”.
Сервис приема данных через webhook подключен.
2.4 Установка формы с кнопкой отправки на странице
Перейдите к редактированию страницы Tilda. Вставьте новый блок с формой и кнопкой из библиотеки блоков. Например, блок BF203N/
Библиотека блоков Tilda. Вид блока с несколькими полями для ввода и кнопкой
2.5 Настройте поля формы для передачи данных в UTMSTAT
Минимальный набор полей формы создан по умолчанию: email, имя и телефон. Обязательно заполните поле ИМЯ ПЕРЕМЕННОЙ для каждого поля размещаемой формы.
Нажмите кнопку “Контент”.
Вид кнопки “Контент”
В появившемся окне разверните вкладку “ПОЛЯ ДЛЯ ВВОДА”.
Настройка поля формы email. Имя переменной заполнено значением 
НАСТРОЙКА ПОЛЯ ФОРМЫ имя. Значение имени ПЕРЕМЕННОЙ fio 
НАСТРОЙКА ПОЛЯ ФОРМЫ телефон. ИМЯ ПЕРЕМЕННОЙ ЗАПОЛНЕНО ЗНАЧЕНИЕМ phone
Для добавления дополнительных полей для формы нажмите кнопку “Добавить поле для ввода”
вид кнопки “Добавить поле для ввода”
В ниспадающем меню “Тип” выберите тип поля – “Поле для ввода в одну строку”. Заполните поля “Подсказка значения, “Заголовок поля”, “Подзаголовок поля”, “Имя переменной”. Имя переменной для дополнительного поля формы должно совпадать с созданным значением дополнительного поля формы в UTMSTAT (см. пункт 2.2).
Нажмите кнопку “Сохранить и закрыть”.
Опубликуйте изменения. Форма успешно вставлена на страницу Tilda.
Вид формы на странице tilda с дополнительными полями
2.6 Проверка вебхуков
Убедитесь что форма подключена к вебхуку UTMSTAT, а сам вебхук из нужного проекта.
3. Проверка настроек интеграции
Чтобы проверить настройки, необходимо удостовериться в том, что данные из формы странице Tilda передаются в UTMSTAT (т.е. передаётся webhook).
3.1 Перейдите на страницу, где расположена настроенная форма. Заполните поля формы произвольными данными и нажмите кнопку отправки.
3.2 Перейдите в радел “Настройки интеграции“. Индикаторы подключения “Доступ проверен” и “Услуга доступна” зеленые в случае, если подключение прошло успешно и был получен вебхук.
Подключение к Tilda успешно
Если индикатор горит красным. Убедитесь, что в настройках вебхука стоит галочка “Посылать Cookie”.
Поставьте ее, сохраните, опубликуйте страницу и отправьте заявку через форму.
Индикаторы должны быть зелёными.
3.3 Перейдите в панель управления UTMSTAT, в раздел “Заявки”. Убедитесь, что источник поступления заявки указан.
Заявка из формы tilda появилась в разделе. Источник поступления заявки указан.
Откройте карточку заявки и убедитесь, что дополнительные поля из формы также заполнены.
Дополнительные значения полей из формы заполнены в заявке
Интеграция конструктора сайтов Tilda выполнена успешна. Теперь информация из заполненных форм на сайте будет поступать и в UTMSTAT.
4. Важно
Проверьте каждую форму на сайте, что заявка с нее пришла в UTMSTAT.