M masamenu.tr
🧩 Виджеты для вашего сайта

🧩 Мой сайт

Один тег на ваш сайт: чат, попапы, cookie-баннер, бронь, запись, заказ, справка и юрдокументы

Документация

Мой сайт: виджеты на вашем собственном сайте

Раздел «Мой сайт» — для тех, у кого сайт уже есть. Не нужно переезжать на нашу витрину и что-то переносить: вы вставляете на существующий сайт одну строку кода и после этого включаете нужные продукты тумблерами в кабинете.

Открывается: Админ-панель → Маркетинг → «Мой сайт» (admin.masamenu.tr).

Работает на любой платформе, где можно вставить <script>: WordPress, Tilda, Wix, Shopify, Webflow, Bitrix, InSales, OpenCart, самописный сайт, лендинг конструктора.


Адрес сайта и код установки#

Блок «🌐 Ваш сайт» в шапке раздела ведёт тремя шагами: адрес → код на сайте → проверка, и главная кнопка всегда предлагает следующий незакрытый шаг. Первый — адрес вашего сайта (например, example.com): по нему мы проверяем установку и строим правильные ссылки в виджетах.

Второй — код установки. Это одна строка:

<script src="https://cdn.masamenu.tr/site/v1.js" data-domain="ВАШ-ДОМЕН" async></script>

Вставьте её один раз — в <head> или перед </body>. Больше к коду сайта возвращаться не нужно: состав виджетов задаётся тумблерами в кабинете, а не тегами на странице. Включили виджет — он появляется на сайте в течение нескольких минут, выключили — исчезает.

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


Установка на популярных платформах#

В окне «Код установки» есть вкладка под каждую платформу — с теми же шагами, что ниже.

У каждой платформы здесь свой якорь, и ссылку можно отправить тому, кто правит сайт, вместо пересказа: #html, #google-tag-manager, #wordpress, #tilda, #wix, #shopify, #webflow, #squarespace — например, /ru/docs/site-widgets#tilda.

Общее для всех платформ, чтобы не повторять в каждом пункте:

  • тег ставится один раз на весь сайт — в общий шаблон, а не на отдельную страницу;
  • у конструкторов (Tilda, Wix, Webflow, Squarespace) правка живёт в редакторе, пока сайт не опубликован заново;
  • проверять нужно живой сайт, а не превью редактора;
  • если перед сайтом стоит кэш или CDN, сбросьте его: и посетителю, и нашей проверке может отдаваться сохранённая копия страницы без тега;
  • чего проверка установки при этом не увидит — отдельный разбор ниже.

HTML#

Любой сайт, к шаблону которого у вас есть доступ: самописный, лендинг, статический генератор.

  1. Скопируйте строку кода: Маркетинг → «Мой сайт».
  2. Вставьте её в <head> или перед </body> общего шаблона сайта.
  3. Общего шаблона нет (страницы — отдельные файлы) — вставьте на каждую страницу.
  4. Выложите изменения на сервер, откройте сайт и нажмите «Проверить установку».

Google Tag Manager#

Подходит, когда доступа к шаблону нет, а GTM на сайте уже стоит.

  1. Теги → Создать → тип «Пользовательский HTML».
  2. Вставьте строку кода, триггер — «Все страницы», сохраните.
  3. Нажмите «Опубликовать»: пока версия контейнера не опубликована, на живом сайте тега нет.

⚠️ Тег, поднятый из GTM, наша «Проверка установки» не увидит никогда — и это не ошибка, а следствие метода: «Что проверка установки не видит». Открывайте сайт и смотрите глазами.

WordPress#

  1. Консоль WordPress (ваш-сайт/wp-admin), нужны права администратора.
  2. Надёжный путь: Плагины → Добавить → любой плагин вставки кода в header/footer → в его настройках вставьте строку в поле Header → сохраните.
  3. Путь без плагина: Внешний вид → Редактор файлов темы → header.php (перед закрывающим </head>) или footer.php (перед </body>) → «Обновить файл».
  4. Откройте сайт и нажмите «Проверить установку».

⚠️ Правка файлов родительской темы теряется при её обновлении — об этом предупреждает и документация WordPress. Плагин вставки кода или дочерняя тема переживут обновление. Стоит кэширующий плагин (W3 Total Cache, WP Rocket и подобные) — очистите кэш, иначе проверка увидит старую копию страницы.

