Центр поддержки клиентов:
8 (800) 505 04 75
Ссылка на сайт

Установка виджета онлайн-записи на TILDA

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

1. Начните редактирование сайта в TILDA. В библиотеке Все блоки перейдите в категорию Другое и выберите блок Т790 Виджет YCLIENTS для онлайн-записи.

_______1.png

2. В Контенте блока укажите номер формы онлайн-записи (Как узнать номер (ID) формы онлайн-записи) и текст, который будет на кнопке, например, Онлайн-запись (по умолчанию прописано Online booking). Нажмите кнопку Сохранить и закрыть, а после этого опубликуйте страницу.

_______2.png

 
Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 1 из 2
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Антон

    $('div.tn-elem__236400321503503911042>a.tn-atom').addClass('ms_booking');
    необходимо заменить выделенные жирным селекторы классов на собственные.

    Что такое селекторы классов, где взять собственные ?

  • Avatar
    Полина Попова

    Антон, Вам может быть интересна новая статья от Tilda о том, как быстро и просто подключить виджет онлайн-записи YCLIENTS на сайт на CMS Tilda.
    Ссылка на статью: http://help-ru.tilda.ws/online-booking

    Выполняемая задача селектора по классу - выбор всех элементов по имени класса (по значению атрибута class). Обозначение селектора по классу - название класса с предшествующей ему точкой. Собственные селекторы классов можно создать самостоятельно в коде сайта.

  • Avatar
    Дмитрий

    В итоге вы не ответили на вопрос. Т.к. кнопки изначально создаются в tilda.cc, то:
    1. Как посмотреть класс кнопки? И что именно из информации в коде будет нужно для вставки в скрипт
    2. У кнопки внутри tilda.cc нельзя настраивать класс, можно только указать ссылку на которую она ведет. Что прописывать в этом поле?

  • Avatar
    Полина Попова

    Дмитрий, инструкцию обновили:
    Для того чтобы добавить онлайн-запись на кнопки в CMS Tilda, Вам необходимо использовать блок Tilda "Вставка HTML кода" из раздела готовых блоков "Другое".
    1. В данный блок вставьте нижеследующий код:

    $(document).ready(function() {
    $('a.tn-atom').addClass('ms_booking');
    var scriptService = document.createElement('script');
    scriptService .src = "https://wXXXXX.yclients.com/widgetJS";
    scriptService .type = "text/javascript";
    scriptService .charset = "UTF-8";
    document.documentElement.appendChild(scriptService );
    });

    2. Необходимо заменить wXXXXX на номер Вашего виджета
    3. После того как Вы добавите вышеописанный код, необходимо изменить тип кнопки. Для этого перейдите к блоку с кнопкой и нажмите "Редактировать блок". На открывшейся странице дважды кликните по кнопке онлайн-записи и нажмите кнопку "Настройки" в нижнем правом углу. В меню настроек измените следующие поля (Значение полей представлено в кавычках):
    - LINK - "#";
    - Target - "Same Window".

    Ответы на Ваши вопросы:
    1. Класс кнопки смотреть не нужно, просто повторите шаги из инструкции.
    2. В поле LINK укажите #.

    Изменено: Полина Попова
  • Avatar
    Max Medvedev

    Добрый день!
    Такой вопрос: я хочу что бы при нажатии на любую произвольную кнопку, например в верхнем меню сайта - на сайте открывалась правая панель виджета yclients - как это реализовать на тильде? можно пошаговую инструкцию?

  • Avatar
    Max Medvedev

    Если инструкция для этого была выше то не получается: вставляя код в блок хтмл он высвечивается текстом на странице или его нужно вставлять в теги ?

    3й шаг совсем непонятен, в тильде даже нет кнопок "редактировать блок" и соответственно кнопки "онлайн-записи" тоже нет

  • Avatar
    Полина Попова

    Добрый день, Макс.

    Чтобы сделать открытие виджета, как вам нужно:
    1. внесите изменения в Ваш код , а именно укажите код, указанный ниже:
    <script type="text/javascript" async>
    $(document).ready(function() {
    $(".t228__right_buttons_but:last-child a").addClass('ms_booking');
    var scriptService = document.createElement('script');
    scriptService .src = "https://n126431.yclients.com/widgetJS";
    scriptService .type = "text/javascript";
    scriptService .charset = "UTF-8";
    document.documentElement.appendChild(scriptService );
    });

    2. отмените атрибут target у Вашей кнопки.

  • Avatar
    Владислав Бриштель

    Добрый День, Полина!

    самый свежий ответ на вопрос привязки виджета к кнопкам CMS Tilda вот этот: https://support.yclients.com/hc/ru/articles/115002185533/comments/360000404314

    Сделал все как написано. Многие, я заметил, не понимают, что кнопка Редактировать Блок появляется в тильде только после конвертации блока в Zero Block (настройки блока Тильды и мотайте в самый низ, при этом блок изменится до первоначального и потеряется возможность простого редактирования, будьте готовы, там нужно уметь чуть больше)

    Так вот. Я вставил перед блоком с кнопками блок, скопировал в него текст
    $(document).ready(function() {
    $(".t228__right_buttons_but:last-child a").addClass('ms_booking');
    var scriptService = document.createElement('script');
    scriptService .src = "https://n126431.yclients.com/widgetJS";
    scriptService .type = "text/javascript";
    scriptService .charset = "UTF-8";
    document.documentElement.appendChild(scriptService );
    });

    Но не могу отменить атрибут Target совсем, он или Same window или New window, я оставил Same window

    Результат, кнопки вообще исчезли((

  • Avatar
    Полина Попова

    Добрый день, Влад.

    Попробуйте выбрать target как "new window". Кнопка появилась?

  • Avatar
    Михаил

    Полина, сделал по инструкции для Влада. Кнопка не появляется при любом атрибуте (same window или new window). Еще из косяков, при вставке в HTML блок кода:

    $(document).ready(function() {
    $(".t228__right_buttons_but:last-child a").addClass('ms_booking');
    var scriptService = document.createElement('script');
    scriptService .src = "https://wWWWWWW.yclients.com/widgetJS";
    scriptService .type = "text/javascript";
    scriptService .charset = "UTF-8";
    document.documentElement.appendChild(scriptService );
    });

    Неубираемый футер "made on Tilda" перескакивает в самый верх страницы.

    Я пытаюсь сделать вызов виджета при клике на кнопку, которая есть готовая в Тильде в блоке меню "МЕ403".

    Единственное как я заставил эту кнопку работать — прописал в блоке HTML код вида (был в другой статье):
    <script type="text/javascript" src="https://wWWWWWW.yclients.com/widgetJS" charset="UTF-8">

    Но при этом слетает стиль кнопки и она превращается в голый текст, но клик отрабатывает.

    Есть у нас шансы подружить кнопки Тильды с виджетом? :)

    Спасибо.

  • Avatar
    Полина Попова

    Добрый день, Михаил.

    Недавно опубликовали новую статью для Tilda. В ней описано как добавить форму на произвольную кнопку на сайте.

    Постарались сделать ее максимально подробной:
    https://support.yclients.com/hc/ru/articles/360008722354

    Но если появятся вопросы при реализации по статье - пишите, поможем разобраться :)

  • Avatar
    Михаил

    Полина, спасибо! Все получилось :)

  • Avatar
    Полина Попова

    Отлично :) Спасибо, что написали :)