Віджети та кнопки

Додайте кнопку онлайн-запису на ваш сайт за лічені хвилини. Налаштуйте зовнішній вигляд, оберіть стиль та скопіюйте готовий код.

---

Конструктор кнопки

Використовуйте інтерактивний конструктор нижче для створення кнопки, що відповідає дизайну вашого сайту.

Налаштування

Slug вашого бізнесуЗнайдіть його в Панель керування → Налаштування

Текст кнопки

Стиль

Розмір

Колір кнопки

Колір тексту

Іконка календаря

На всю ширинуТінь

Анімація при наведенні

Попередній перегляд

Світла тема

Темна тема

Усі розміри

<!-- Zapys24 Кнопка онлайн-запису -->
<style>
.zapys24-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 12px 24px;
  font-size: 15px;
  height: 44px;
  width: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 8px;
}
.zapys24-book-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.22);
  opacity: 0.95;
}
</style>
<button class="zapys24-book-btn" onclick="(function(){
  var w=480,h=700;
  var l=Math.round((screen.width-w)/2);
  var t=Math.round((screen.height-h)/2);
  window.open('https://beauty.zapys24.com/book/YOUR_BUSINESS_SLUG','zapys24-booking',
    'width='+w+',height='+h+',top='+t+',left='+l+',toolbar=no,menubar=no,scrollbars=yes,resizable=yes');
})()">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Записатися онлайн
</button>

Готові шаблони

Натисніть на шаблон, щоб застосувати його налаштування