💡 Отдельный плагин для виджетов ставить не нужно: их подключает один тег. Плагин Cenaly Consent — про другое, он ставит за вас тег только cookie-баннера (см. Cookies и согласие).

Tilda#

  1. В списке проектов — «Настройки сайта» нужного сайта (настройки проекта, а не страницы).
  2. Раздел «Ещё» (в части аккаунтов он подписан «Вставка кода») → поле «HTML-код для вставки внутрь head».
  3. Вставьте строку и сохраните.
  4. Переопубликуйте все страницы проекта — без этого код остаётся только в редакторе.
  5. Откройте живой сайт и нажмите «Проверить установку».

💡 Нужен тег только на одной странице — то же поле есть в «Настройки страницы» → «Дополнительно»; переопубликовать тогда нужно эту страницу.

Wix#

  1. Сайт должен быть опубликован, а домен — подключён: это условие самого Wix для своего кода.
  2. Settings (Настройки) → Development & integrations (Разработка и интеграции) → Custom Code.
  3. «+ Add Custom Code» → вставьте строку, дайте фрагменту понятное имя.
  4. Применить ко всем страницам (All pages), загружать один раз, место вставки — Head. Сохраните.
  5. Нажмите Publish, откройте живой сайт и нажмите «Проверить установку».

⚠️ Фрагменты кода в Wix привязаны к домену: назначили сайту другой домен — фрагменты удаляются, тег придётся вставить заново.

Shopify#

  1. Админка Shopify → Интернет-магазин (Online Store) → Темы.
  2. У нужной темы «…» → Duplicate: копия темы — ваш путь назад.
  3. Там же «…» → Изменить код (Edit code).
  4. Слева папка Layout → файл theme.liquid → вставьте строку перед закрывающим </head> (или перед </body>) → Save.
  5. Откройте витрину магазина и нажмите «Проверить установку».

⚠️ Правка принадлежит теме, а не магазину: переключили или пересоздали тему — вставьте тег в новую, иначе виджеты пропадут вместе со старой. Страницы оформления заказа Shopify для произвольных скриптов темы закрыты — виджеты рассчитаны на витрину.

Webflow#

  1. Site settings нужного проекта → вкладка Custom code.
  2. Поле Head code → вставьте строку и сохраните. В это поле пишут только сам скрипт: теги html, head, body добавлять не нужно.
  3. Нажмите Publish — в редакторе и превью свой код не работает.
  4. Откройте опубликованный сайт и нажмите «Проверить установку».

⚠️ Поля своего кода в настройках сайта Webflow открываются на платном Site plan. Нужен виджет только на одной странице — у страницы есть свои поля кода в её настройках.

Squarespace#

  1. Панель сайта → Website → Website Tools → Code Injection.
  2. Поле Header (попадает в <head> каждой страницы) → вставьте строку → Save.
  3. Откройте живой сайт и нажмите «Проверить установку».

⚠️ Панель Code Injection доступна на планах Core, Plus, Advanced и части легаси-планов Squarespace. Блок кода на странице (Code Block) — не замена: он ставит код внутрь одной страницы, а виджеты нужны на всём сайте.

Шаги сверены с официальной справкой платформ. Платформа переименовала пункт меню — верьте её справке, а не нам, и напишите нам: поправим.


Двенадцать виджетов#

Каждый виджет — отдельная карточка с тумблером и шестерёнкой настроек. Данные, которые собирают виджеты, попадают в обычные разделы кабинета — отдельного «инбокса для сайта» заводить не нужно.

