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

Инъекции скрипта

Инъекция скрипта позволяет изменять виджет онлайн-записи под нужды компании. Прежде чем использовать эту функцию, проконсультируйтесь с техническим специалистом.

Ниже представлены примеры основных и часто используемых инъекций.

Скрыть длительность услуги

<style>
.time {
display: none;
}
</style>

 

Выбор филиала всегда будет открываться при открытии формы онлайн-записи

<script>
window.yclientsAdditionalOptions = {
firstStepAlways : true
};

</script>

 

Скрыть кнопку "Записаться снова"

<style>
.booking__repeat__block {
display: none;
}
.booking__repeat {
display: none;
}
</style>


Запретить транслитерацию определенного языка
На примере украинского языка

<script>
window.yclientsNotTransliterate = ['uk-UK'];
</script>


Скрыть поля

Пример кода для скрытия полей "Комментарий", "Напоминание", "Email" на шаге ввода контактных данных.

<style>
md-input-container.order-comment {
display: none!important;
}
md-input-container.order-remind-time {
display: none!important;
}
md-input-container.js-email-container {
display: none!important;
}
</style>

Если нужно что-то одно, то просто удалите часть кода, начиная с md.. и заканчивая }



Скрыть возможность SMS-авторизации

<style>
.login-tabs .y-tabs-wrapper {
display: none!important;
}
</style>

 

Скрыть цену на услуги в деталях записи в виджете

<style>
.y-record-card-full__price.ng-binding {
display: none!important;
}
</style>

 

Переименовать город в определенном языке

<script>
window.yGeolocationEnabled = true;

window.yclientsAdditionalOptions = {
cityListFilters: {
'ru-RU': [
function (city) {
for (var i = 0; i < city.length; i++) {
if (city[i] && parseInt(city[i].id) === 2) {
city[i].name = 'Москва и Подмосковье';
}

}
return city;
}
]
}
};
</script>


Скрыть раздел "Карты лояльности"

