К основному содержимому

Как добавить виджет онлайн-бронирования на сайт?

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

Ваш сайт – это цифровая витрина вашего бизнеса. Именно здесь формируется первое впечатление и начинается заполнение вашего расписания. Чтобы обеспечить клиентам удобный и понятный процесс записи, Salonized предлагает несколько вариантов интеграции виджета: всплывающую кнопку или встроенную версию. Следуйте инструкциям ниже, чтобы добавить виджет на ваш сайт. Инструкции разработаны для самых популярных платформ для создания сайтов.


Как добавить кнопку виджета записи (pop-up) на сайт?

Добавить кнопку виджета на сайт можно всего в несколько кликов. Для этого выполните следующие шаги:

Шаг 1: Настройте параметры виджета записи

  • Войдите в аккаунт Salonized.

  • Нажмите на значок шестерёнки (Настройки) в левом нижнем углу.

  • Перейдите в раздел "Онлайн-бронирования".

  • Откройте вкладку "Стиль и публикация" и при необходимости настройте параметры:

    • Цвет: используйте стандартный или выберите свой цвет виджета.

    • Отображение расписания: выберите формат показа – по неделям или по месяцам.

    • Вы также можете включить опцию, позволяющую клиентам просматривать свои записи, или добавить пользовательское уведомление в виджет.

Шаг 2: Скопируйте код

  • Прокрутите страницу вниз.

  • В разделе "Публикация" выберите "Код для добавления кнопки на сайт".

  • Выберите расположение кнопки (слева или справа).

  • Нажмите "Копировать", чтобы скопировать весь код.

Шаг 3: Добавьте код в футер вашего сайта

  • Войдите в систему управления вашим сайтом.

  • Добавьте скопированный код в футер сайта.

  • Опубликуйте изменения – виджет будет добавлен на сайт.

Важно: если вы измените цвет или положение виджета в Salonized, будет сгенерирован новый код. Чтобы изменения отобразились на сайте, замените старый скрипт на обновлённый.


Как добавить всплывающую кнопку виджета записи на сайт WordPress?

  1. Скопируйте код виджета бронирования из Salonized, как описано выше.

  2. Войдите в админ-панель вашего сайта на WordPress.

  3. В левом меню выберите Plugins. Если этот пункт не отображается, возможно, у вас нет прав администратора – обратитесь к менеджеру сайта.

  4. Нажмите “Add New Plugin”.

  5. В строке поиска введите “WPCode”.

  6. Нажмите “Install Now” > “Activate”.

  7. После этого в левом меню появится новый раздел “Code Snippets”. Наведите на него курсор и выберите “Header & Footer”.

  8. Прокрутите вниз до раздела “Footer” и вставьте код Salonized в текстовое поле.

  9. Нажмите “Save Changes” вверху. Все готово!


Как добавить всплывающую кнопку виджета бронирования на сайт WIX?

  1. Скопируйте код виджета бронирования из Salonized, как описано выше.

  2. Войдите в админ-панель вашего сайта на WIX.

  3. В левом меню перейдите в раздел “Settings”.

  4. Прокрутите страницу до раздела “Advanced”.

  5. Выберите “Custom Code”.

  6. Найдите блок “Body - End” и нажмите “Add Code”.

  7. Вставьте код из Salonized в верхнее поле (“Paste the code snippet here”).

  8. Задайте название (например, “Виджет бронирования Salonized”).

  9. Убедитесь, что выбраны настройки по умолчанию (Add code to: All pages, Load code once, Place code in: Body - end).

  10. Нажмите Apply, чтобы опубликовать изменения.


Как добавить всплывающую кнопку виджета бронирования на сайт Jimdo Creator?

  1. Скопируйте код виджета бронирования в Salonized, как описано выше.

  2. Войдите в админ-панель вашего сайта на Jimdo.

  3. Выберите нужный сайт.

  4. Нажмите Edit.

  5. Прокрутите страницу вниз до серой области и наведите на неё курсор.

  6. Нажмите “Add content” > “More elements and add-ons”.

  7. Выберите элемент “HTML”.

  8. Вставьте код Salonized в HTML-блок.

  9. Нажмите “Save”.