Виджет Что видит посетитель Куда попадают данные Документация
🍪 Cookies и согласие Баннер согласия с категориями и экран настроек Журнал согласий, декларация cookies Cookies и согласие
💬 Чат: ИИ-ассистент и операторы Пузырь чата на странице Секция «Гости» в «Рабочем чате» — вместе с WhatsApp, Telegram, email, Messenger/Instagram Чат с гостями
💡 Попапы и формы Промо, предложения при уходе, сбор email, таймеры Кампании и их статистика Кампании вовлечения
📅 Бронирование столика Кнопка «Забронировать столик» Раздел «Столы» — брони и схема зала Брони столов
🗓️ Онлайн-запись Кнопка «Записаться»: услуга → мастер → время Раздел «Записи» Журнал записи
🛒 Онлайн-заказ Кнопка «Заказать», корзина и оформление поверх вашего сайта Раздел «Заказы» Онлайн-заказ на своём сайте
📚 Центр поддержки Кнопка «?» с опубликованными статьями справки Статьи — в «Статьи и страницы» (группа «Справка»), аналитика справки — в «Базе знаний» Центр поддержки
⚖️ Юридические документы Ссылки или текст политики конфиденциальности, условий и т. п. Страницы на нашем хостинге, переиздание обновляет сайт само; настраивается прямо в панели виджета, без мастера Юридические документы
📞 Звонок с сайта Кнопка «Позвонить» — разговор прямо из браузера, без набора номера Раздел «Звонки»: запись и разбор как у обычного звонка Звонок с сайта
☎️ Обратный звонок Форма «Перезвоните мне» с выбором удобного времени Очередь перезвона: система сама набирает менеджера и гостя; заявки — в «Заявках» и во вкладке «Обратные звонки» раздела «Клиенты» Обратный звонок
➕ Мультикнопка Одна плавающая кнопка, за которой все каналы связи сразу Туда, куда ведёт выбранный канал; в кабинете — статистика кликов по каналам Мультикнопка
📈 Живая витрина Ненавязчивые плашки «только что забронировали столик» Ничего не собирает — только показывает ваши же события Живая витрина

Порядок загрузки не случаен: cookie-баннер стартует первым, чтобы остальные виджеты и чужая аналитика на вашем сайте увидели уже применённое решение посетителя о cookies. По той же причине мультикнопка поднимается предпоследней: она собирает под себя уже включённые виджеты и гасит их собственные кнопки, чтобы в углу не толкались пять штук. «Живая витрина» идёт последней — её плашки отступают, если в том же углу уже стоит чья-то кнопка.

Мультикнопка — не просто список ссылок: у неё есть облачко-приглашение («Есть вопрос?»), условия показа (на каких страницах, через сколько секунд, только на телефоне или везде), заготовка первого сообщения для мессенджеров и своя статистика кликов по каналам.

«Живая витрина» показывает социальное доказательство на ваших собственных данных — заказах, бронях и записях, — и делает это честно: имён и телефонов в плашке нет, события агрегированы, а устаревшие перестают показываться по календарю заведения (закрытое вчера заведение не «продаёт» вчерашние заказы).

У карточки «Попапы и формы» рядом с тумблером и шестерёнкой стоит кнопка «✨ Создать из шаблона»: она открывает то же окно настроек виджета, но сразу галереей готовых сценариев — и ничего не сохраняет, пока вы не нажмёте «Готово».

Панель «Юридические документы» больше не отправляет в пятишаговый мастер: страна, набор документов, вопросы о вашей деятельности, реквизиты и язык лежат на одном экране, автозаполнение и предпросмотр свёрнуты, внизу — счётчик «Опубликовать документов: N». Опция, которая противоречит уже данным ответам, заперта с пояснением, почему именно.

Открытые окна хаба живут в адресе страницы: шестерёнка виджета пишет ?widget=<виджет>, окно кода установки — ?panel=install. Значит, ссылку на настройку конкретного виджета можно отправить коллеге, и она переживёт F5 и кнопку «назад».

Одному виджету мало тумблера — нужно ещё содержимое:

  • Онлайн-запись появится на сайте, когда в меню есть хотя бы одна позиция с типом «Услуга» и включено бронирование (тот же переключатель, что у брони столика);
  • Центр поддержки включается тумблером сразу, но без опубликованных статей откроет пустую страницу справки — в настройках виджета видно, сколько статей опубликовано.

Над кнопками каждой карточки — мини-статистика за 7 дней: показы, открытия и третье число по смыслу виджета (заявки, заказы, брони, записи, разговоры, диалоги, клики). «—» значит, что данных ещё нет вовсе, «0» — телеметрия есть, а событий не было; «Подробнее →» ведёт в дашборд «Виджеты сайта».