<style>
y-menu-item.js-loyalty-card-item.ng-scope.ng-isolate-scope {
display: none
</style>

 

Скрыть раздел "Отзывы" в информации о сотруднике на шаге выбора сотрудника

<style>
.js-master-info .master-info-tabs .y-tabs__tab {
width: 100%;
}

.js-master-info .master-info-tabs .y-tabs__tab:nth-child(2) {
display: none;
}
</style>

Скрыть раздел "Отзывы" на шаге выбора сотрудника


<style>

.y-reviews-button a{
display: none !important;
}
</style>

 

Скрыть раздел "Отзывы" в разделе "О компании"

<style>

.company-info-tabs .y-tabs-list .y-tabs__tab:nth-child(2){
display: none !important;
}

.company-info-tabs .y-tabs-list .y-tabs__tab:nth-child(1){
width: 50%;
}

.company-info-tabs .y-tabs-list .y-tabs__tab:nth-child(3){
width: 50%;
}

</style>

 

Скрыть сотрудников без расписания

<style>
.y-master-card__item_disabled{
display: none !important;}

</style>

 

Скрыть круглое изображение логотипа в разделе "О компании"

<style>
div.master-info-header__avatar {
display: none;}
</style>
 

 

Запретить запись на определенные услуги в диапазоне дат

В примере ниже запрещена запись на услуги с идентификаторами 389045 и 90812 в период с 23 декабря по 2 января. Исключая блок services, можно запретить запись на даты по всем услугам, при этом будет выводиться текст "С 23 декабря онлайн запись не работает, записывайтесь по телефону!" из блока text.

<script>
window.yclientsNotWorkingDatesRanges = [
{
text : "С 23 декабря онлайн запись не работает, записывайтесь по телефону!",
startDate: "23.12.2016",
endDate: "02.01.2017",
services: [
389045,
90812
]
}
];
</script>

 

Скрыть цену на услуги в виджете

Есть два варианта скрыть цену на услуги.
В первом случае скрывается цена из поля, которое остается пустым под названием услуги:

<style>
.service-card .service-card-footer .price {
display: none!important;
}
</style>

Во втором случае скрывается поле с ценой:

<style>
.service-card .service-card-footer {
display: none!important;
}
</style>

 

Изменить цвет кнопки ЗАПИСАТЬСЯ

Меняйте цвет на нужный, используя HTML код цвета (в данном случае черный #000000)

<style>
button.y-button.order-submit {
background-color: #000000;
}
</style>

 

Изменить цвет чисел в календаре на шаге выбора даты виджете

<style>
button.calendar-active-day {
color: black !important;
}
</style>

 

Изменить цвет строки "Рабочий, записи есть" на шаге выбора даты в виджете

<style>
.date-wrapper .text-exist-record.calendar-active-day {
color: black !important;
}
</style>

 

Скрыть поля "Утро, День, Вечер"

<style>
.day-group-header {
display: none;
}
</style>

 

Скрыть поле поиска Услуги

<style>
.y-service-search-form {
display: none;
}

</style>

 

Скрыть ресурсы в Групповой записи

<style>
.activity-schedule__resource{
display: none;}

</style>

 

Скрыть пункт "Групповые события" при смешанной записи 

Инъекция сработает только в случае установки пошагового формата записи.

<style>
.list-wrapper .y-list-item:last-child{
display: none !important;
}
</style>

 

Ссылка в текстовом поле на шаге ввода контактных данных

<script>
window.yclientsAdditionalOptions = {
texts: {
notifyText : 'ТЕКСТ <a target="_blank" href="АДРЕС ССЫЛКИ">ВИДИМЫЙ ТЕКСТ, ЗАКЛЮЧАЮЩИЙ ССЫЛКУ</a> ТЕКСТ'
}
}
</script>

 

Изменить размер и цвет счётчика заполненности группового события

<style>
div.activity-schedule__free-space.ng-binding {
color: #32CD32;
font-size: 20px
}

</style>

 

Изменить поле "Комментарий" на шаге ввода данных клиента

Инъекция сработает только в случае, если в разделе Онлайн-запись - Настройки стоит дефолтное значение для этого поля.

<script type="text/javascript">
window.yclientsCustomTranslates = window.yclientsCustomTranslates || {};
try {
_.merge(window.yclientsCustomTranslates, {
'en-US':
{
'confirm': {
'comment': 'ТЕКСТ'
}
}
}
);
} catch (e) {
// nothing
}
</script>

Скрыть цену из виджета для групповых услуг

<style>
.price.main-color.ng-binding {
display: none!important;
}
</style>

 

Отменить привязку клиента к филиалу, в который он уже записывался (Для сетевого виджета)

<script>
window.yclientsAdditionalOptions = {
firstStepAlways : true
};
</script>

 

Скрыть длительность услуги

<style>
.time {
display: none;
}
</style>

Удалить итоговую цену

<style>
.y-record-card-full__price {
display: none;
}
</style>


Изменить шрифт

<style>

.nano-content {
font-family: roboto;
}
</style> 

Скрыть поле "e-mail" в онлайн-записи

<style>
.js-email-container.ng-scope {
display: none!important;
}
</style>

 

Скрыть поле "Комментарий" в онлайн-записи

<style>
.order-comment.valid {
display: none!important;
}
</style>

Скрыть самый большой заголовок

<style>
h1.text-color-50.y-headline.y-breadcrumbs-color.ng-binding {
display: none!important;
}
</style>

 

Скрыть название филиала

<style>
span.description.y-breadcrumbs-color.ng-binding {
display: none!important;
}
</style>

 

Скрыть название шага

<style>
span.subtitle.y-breadcrumbs-color.ng-binding.ng-scope {
display: none!important;
}
</style>


Скрыть определенные категории услуг (наименование категорий)

где (1) - значение первой категории услуг, (2) - значение второй категории услуг и т.д

<style>
div:nth-child(1) > h3 {
display: none;
}

</style>

<style>
div:nth-child(2) > h3 {
display: none;
}

</style>

Важно

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


Скрыть определенные категории услуг

<style>
//Скрытие первой разделительной полосы, что между категориями
.y-bottom-divider.service-group-divider.ng-scope:nth-child(1) {
display: none;
}
//Скрытие категорий услуг

.service-group-wrapper.ng-scope:nth-child(1) {
display: none;
}
.service-group-wrapper.ng-scope:nth-child(2) {
display: none;
}
</style>

 

Скрыть услуги, на которые нельзя записаться 

<style>
.y-content-block.y-block-shadow.mb.y-items-md-content.ng-scope.service-card_disabled {
display: none !important
}
</style>

 

Отобразить название филиала на двух строках (в шапке)

<style>
body .ios-subtitle {
font-size: 24px;
line-height: 30px;
white-space: normal;
}
body .company-info__name, body .master-info__name {
font-size: 24px;
line-height: 24px;
min-height: 24px;
height: auto;
max-height: 54px;
white-space: normal;
}
</style>

 

Публичное API

Разработчики добавили 5 функций для публичного API, с помощью которых без селекторов можно сделать инъекцию.

Для этого вам нужно добавить функцию между открывающимся/закрывающимся тегами <script>.

 

Замена названия филиала в форме 

window.yclientsApi.setFilialName("name_company")

 

Отображение только первого свободного времени за утро, день, вечер

window.yclientsApi.showOnlyFirstTime()

 

Скрытие вкладки Отзывы о сотруднике (действует, если не скрыта вкладка Информация о сотруднике)

window.yclientsApi.hideReviewStaff()

 

Скрытие вкладки Отзывы о компании (действует, если не скрыта вкладка Информация о компании)

window.yclientsApi.hideReviewCompany()

 

Скрытие из формы определенных сотрудников по id

window.yclientsApi.setIgnoreMasters ([service_id, service_id, ..., service_id])

 
Инъекция скрывает "Нет услуг, на которые можно записаться вместе с выбранной услугой" на шаге выбора услуги.

<style>
.service-list__not-found.ng-binding.ng-scope {
display: none! important;
}
</style>

Примечание:

Все цвета можно задавать вида border: 1px solid #fffaaa

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool
Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Это также позволяет легко конвертировать цвета между различными форматами, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в формате RGB (RGBA) и HSL (HSLA).

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

Комментарии