После того как все настройки онлайн-записи выполнены, установите виджет на сайт.
Если вы самостоятельно разработали дизайн кнопки онлайн-записи и хотите, чтобы форма онлайн-записи открывалась при клике по ней, то этот способ для вас.
Пример:
Виджет онлайн-записи может быть привязан к любой кнопке на сайте компании. Поэтому, прежде всего, необходимо поставить на сайт код самой кнопки:
<a href="#" class="ms_booking">Записаться онлайн</a>Установка кнопки
В основном меню перейдите в раздел Онлайн-запись – Вебсайт. Выберите нужную форму или добавьте новую (как это сделать, читайте в статье Создание виджетов онлайн-записи).
В открывшемся новом окне перейдите во вкладку Настройки кнопки и отключите создание круглой кнопки по умолчанию, для этого снимите галочку Включить кнопку.
Перейдите во вкладку Код кнопки. Скопируйте код кнопки и установите перед закрывающимся тегом </body> на каждой странице сайта.
Код имеет следующий вид:
<script type="text/javascript" src="https://w11782.yclients.com/widgetJS" charset="UTF-8"></script>где 11782 - уникальный идентификатор конкретной формы.
Однако, в данный код необходимо внести некоторые изменения. Уберите из него https: и поставьте на сайт получившийся вариант кода.
В данном случае:
<script type="text/javascript" src="//w11782.yclients.com/widgetJS" charset="UTF-8"></script>
Идентификатор для конкретной формы также можно получить на странице Онлайн-запись – Вебсайт (подробнее в статье Как узнать номер (ID) формы онлайн-записи (виджета)). В шаблоне сайта код формы записи должен располагаться под кодом кнопки.
а теперь можно привести пример как внутри кнопки button или a должен быть этот код?
Здравствуйте, Ирина.
Сначала ставим код кнопки, после него код виджета.
Выглядеть это должно примерно так:
.<a class="ms_booking" href="#">Записаться</a>
<script type="text/javascript" src="//w11111.yclients.com/widgetJS" charset="UTF-8"></script></button>
где w11111 - уникальный идентификатор конкретной формы.
Его можно найти в разделе Онлайн-запись - Вебсайт - столбец Ссылка.
Из вашего ответа ясно как поставить кнопку на самописцы сайт. Подскажите, пожалуйста, как поставить кнопку в собственном дизайне на Тильду? Если что, блоки редактировать умею. Спасибо.
ВСЕМ НОВОСТЬ: https://tilda.cc/identity/apikeys/#yclients-custom-button
Влад, ответила вам в статье по ссылке: https://support.yclients.com/hc/ru/articles/115002185533
Спасибо за информацию по API. С Tilda есть готовая интеграция, но в этом случае кнопку изменить нельзя. На всякий случай ссылка на инструкцию от Tilda:
http://help-ru.tilda.ws/online-booking
Для того чтобы добавить онлайн-запись на кнопки в 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".
Напишите, пожалуйста, получилось ли настроить?
А как добавить произвольную кнопку на wix сайты? Какой код должен исполняться внутри метода onClick у кнопки?
Здравствуйте, Дмитрий. Более подробная инструкция о том, как установить кнопку онлайн-записи на сайт с CMS Wix есть по ссылке: https://support.yclients.com/hc/ru/articles/214419565
Если возникнут трудности с установкой кнопки, Вы всегда можете написать нам на support@yclients.com
Ольга, в статье которую вы указали описывается как создать страницу с онлайн записью в wix. Меня интересует именно ваш виджет, который выплывает поверх страницы как в этой статье https://support.yclients.com/hc/ru/articles/203046042 только по нажатию на произвольную кнопку
Дмитрий, отправила Вам на почту инструкцию по установке кнопки-онлайн записи в Wix.Если возникнут трудности с установкой - обращайтесь!
Ольга, а можете так же и мне скинуть данную инструкцию? Чтобы именно по кнопке WIX открывался виджетю Возможно вообще такое?
Дмитрий, отправили вам инструкцию. Да, так настроить открытие формы на сайте WIX можно.
Спасибо. Конечно, все выглядит "топорно"... :)
То есть сделать так, чтобы выплывало окно виджета, а не открывалось в новой странице, как по кнопке "онлайн запись" от уайклаентс, нельзя?
Можно сделать так, чтобы окно виджета открывалось на сайте. Пример сайта пришлю вам на почту.
Настроить это можно по инструкции, которую я прислала ранее.
Мы немного о разном говорим? :) Я имею ввиду, возможно ли сделать на wix точно так же как тут - https://boycut.ru/msk/ в разделе "цены и услуги", нажимаешь на кнопку услуги - справа выплывает виджет?
Поняла вас, Дмитрий.
Если вам нужна кнопка не YCLIENTS, а WIX + встроенный виджет на сайте, то, к сожалению, не получится соблюсти оба условия.
Либо кнопка YCLIENTS + встроенный виджет, либо кнопка WIX + открытие формы в отдельной странице, либо кнопка WIX + открытие отдельной страницы, где через iframe добавлена форма YCLIENTS. Наиболее симпатичный пример последней реализации вышлю вам на почту.
Доброе время суток. Пришлите пожалуйста на почту инструкцию по установке кнопки-онлайн записи в Wix.
Подскажите, а зачем вставлять скрипт прямо в кнопку, если он не сработает? Ведь именно класс - ms_booking тут важен? Или я чего недопонимаю?
Ольга Тележенко 11 апрель 2018 г. 00:42
Здравствуйте, Ирина.
Сначала ставим код кнопки, после него код виджета.
Выглядеть это должно примерно так:
.<a class="ms_booking" href="#">Записаться</a>
<script type="text/javascript" src="//w11111.yclients.com/widgetJS" charset="UTF-8"></script></button>
И подскажите, как сделать 2 кнопки, что бы они открывали 2 разных виджета на одной странице?
w11111.yclients.com/widgetJS
w22222.yclients.com/widgetJS
Добрый день, Елена.
Инструкция по ссылке:
https://support.yclients.com/hc/ru/articles/214419565
Марк, class ms_booking позволяет открывать форму как встроенный виджет YCLIENTS на сайте.
Код самой формы онлайн-записи нужно обязательно указывать в коде кнопки, чтобы происходило открытие нужной формы онлайн-записи.
Чтобы на одну страницу сайта добавить 2 кнопки с 2 разными виджетами, воспользуйтесь статьей по ссылке:
https://support.yclients.com/hc/ru/articles/208613345
А как это можно реализовать на nethause???
Ищем решения, пока можем предложить только добавление кнопки YCLIENTS https://support.yclients.com/hc/ru/articles/208380149 или собственную кнопку + открытие формы по ссылке в отдельной вкладке. Обязательно ответим и на ваше письмо, можно ли добавить собственную кнопку + открытие виджета в правой части сайта, как только протестируем.
Мне помогла вот эта инструкция https://tilda.cc/ru/answers/a/yclients-custom-button/ , высланная вашим работником службы поддержки. Спасибо!
А если я хочу добавить параметр выбора мастера в URL, то вот эта строчка кода не работает, виджет не открывается scriptService .src = "https://n****.yclients.com/company:******?o=m*****/widgetJS";
Вадим, вижу, что вы уже общаетесь с моим коллегой по данному вопросу.
Нужно сделать следующим образом. На сайт нужно добавить код:
$('a[href^="https://nXXXXXX.yclients.com/"]').attr("data-url", function (i) { return this.href; });
$('a[href^="https://nXXXXXX.yclients.com/"]').attr('href', '#yclients')
где XXXXXX – номер (идентификатор) вашей кнопки.
Ниже добавить код:
$(document).ready(function() {
$('a[href^="#yclients"]').addClass('ms_booking');
});
где XXXXXX – номер (идентификатор) вашей кнопки.
В настройках кнопки нужно добавить вместо ссылки нужный data-url.
"В настройках кнопки нужно добавить вместо ссылки нужный data-url." - В каких именно настройках кнопки? Приведите пожалуйста пример
Вадим, ответ на этот вопрос был дан моим коллегой в вашем обращении №801569.
Решение заключалось в том, чтобы в тильде добавить 2 скрипта в html-блок с классом t123:
$('a[href^="https://nXXXXXX.yclients.com/"]').attr("data-url", function (i) { return this.href; });
$('a[href^="https://nXXXXXX.yclients.com/"]').attr('href', '#yclients')
$(document).ready(function() {
$('a[href^="#yclients"]').addClass('ms_booking');
});
Добрый день. Есть несколько вопросов (wordpress - elementor).
1. Как сделать свою кнопку с таким же открыванием как у плавающей (справа 500px full-height). Есть ли готовые примеры?
2. Как отключить отображение плавающей кнопки на мобильных устройствах (пробовали отключать в настройках адаптивности - не получилось)
Добрый день,
1 - Вот пример привязки виджета к собственной кнопке - https://boycut.ru/msk/
Виджет открывается так в стандартном исполнении.
Привязать виджет к собственной кнопке вы можете по инструкции выше.
Также, инструкции по установке кнопки на wordpress можно найти по ссылке
- https://support.yclients.com/hc/ru/articles/209265529
2 - Вы можете написать запрос нам на support@yclients.com с почты владельца филиала, и указать в каком виджете, и для какой платформы вы хотите отключить отображение кнопки. Коллеги скроют её для вас.