В окне настроек онлайн-заказа есть ещё одна кнопка для чужого сайта — «🔔 Сообщить о поступлении»: вы выбираете товар и вариант из своего каталога, размечаете кнопку на странице распроданного товара, а гость оставляет почту, подтверждает её по ссылке и получает одно письмо, когда товар вернулся в наличие. Чужой каталог мы не читаем и остатки с чужой страницы не берём — товар привязывается вручную. Подробнее — в статье Онлайн-заказ на своём сайте.


Формы, которые уже есть на вашем сайте#

Блок «📝 Формы, которые уже есть на вашем сайте» под сеткой карточек — для случая «форма заявки на сайте уже стоит, и менять её никто не будет». Мы её не подменяем и не задерживаем: форма отправляется на ваш бэкенд, как и раньше, а копия заявки попадает в кабинет.

Правило — это CSS-селектор формы, адреса полей «имя / телефон / почта» (значением может быть и просто имя поля, например phone, и селектор input[name="tel"]), необязательные маски страниц и тумблер. Правил на локацию — до 10, по правилу на форму. Правило без селектора формы или без телефона либо почты включить нельзя — ему нечего собрать. У каждой строки есть кнопка «Проверить»: сервер читает страницу и отвечает, нашлась ли форма, какие поля правила в ней есть и какие имена полей у неё вообще.

Что именно уезжает. Ровно три поля — имя, телефон, почта — плюс адрес страницы без параметров и якоря. Ввод до нажатия «Отправить» не читается, своей проверки и задержек мы не добавляем, а форма, не прошедшая собственную проверку браузера, заявки не создаёт. Повтор отправки той же формы с тем же контактом в течение 10 минут (ретрай, «назад → отправить снова») даёт одну заявку, а не две. Формы наших собственных виджетов не слушаются, чтобы лид не задвоился.

Где искать. Раздел «Заявки» и вкладка «Заявки» контакт-центра — группой «Формы на сайте: <подпись правила>». У каждой такой заявки стоит честная пометка: мы видим нажатие «Отправить», а не судьбу данных на вашем бэкенде.

⚠️ Кнопка «Проверить» разбирает HTML без браузера: форму, которую рисует JavaScript, она не увидит — а перехват в браузере гостя её увидит. Панель говорит об этом прямо.


Ссылки и QR на действия#

Блок «🔗 Ссылки и QR на действия» под сеткой карточек делает ссылку, которая открывает на вашем сайте одно конкретное действие: https://ваш-сайт/#cenaly=book — форму брони, #cenaly=appointment:<услуга> — запись сразу на услугу, #cenaly=order:<товар> — карточку товара, а ещё чат, обратный звонок, справку, документ (legal:<тип>) и веер мультикнопки. Такую ссылку обычно печатают QR-кодом: на столе, в чеке, на упаковке, в офлайн-рекламе.

Как собрать: выберите действие, при желании — конкретный объект (услуга или позиция из опубликованного меню, опубликованный документ) и «где размещаете» — от этого зависят UTM-метки для вашей аналитики (utm_source=qr&utm_medium=<место>&utm_campaign=<действие>; мы их не читаем). На выходе — ссылка с кнопкой «Копировать» и QR-код, который скачивается в PNG и SVG. База ссылки — адрес вашего сайта, а если он не указан — наша витрина. На карточке каждого виджета есть короткая кнопка «🔗 Ссылка» с уже выбранным действием.

Почему якорь #, а не параметр ?: чужие CMS, кэш-плагины и CDN режут неизвестные параметры и меняют канонический адрес, а якорь браузер на сервер не отправляет — он гарантированно доезжает до нашего кода. Исполняет его единый тег: он читает якорь один раз на загрузке, снимает его из адреса и открывает нужный виджет, когда тот поднялся. Одиночные теги виджетов якорь не читают.

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


Виджет онлайн-записи подробнее#

Настройки — карточка «Онлайн-запись» → шестерёнка: цвет кнопки, её текст, угол экрана и язык. Там же, под настройками, лежит готовая строка кода отдельно для этого виджета — на случай, если ставите только его.

Язык. По умолчанию — авто: виджет говорит на языке страницы, на которой стоит, и знает 45 языков. Словарь подгружается только тот, который понадобился, поэтому на скорость сайта это не влияет. В списке можно жёстко зафиксировать один язык — например, если сайт двуязычный, а записывать вы хотите на одном.

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