Как добавить всплывающую кнопку виджета записи на сайт Weebly?

  1. Скопируйте код виджета бронирования в Salonized, как описано выше.

  2. Войдите в админ-панель вашего сайта на Weebly.

  3. Нажмите “Edit website”.

  4. В верхнем меню перейдите в “Settings”.

  5. В левом меню выберите “SEO”.

  6. Найдите поле “Footer code” и вставьте туда код из Salonized.

  7. Нажмите “Save” > “Publish”.


Как привязать пользовательскую кнопку к виджету записи в WordPress?

Вы можете открывать виджет бронирования из любого пункта меню или кнопки на сайте, используя специальную “якорную ссылку”. Для этого есть несколько способов настройки:

  • Вариант A – добавить в основное меню:

    • Войдите в админ-панель WordPress.

    • Перейдите в Appearance > Menus.

    • В левом столбце выберите Custom Links.

    • В поле URL (https://static-widget.salonized.com/loader.js) введите: #sz-booking-toggle

    • В поле Link Text укажите название кнопки (например, “Записаться”).

    • Нажмите “Add to Menu”, затем “Save Menu”.

  • Вариант B – добавить к кнопке на странице:

    • Откройте редактор страницы с нужной кнопкой.

    • Выделите кнопку или текст, к которому хотите добавить ссылку.

    • Нажмите на значок ссылки.

    • В поле URL (https://static-widget.salonized.com/loader.js) введите: #sz-booking-toggle

    • Нажмите “Update” или “Save”, чтобы сохранить изменения.


Как привязать пользовательскую кнопку к виджету записи в WIX?


Как добавить встроенный виджет бронирования на сайт?

Открытая версия позволяет встроить полноценный процесс записи прямо в страницу сайта. В отличие от всплывающей кнопки, такой виджет постоянно отображается на странице (например, на главной или на отдельной странице записи), и клиенты могут сразу начать бронирование без дополнительных кликов.

Чтобы добавить его, выполните следующие шаги:

Шаг 1: Настройте параметры

  • Войдите в Salonized.

  • Перейдите в "Настройки" > "Онлайн-бронирования" > "Стиль и публикация":

    • Выберите цвет.

  • В разделе публикации выберите "Код для добавления встроенного виджета записи на сайт".

  • Укажите размер: можно выбрать "Автоматически подстраивать" или задать “Пользовательскую ширину”.

  • При необходимости настройте высоту.

Шаг 2: Скопируйте код

  • Нажмите "Копировать" внизу страницы.

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

Шаг 3: Добавьте код на сайт

  • Чтобы добавить встроенный виджет бронирования на сайт Weebly:

    • Войдите в Weebly и нажмите "Edit website".

    • Перейдите в раздел "Pages" и выберите нужную страницу.

    • Нажмите на элемент </> (Embed Code) и перетащите его в нужное место на странице.

    • Нажмите "Edit Custom HTML" и вставьте ваш код.

    • Нажмите "Publish", чтобы сохранить изменения.

  • Чтобы добавить встроенный виджет бронирования на сайт Mijndomein:

    • Войдите в Mijndomein.

    • Перейдите в раздел "Products".

    • Нажмите "Manage" рядом с Websitemaker.

    • Нажмите "Login Websitemaker".

    • Откройте страницу, на которую хотите добавить виджет.

    • В меню "Widgets" выберите элемент "HTML" и перетащите его на страницу.

    • Нажмите "Add your custom HTML here", удалите пример текста, вставьте свой код и нажмите "Update".

    • Нажмите “Republish” в правом верхнем углу.


Как добавить встроенный виджет бронирования на другие сайты?

Поскольку каждая платформа имеет свои особенности, шаги могут немного отличаться. В целом процесс выглядит так:

  1. Откройте нужную страницу в редакторе сайта.

  2. Добавьте элемент для вставки кода (обычно называется Custom HTML или Embed).

  3. Вставьте полный код (и блок <div>, и <script>).

  4. Сохраните и опубликуйте изменения – после этого виджет станет активным.


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

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

  • Custom HTML

  • Embed code

  • Code block

  • HTML widget

  • Custom element

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

Если у вас есть вопросы или нужна дополнительная помощь, свяжитесь с нами через чат.

Для получения дополнительной информации о виджете онлайн-бронирования ознакомьтесь с этой статьёй.

Нашли ответ на свой вопрос?