Как сделать сервис онлайн-записи для сайта
Сначала предлагаем Вам ознакомиться со статьей о регистрации на сайте и добавлении проекта — «С чего начать».
О преимуществах и возможностях онлайн-записи в нашем сервисе Вы можете узнать в разделе «Сервис онлайн-записи».
Для создания онлайн-записи выберите виджет на странице проекта, вкладке «Добавить виджет». Откроется страница с уже созданными шагами: «Услуги», «Мастера», «Время» и «Контакты» и областью просмотра первого шага.
Страница поделена на 2 части: левый блок – все настройки виджета, область просмотра – отображаются все изменения левого блока.
Кнопки справа:
- «Сохранить» — сохранение изменений.
- «Запустить» — после запуска виджет появится на Вашем сайте, а вместо этой кнопки появится кнопка «Остановить».
- «Закрыть» — возврат на страницу проекта без сохранения текущих изменений.
В мобильной версии блок слева скрыт, а правая панель с кнопками отображается в виде иконок. Чтобы открыть левый блок нажмите на кнопку «Панель инструментов».
Чтобы закрыть панель инструментов, нажмите на кнопку «Закрыть».
Ресурсы
Первый блок слева – это ресурсы, от которых также может зависеть свободное время записи. Например, оборудование, которое используется при оказании услуги или кабинеты.
Далее занятость этих ресурсов можно будет указывать в панели управления временем наряду со специалистами.
А виджет при выборе услуги, с привязанным к ней ресурсом будет показывать только те свободные слоты, которые свободны и у специалиста и у ресурса.
Это очень удобно, так как Вам не нужно вручную сопоставлять свободное время каждого специалиста и кабинета. Все за Вас сделает программа и сразу покажет клиенту подходящие свободные слоты.
Общие настройки
1. Панель управления временем. Нажмите на нее и в новом окне откроется ссылка на панель редактирования свободных и занятых слотов времени. Ссылка имеет уникальный адрес, поэтому подобрать его очень сложно.
2. Но если, вам нужно сгенерировать новую ссылку, например, ушел администратор и нужно изменить доступ, то нажмите на кнопку ниже «Изменить ссылку доступа» и автоматически создастся новая ссылка к панели управления, а старая перестанет открываться. При этом все Ваши данные в панели управления сохранятся.
3. Для дополнительной защиты укажите ip-адреса, которым разрешен доступ к этой ссылке, в идущем ниже поле.
Чтобы узнать какой у вас ip-адрес, введите в поиск Яндекса запрос: «Мой ip-адрес». В результатах поиска Вы увидите крупные цифры вроде: 777.77.777.777.
Вставьте их в это поле. Если доступ нужен с нескольких адресов, то вставьте их через запятую. Например: 777.77.77.777,777.77.77.778
4. Показать онлайн-запись на мобильных или на компьютерах. Если вы хотите показывать онлайн-запись только на мобильных (например, если заявка будет отправляться только в телеграм), то оставьте только галочку «На мобильных» и наоборот.
5. Тип размещения. На ваш выбор 2 типа размещения:
Всплывающий при клике на кнопку. В таком случае на всех страницах сайта будет размещена кнопка, дизайн и расположение которой вы ниже настроите. А при клике по кнопке будет всплывать форма онлайн-записи.
Встроить в страницу. Онлайн-запись будет размещена только на тех страницах и в том месте, где вы разместите код-отметку для виджета.
Код-отметка имеет вид: <div id=”in_1111”>Онлайн-запись</div>, где 1111 – это номер Вашего виджета и нужна только для того, чтобы программа понимала, что вставить нужно именно в это место на этой странице.
6. Эффект появления. Красивый эффект анимации при появлении виджета. Есть разные способы, попробуйте – в области просмотра сразу отобразится выбранный вариант.
7. Яндекс Цель. Если Вы хотите отслеживать достижения цели в Яндекс-Метрике, то создайте в ней новую цель, выберите тип «Javascript событие» и введите произвольное название латинскими буквами. Потом это название вставьте в указанное поле в панели управления виджетом:
8. Передавать UTM-метки. При отмеченной опции, вместе с заявкой Вам будет приходить информация откуда пришел посетитель, является ли источник рекламным или органическим.
Заголовки и стили
В этом блоке настраиваются общие стили виджета.
1. Ширина виджета – фиксированная ширина виджета. Но не больше ширины родительского блока или окна сайта, в зависимости от типа виджета.
2. Высота виджета. Аналогично ширине.
3. Закруглить края. Мягкое оформление контура виджета. Можно оставить с острыми краями или сделать более закругленным.
4. Цвет фона виджета. Как и в любом другом поле с палитрой можно выбрать люой цвет из палитры. Для копирования цвета, нажмите на пипетку, подведите к нужному цвету и кликните на него.
5. Цвет фона вне виджета. Если выбран тип виджета «Всплывающий при клике на кнопку», то можно выбрать цвет затемнения или осветления фона за пределами виджета.
6. Прозрачность фона за пределами виджета. От абсолютно прозрачного до полностью непрозрачного.
7. Матовость. Интересный эффект матового стекла фона за пределами виджета. Чем прозрачнее фон, тем лучше виден этот эффект.
8. Выберите шрифт. Шрифт назначается для всех текстовых элементов сайта. Выбирайте наиболее подходящий под стили Вашего сайта.
Далее идет блок кнопок, отвечающих за отображение заголовка виджета.
9. Текст заголовка. Здесь нужно написать текст, который будет в оглавлении онлайн-записи. Если оставить поле пустым, то заголовок не будет выводится.
10-11. Размер и цвет заголовка.
12. Выделить шрифт – сделать шрифт заголовка жирным.
13. Наклонный шрифт – выделить заголовок курсивом.
14. Выровнять заголовок по левому краю, по центру или по правому краю.
Следующий блок — настройка кнопок «Назад», «Далее» и «Заказать».
15. Текст на кнопке «Назад». Если нужно изменить стандартное название на кнопке.
16-17. Цвет шрифта и фона на кнопке «Назад».
18. Текст на кнопке «Далее». Если нужно изменить стандартное название.
19. Текст на кнопке «Заказать». Например, «Записаться».
20. Цвет шрифта и фона в кнопках «Далее» и «Заказать».
Остальные опции настраивают отображение во всех остальных текстовых элементах.
22-23. Размер и цвет текста в стандартных пунктах онлайн-записи.
Параметры кнопки
Кнопка отображается в при выборе типа размещения «Всплывающий при клике на кнопку». И отображается на всех страницах сайта. При клике на нее на сайте поверх страницы всплывает виджет онлайн-записи.
Здесь Вы можете настроить ширину и высоту кнопки. Задать цвет ее фона, выбрать иконку и цвет иконки. Сделать ее круглой или квадратной закругляя края кнопки, а также определить ее место на странице. Пробуйте – все изменения тут же отображаются в области просмотра справа.
Последний пункт Яндекс Цель для кнопки. Если вы хотите отслеживать не только отправленные заявки, но и сколько раз кликнули по кнопке, чтобы запустить виджет, создайте цель в Яндекс Метрике с типом «Javascript событие», укажите ее название и вставьте название в это поле.
Шаг «Услуги»
Нажмите на знак «+» для раскрытия блока услуг.
В раскрытом блоке можно поменять цвет заголовка и фона, указать название шага и добавить примечание. Отредактировать название можно и в области просмотра. Для этого наведите курсор на текст, чтобы появился карандаш справа от текста. По клику на него текст переходит в режим редактирования.
Для добавления услуги или направления нажмите на кнопку «Добавить услугу». Если Вы сделали изменения и не сохранили их, то выберите пункт «Да. Сохранить и добавить элемент».
После добавления блок появится в левой панели и отобразится в области просмотра.
Измените название вместо «Вид услуги» на нужное.
Выберите способ отображения значений.
Если это направление, например «Парикмахерские услуги» и в нем можно выбрать несколько значений, то подойдет тип «Галочка (чекбокс)».
Если выбрать можно только одно значение, то подойдут «Радиокнопки» или «Список значений».
Если это будет отдельная услуга и нужно указать только цифру, например часы, то подойдет тип «Количество».
Для отдельной услуги, в которой клиент должен указать свои данные подойдут типы «Имя/Телефон/Email» или многострочный текст.
При выборе типов «Радиокнопки», «Список значений» или «Галочка (чекбокс)», под типом поля появится отдельный пункт «Список значений», в котором Вы указываете отдельные названия услуг данного направления. Например, для «Парикмахерских услуг», указываете «Стрижка», «Окрашивание», «Тонирование». Каждое значение указывается с новой строки.
В области просмотра выберите эту услугу, чтобы увидеть как отображаются значения.
Рекомендуем группировать услуги по специалистам, их оказывающим, и ресурсам. Далее, если определение свободного слота зависит не только от свободного времени мастера, но и от ресурса, то нужно отметить галочкой «Требует ресурс» и в поле ниже выбрать нужный ресурс.
Список ресурсов Вы создаете в первом блоке «Ресурсы».
Шаг «Мастера»
Прежде всего, Вы можете также указать заголовок и задать цвет шрифту и фону.
Примечание отображается под заголовком.
Чтобы добавить специалиста нажмите на кнопку «Добавить мастера».
Если вы сделали изменения и не сохраняли их, то выберите в окне подтверждения «Да. Сохранить и добавить элемент».
В добавленном блоке мастера укажите имя специалиста, можно написать пару слов в описании и обязательно отметьте услуги, которые он оказывает. Список услуг формируется на основе списка названий блоков услуг, которые Вы добавили на предыдущем шаге.
Все изменения в блоке мастера тут же появятся в области просмотра.
Шаг «Время»
На этом шаге на сайте будут посетитель будет выбирать свободные и занятые слоты, чтобы записаться.
Аналогично предыдущим шагам Вы можете указать название шага, выбрать цвет текста и фона для названия, а также примечания.
Для установки расписания нажмите на пункт «Добавить настройки времени»
Если Вы сделали какие-либо изменения, то в окне подтверждения выберите «Да. Сохранить и добавить элемент».
Теперь можно переходить к установке расписания и параметров онлайн-записи.
В области просмотра – нажимайте «Далее» пока не дойдете до шага «Время». Вы увидите слоты, установленные настройками по умолчанию.
Если нажать на знак «+» рядом с любой датой, то откроются слоты, которые в панели всегда отображаются свободными. Заполнение занятых слотов осуществляется в панели управления временем. Отображение – на сайте.
В левом блоке выберите:
1. Шаг записи – это стандартное время, между записями клиентов. Варианты: 15 минут, 30 минут и 1 час.
2. Диапазон записи – на какой период показывать даты. Варианты: 1 неделя, 2 недели и 1 месяц.
3. Расписание. Кликните на час или минуту, которые Вы хотите изменить. Также можно нажать на значок «часы» справа от времени – откроется список, в котором можно выбрать нужное время.
В самой правой колонке расписания можно отметить галочкой выходные дни.
Шаг «Контакты»
На этом этапе добавляете поля, которые клиент будет заполнять, чтобы записаться.
Также как и на предыдущих шагах можно написать название шага, примечание (например, условия записи или предупреждение). Выбрать цвет текста и фона для названия шага.
Далее добавьте нужные поля:
1. Поле формы. Нажмите на кнопку и подтвердите добавление во всплывающем сообщении-подтверждении.
После добавления блока – оно тут же появится в области просмотра. Название поля по умолчанию «Имя», тип поля «Имя/Email/Телефон». Вы можете изменить название и тип в соответствующих полях
Сменить тип поля можно в левом блоке «Тип поля».
1.1 Имя/Email/Телефон – стандартное поле ввода короткой контактной информации.
1.2 Многострочный текст, подходит если Вы хотите дать возможность клиенту указать дополнительные пожелания или оставить комментарий/примечание к записи.
В данном типе поля, Вы можете указать примечание, которое показывается внутри него клиенту и исчезает, когда он начинает печатать.
1.3 Галочка (чекбокс) – подходит, если Вы хотите дать пользователю возможность выбрать несколько значений. При выборе этого типа ниже появится поле «Список значений», в котором нужно ввести значения – каждое с новой строки.
1.4-1.5. Радиокнопки и список значений отображаются по разному, но имеют одинаковый принцип: когда клиент может выбрать только один вариант из предлагаемых Вами.
Список вариантов также указываются в поле слева «Список значений». Каждый вариант указывается с новой строки.
Отметьте галочкой пункт «Обязательное» — если данной поле должно быть обязательно заполнено или выбрано.
Вы можете добавить любое количество полей формы.
Обратите внимание: при наведении на любой блок в области просмотра – появляется четырехсторонняя стрелочка над ним. Если ее зажать, то можно переместить блок ниже или выше, чтобы изменить порядок отображения. Точно также можно переместить мастеров или услуги.
Также эти блоки можно перемещать в левом блоке, зажав стрелки-направления слева от названия блока.
Если Вы хотите переименовать название блока – кликните на название два раза.
«Согласие на обработку персональных данных»
Обязательное поле для отправки формы. Рекомендуем его добавить. Оно уже содержит стандартный текст, Вам нужно будет только добавить ссылки на согласие на вашем сайте и на политику конфиденциальности.
Нажмите на кнопку «Добавить согласие на обработку данных» и подтвердите добавление.
В левом блоке 2 раза кликните по тексту согласия, чтобы изменить его.
Также Вы можете отредактировать текст в области просмотра. Для этого наведите курсор на него – справа появится зеленый карандаш. Нажмите на него и перейдете в режим редактирования текста.
Чтобы вставить ссылку, перейдите в режим редактирования и выделите мышкой текст, который будет ссылкой.
После того, как Вы отпустите мышку, ниже появится окошко, в которое нужно вставить ссылку.
Укажите ссылку и нажмите кнопку «Вставить». Выделенный текст сразу изменится по цвету – ссылка вставилась.
Далее в блоке Вы можете изменить размер и цвет шрифта текста согласия и цвет ссылок.
«Настройки отправки заявки»
Последний блок настроек онлайн-записи. Нажмите «Добавить настройки отправки заявки» и подтвердите в сообщении-подтверждении.
Напишите текст, который будет на кнопке. Выберите фон и цвет кнопки.
Далее выберите куда отправлять заявки.
3.1. На почту.
В поле ниже обязательно укажите электронный адрес, на который будут приходить заявки.
3.2. В телеграм.
Укажите адрес или никнейм Вашего аккаунта в формате https://t.me/username или @username
3.3 Дать выбор посетителю.
В данном случае при нажатии на кнопку «Отправить заявку» будут появляться 2 кнопки «На почту» или «В телеграм».
Вам нужно будет указать и адрес в телеграм и электронный адрес, на который будут приходить заявки.
Поздравляем! Вы создали онлайн-запись для Вашего сайта!
Теперь нажмите кнопки справа «Сохранить», а затем «Запустить».
Можно переходить к заполнению слотов в панели управления временем.
Панель управления временем
В общих настройках нажмите на ссылку «Панель управления временем».
Откроется страница управления временем. Скопируйте ссылку в адресной строке, чтобы отправить ее администраторам.
На вкладке «Мастера» находятся все специалисты, на вкладке «Ресурсы» — все ресурсы.
Чтобы раскрыть сразу все даты в данной вкладке нажмите «Развернуть все». Обратно свернуть, соответственно «Свернуть все».
Зеленые окошки – это свободные слоты, серые – занятые.
Просто кликайте на нужные Вам окошки, чтобы отметить занятые слоты. Если в этот день специалист не работает – нажмите кнопку «Весь день занят». Все окошки станут серыми, а вместо кнопки «Весь день занят» появится кнопка «Весь день свободен».
После чего нажмите на кнопку внизу «Сохранить изменения». Вверху появится надпись «Изменения соханены» и все занятые слоты отобразятся на Вашем сайте в виджете онлайн-записи.
Если Вы сделали изменения, но забыли сохранить, то изменения сохраняться автоматически через 2 минуты после последнего клика.
Поздравляем! Теперь у вас есть собственная безопасная онлайн-запись!