Атрибут Что делает
data-service="id услуги" услуга выбрана заранее — кнопка «Записаться» рядом с описанием услуги на вашем сайте. Идентификатор виден рядом с позицией в разделе «Меню»
data-master="id мастера" мастер выбран заранее — для страницы конкретного специалиста; идентификатор мастера совпадает с идентификатором сотрудника
data-open="true" панель записи открывается сама, без нажатия на кнопку — для отдельной страницы «Записаться»

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

Меньше шагов до записи:

  • единственная услуга или единственный подходящий мастер — лишний экран не показывается;
  • чип «⚡ Ближайшее: сегодня 17:30» записывает в один тап, а календарь сам открывается на первом дне со свободным временем;
  • имя, телефон и почта запоминаются на устройстве гостя: при повторной записи поля уже заполнены, а ссылка «Не я» их стирает;
  • на телефоне панель открывается во весь экран, кнопка записи не прячется под клавиатурой;
  • виджетом можно пользоваться с клавиатуры, он корректно читается программой чтения с экрана.

Почта. Поле e-mail необязательное; оставил гость адрес — получит письмо с деталями визита и ссылкой «Управлять записью», по которой сам перенесёт или отменит визит. Подробности — в разделе Журнал записи.

Что дал виджет. В журнале записи кнопка «🌐 Виджет на сайте» показывает воронку за 7, 30 или 90 дней: сколько раз кнопку увидели, сколько гостей открыло панель, дошло до контактов и записалось, сколько записей потеряно из-за занятого времени. У самих записей с сайта стоит бейдж «С сайта».


Проверка установки#

Кнопка «Проверить установку» открывает ваш сайт и читает исходный HTML страницы. В ответе:

  • «Код виджетов найден на сайте» — единый тег на месте;
  • «Найдены только отдельные теги виджетов» — работают старые одиночные вставки, единого тега нет;
  • «Код на сайте принадлежит другой локации» — в теге чужой data-domain (частая ошибка при нескольких заведениях);
  • «На этой странице кода виджетов нет» — тега не видно.

⚠️ Проверка читает исходный HTML одной страницы. Если тег вставляет уже в браузере Google Tag Manager или другой скрипт, проверка его не увидит — это не ошибка. Что ещё остаётся за границей метода, собрано ниже в «Что проверка установки не видит».

Раз в неделю та же проверка повторяется сама — для локаций, у которых указан адрес сайта, включён хоть один виджет и прошлая проверка тег находила. Тег умирает молча — сайт переехал на новую тему, подрядчик выкатил вёрстку без вставки, кэш-плагин выкинул «лишний» скрипт, — и раньше это замечали только по тому, что заявки кончились. Теперь переход «тег был → тега нет» приходит карточкой в рабочий чат (не чаще раза в неделю на локацию) и красным третьим шагом в блоке «Ваш сайт». Сайт, который не открылся (таймаут, ошибка сервера), поломкой не считается — проверим на следующей неделе; тег, вставленный через Google Tag Manager, проверка не видит никогда, поэтому и ложной тревоги по нему не будет.

Тот же разбор доступен публично, без входа в кабинет — страница «Проверка сайта»: введите адрес, и она прочитает HTML страницы и покажет счётчики и пиксели поимённо, стоит ли баннер согласия (наш, чужой или никакой) и виден ли наш тег с включёнными виджетами. Ей удобно проверить сайт до подключения и отдать ссылку разработчику или клиенту.

Под карточками виджетов в разделе есть ещё два блока: «Витрина на своём коде (Headless)» — данные, API и вебхуки для случая, когда сайт пишет ваш разработчик и наши виджеты ему не нужны, — и «Продвинутое: отдельный тег на каждый виджет» с готовыми одиночными тегами. То есть одиночный тег можно не только «донести из прошлого», но и взять здесь же.

Что проверка установки не видит#

Метод у проверки простой и честный: один запрос за исходным HTML одного адреса, без браузера. Мы читаем то, что отдал сервер, и ищем в разметке <script src="…"> с нашими путями. Отсюда весь список того, чего она не умеет, — и это не поломка, а граница метода.

