Вбудувати віджет таймера перерв

Генератор коду

Налаштуйте параметри та скопіюйте готовий код для вставки.

Тривалість (хв)

Тема

Ширина

Висота

Компактний режим Прозорий фон Показувати брендинг Автостарт

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

Базове використання

Спосіб 1: JavaScript (рекомендовано)

Найкращий спосіб - використати JavaScript скрипт. Віджет інтегрується безпосередньо на вашу сторінку:

<div id="descansar-timer"></div>
<script src="https://descansar.pages.dev/js/embed.js"></script>

Спосіб 2: iframe

Альтернативний спосіб - використати iframe:

<iframe
  src="https://descansar.pages.dev/embed.html"
  width="100%"
  height="450"
  frameborder="0"
  allow="autoplay"
></iframe>

Параметри JavaScript

Налаштуйте таймер за допомогою data-атрибутів:

Атрибут	Опис	Значення	За замовчуванням
`data-container`	CSS селектор контейнера	Будь-який селектор	#descansar-timer
`data-duration`	Тривалість перерви в хвилинах	1-480	15
`data-theme`	Кольорова тема	light, dark	light
`data-compact`	Компактний режим	true, false	false
`data-branding`	Показувати брендинг	true, false	true
`data-autostart`	Автоматичний старт	true, false	false

Приклад з параметрами:

<div id="descansar-timer"></div>
<script
  src="https://descansar.pages.dev/js/embed.js"
  data-duration="25"
  data-theme="dark"
  data-compact="true"
></script>

Параметри URL (для iframe)

Налаштуйте таймер за допомогою параметрів URL:

Параметр	Опис	Значення	За замовчуванням
`duration`	Тривалість перерви в хвилинах	1-480	15
`theme`	Кольорова тема	light, dark	light
`compact`	Компактний режим без зайвих елементів	true, false	false
`transparent`	Прозорий фон	true, false	false
`branding`	Показувати лого Descansar	true, false	true
`autostart`	Автоматичний старт таймера	true, false	false

Приклад з параметрами:

<iframe
  src="https://descansar.pages.dev/embed.html?duration=25&theme=dark&compact=true"
  width="300"
  height="350"
  frameborder="0"
></iframe>

JavaScript API

Для JavaScript віджета

Керуйте таймером напряму через глобальний об'єкт:

// Глобальний об'єкт віджета
const timer = window.descansar;

// Запустити таймер
timer.start();

// Поставити на паузу
timer.pause();

// Продовжити
timer.resume();

// Скинути
timer.reset();

// Змінити тривалість (в хвилинах)
timer.setDuration(30);

Слухайте події від таймера:

window.addEventListener('descansar', (event) => {
  const { event: eventName, duration } = event.detail;

  switch (eventName) {
    case 'ready':
      console.log('Таймер готовий, тривалість:', duration);
      break;
    case 'start':
      console.log('Таймер запущено');
      break;
    case 'pause':
      console.log('Таймер на паузі');
      break;
    case 'resume':
      console.log('Таймер продовжено');
      break;
    case 'complete':
      console.log('Перерва завершена!');
      // Показати сповіщення, відтворити звук і т.д.
      break;
    case 'reset':
      console.log('Таймер скинуто');
      break;
  }
});

Для iframe

Керуйте таймером через postMessage:

// Отримати iframe
const iframe = document.querySelector('iframe');

// Запустити таймер
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'start' }, '*');

// Поставити на паузу
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'pause' }, '*');

// Продовжити
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'resume' }, '*');

// Скинути
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'reset' }, '*');

// Змінити тривалість (в хвилинах)
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'setDuration', duration: 30 }, '*');

Слухайте події від iframe:

window.addEventListener('message', (event) => {
  if (event.data?.source !== 'descansar-embed') return;

  switch (event.data.event) {
    case 'ready':
      console.log('Таймер готовий, тривалість:', event.data.duration);
      break;
    case 'start':
      console.log('Таймер запущено');
      break;
    case 'complete':
      console.log('Перерва завершена!');
      break;
    // ... інші події
  }
});

Вбудувати таймер