Случай Что скажет проверка Как убедиться на самом деле
Тег вставляет Google Tag Manager или любой другой скрипт уже в браузере «кода нет» Откройте сайт: виджет либо есть, либо нет. В инструментах разработчика вкладка Network, фильтр site/v1.js
Другая страница сайта: тег стоит в шаблоне главной, но не на страницах блога или каталога ответ про тот адрес, который стоит в поле «адрес сайта» Впишите в поле полный адрес внутренней страницы и нажмите проверку ещё раз
SPA (React, Vue и подобные с клиентским рендером): разметку собирает JS уже в браузере «кода нет», даже когда виджет на сайте работает Смотреть глазами. Тег надёжнее ставить в серверный шаблон или index.html, а не внутрь приложения
Переходы внутри SPA без перезагрузки страницы ничего: проверка не кликает по сайту и видит только первый ответ сервера Пройдите по разделам сами — виджет живёт на странице и переживает такие переходы
Сайт отвечает только по http://, закрыт логином, IP-фильтром или антибот-защитой ошибка проверки Проверка ходит только по https и без авторизации; смотрите такой сайт сами
Очень большая страница читаются первые 512 КБ разметки Тег в шаблоне ставят в <head> — там он попадает в начало страницы
Больше трёх редиректов подряд ошибка Впишите конечный адрес
Кэш платформы или CDN отдаёт сохранённую копию без тега «кода нет» Сбросьте кэш и повторите
Тег стоит, но виджет не работает (не оплачен, тумблер выключен, сработали условия показа) «код найден» Это другой вопрос — см. «Устранение неполадок» ниже

Что проверка видит хорошо: есть ли наш тег в исходной разметке, единый он или набор одиночных и чей data-domain в нём стоит, — то есть ловит самую частую ошибку «скопировал код из соседней локации».

Ровно та же граница у публичной страницы «Проверка сайта»: она тоже читает исходный HTML и не выполняет скрипты. Реальные cookies и то, что подгружается уже в браузере, собирает только сканер CMP — см. Cookies и согласие.


Устранение неполадок#

Общий список для всех двенадцати виджетов — от самой частой причины к редким. Специфика конкретного виджета описана в его статье.

1. «Проверка установки» говорит, что кода нет. Тег не вставлен, вставлен не на все страницы шаблона или сайт после вставки не опубликован (Tilda, Wix, Webflow требуют повторной публикации). Проверьте и адрес сайта в шапке раздела: проверка ходит именно по нему — и только по нему, одной страницей. Прежде чем что-то чинить, сверьтесь со списком «Что проверка установки не видит»: половина случаев «кода нет» — это не поломка сайта, а граница метода.

2. Код на сайте принадлежит другой локации. В теге стоит чужой data-domain — частая ошибка, когда заведений несколько и код скопировали из соседней карточки. Возьмите код при выбранной нужной локации.

3. Проверка не видит тег, вставленный через Google Tag Manager. Это не ошибка. Проверка читает исходный HTML страницы — то, что отдал сервер, — а GTM подставляет тег уже в браузере. Откройте сайт и посмотрите глазами: виджет либо есть, либо нет. Полный список того, что метод проверки не показывает (GTM, вторая страница сайта, SPA, закрытый сайт), — «Что проверка установки не видит».

4. Изменения не появились на сайте. Файлы виджетов раздаются через CDN с кэшем 5 минут. После включения тумблера или правки настроек подождите несколько минут и обновите страницу с очисткой кэша (Ctrl+F5). Если браузер упорно показывает старое — проверьте в режиме инкогнито.

5. Виджет включён, но на странице его не видно. Пройдите по списку:

  • виджет платный и не оплачен — неоплаченное расширение вырезается из данных сайта на сервере, поэтому на страницу оно не попадёт даже при включённом тумблере;
  • у виджета есть условия показа (мультикнопка, обратный звонок, «Живая витрина»): маска страниц, задержка, фильтр устройства или расписание могли отсечь именно эту страницу и этот момент;
  • виджету не хватает содержимого: онлайн-запись появляется, когда в меню есть хотя бы одна позиция-услуга и включено бронирование; центр поддержки без опубликованных статей откроет пустую панель; мультикнопка без единого канала не рисуется вовсе; «Живая витрина» молчит, пока числа ниже порога;
  • мультикнопка поглотила кнопку соседа: если в её веере есть пункт «Открыть чат» или «Обратный звонок», собственные кнопки этих виджетов гасятся намеренно — они теперь внутри веера.

6. В углу экрана толкаются несколько кнопок. Включите мультикнопку и добавьте в её веер действия нужных виджетов — их отдельные кнопки погаснут сами.

7. Виджетов нет на сайте, сделанном нашим конструктором. Там код установки вшит в шаблон, и блок с кодом в кабинете не показывается — это нормально. Проверяйте тумблеры виджетов: новый сгенерированный сайт приезжает с включёнными cookie-баннером, юрдокументами и чатом, остальное включается вручную. Учтите и различия поверхностей: мультикнопка на нашей витрине показывается только по отдельному тумблеру «Показывать и на нашей витрине» (она поглощает нативные кнопки страницы), а «Живая витрина» работает тем же одним тумблером, что и на чужом сайте.


Сайт с Content-Security-Policy#

Если ваш сервер отдаёт заголовок Content-Security-Policy, браузер сам решает, что нашему коду установки разрешено загрузить. Сам тег при этом работает — вы его разрешили, — а всё, что он подтягивает, может быть заблокировано молча: снаружи это выглядит как «виджеты пропали». В консоли браузера при этом видны строки вида Refused to load the script.

Разрыв возникает ровно в одном режиме: политика разрешает скрипты только по одноразовому nonce, без 'strict-dynamic' и без хоста нашего CDN в списке. Ниже — три способа это закрыть, от самого простого.

Вариант 1 — nonce на нашем теге#

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

Content-Security-Policy: script-src 'nonce-r4nd0m...'
<script nonce="r4nd0m..." src="https://cdn.<ваш бренд>/site/v1.js" data-domain="ВАША-ЛОКАЦИЯ" async></script>

Единый тег читает nonce своего тега и передаёт его каждому бандлу виджета, который вставляет, — они проходят ту же проверку. Ничего дополнительно разрешать не нужно.

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

Вариант 2 — 'strict-dynamic'#

Content-Security-Policy: script-src 'nonce-r4nd0m...' 'strict-dynamic'

С 'strict-dynamic' доверие к нашему тегу распространяется на скрипты, которые он вставляет, и перечислять больше ничего не нужно. Это самая короткая политика, при которой работают все виджеты, включая ленивые части «Умных попапов».

Вариант 3 — список хостов#

Если nonce вам недоступен (так бывает на конструкторах сайтов), разрешите наши хосты явно:

Content-Security-Policy: script-src https://cdn.<ваш бренд>;
  connect-src https://cdn.<ваш бренд> https://api.<ваш бренд> wss://ws.<ваш бренд> https://o.<ваш бренд>;
  img-src https://cdn.<ваш бренд> https://i.<ваш бренд>;
  frame-src https://cdn.<ваш бренд> https://ваша-локация.<ваш бренд>;
  style-src 'unsafe-inline'

Готовый сниппет с подставленными хостами вашего бренда и вашей локации есть в кабинете: Маркетинг → Мой сайт, блок «Сайт с Content-Security-Policy?» под кодом установки — там же кнопка «Скопировать» и пометка, какому виджету нужен каждый хост.

Что кому нужно:

Директива Кому нужна
script-src Всем виджетам: бандлы с нашего CDN
connect-src Всем: заявки, брони, записи, заказы, телеметрия; чату — вебсокет и бакет сигналов
img-src Заказу: фотографии товаров и блюд
frame-src Заказу, центру поддержки и юридическим документам: они открывают вашу витрину в <iframe>
style-src Всем: окна виджетов вставляют <style> в свой Shadow DOM

Чего это не покрывает — честно#

  • Стили. Оформление окон — инлайновый <style> внутри Shadow DOM, поэтому нужен style-src 'unsafe-inline'. На script-src это не влияет: скриптам мы 'unsafe-inline' и 'unsafe-eval' не просим.
  • Ленивые части виджетов (расширенные попапы и слоты «Умных попапов», возрастной гейт баннера согласия, мобильный бар мультикнопки, перехват форм) грузятся своими загрузчиками и nonce получают — они проходят ту же проверку, что и главный бандл. Исключение — форма кнопки «Сообщить о поступлении» (stock/form-v1.js): это отдельный тег вне единого загрузчика, и nonce он пока не переносит — при политике только с nonce, без хоста нашего CDN, форма подписки не откроется.
  • Конструкторы сайтов (Tilda, Wix и подобные) отдают заголовок сами, и одноразовый nonce своему тегу вы там не выпишете. Остаётся вариант со списком хостов — если платформа вообще даёт править политику.
  • Звонок с сайта передаёт звук потоком WebRTC и не грузит медиафайлы, поэтому media-src ему не нужен; микрофон разрешают Permissions-Policy и HTTPS, а не CSP.

Вынести виджет отдельным разделом#

Если один из виджетов — ваш основной продукт (например, вы пользуетесь только попапами или только cookie-баннером), путь «Маркетинг → Мой сайт → карточка → шестерёнка» слишком длинный. На карточке есть кнопка «Вынести в сайдбар» — виджет получит собственный пункт меню и откроется в один клик.

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


Что бесплатно, а что платное расширение#

Часть виджетов входит в подписку, часть подключается как расширение в разделе «Расширения»: платными помечены Бронирование, Попапы и формы, Центр поддержки и Юридические документы — на карточке стоит чип «💳 Платное расширение».

Платный виджет включается после покупки. Нажатие на тумблер у неоплаченного виджета не включает его, а открывает окно оплаты прямо в разделе; после оплаты виджет включается сам. Чип «💳 Платное расширение» у неоплаченного виджета — тоже кнопка оплаты, а у уже оплаченного он ведёт в каталог посмотреть подписку. Уже работающий виджет сам не отключится. Ограничение не только в интерфейсе: неоплаченный виджет вырезается из публикуемых данных локации, поэтому на сайте он не появится в любом случае.

На сайте, сделанном нашим конструктором, «Юридические документы» и cookie-баннер бесплатны. На их карточках вместо «платного» стоит чип «🎁 Входит в сайт», и окно оплаты не показывается вовсе: это не апселл, а условие, при котором сайтом законно пользоваться. Новый сгенерированный сайт сразу приезжает с включёнными cookie-баннером, юрдокументами и чатом. На чужом сайте оба виджета остаются платными расширениями.

Тарифы и оплата — в разделе Магазин приложений и Подписка.


Связанные разделы#


Частые вопросы#

Нужно ли отказываться от своего сайта? Нет. Виджеты живут поверх вашего сайта, вёрстку и хостинг вы не меняете.

Сколько тегов вставлять, если виджетов несколько? Один. Состав виджетов — тумблеры в кабинете.

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

Сломает ли виджет вёрстку? Нет. Каждый виджет рисуется в изолированном контейнере (Shadow DOM): стили вашего сайта не протекают внутрь виджета, а стили виджета — наружу. Исключение по замыслу — виджет онлайн-заказа: он специально ставит кнопки «В корзину» в вашу разметку, и это настраивается с превью (см. Онлайн-заказ на своём сайте).

На каком языке заговорит виджет? Он смотрит на язык страницы: сначала атрибут data-lang в теге, если вы его задали, затем lang вашей HTML-страницы, затем язык браузера гостя, а в крайнем случае — английский. Словари разного размера: cookie-баннер, виджет онлайн-записи и окно чата знают 45 языков (подписи чата приезжают отдельным языковым паком по языку страницы), у остальных встроены английский, русский, грузинский и турецкий с падением на английский. Подписи кнопок и приглашения вы задаёте сами — отдельной строкой для каждого языка сайта.

Где хранятся данные, которые собирают виджеты? В облаке вашего бренда: у cenaly.com — AWS, у cenaly.ru — Yandex Cloud; данные российских заведений остаются в России. Заявки, заказы, брони и переписки попадают в ваш кабинет, а на публичный CDN уезжают только настройки виджетов и то, что и так публично (меню, часы работы, опубликованные документы, обезличенные числа «Живой витрины»).

У меня несколько заведений — как быть? Виджеты настраиваются на локацию: выберите её в списке вверху раздела и возьмите её код установки. У каждого сайта — свой data-domain.

Можно ли поставить виджеты на несколько разных сайтов? Да, тег одной локации можно вставить на несколько страниц или сайтов — данные придут в одну локацию.

Была ли статья полезной?