Embed Break Timer Widget

Code Generator

Configure the settings and copy the ready-to-use code.

Duration (min)

Theme

Width

Height

Compact mode Transparent background Show branding Autostart

Preview

Live Preview

Basic Usage

Method 1: JavaScript (recommended)

The best way is to use the JavaScript script. The widget integrates directly into your page:

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

Method 2: iframe

Alternative method - use an iframe:

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

JavaScript Parameters

Configure the timer using data attributes:

Attribute	Description	Values	Default
`data-container`	CSS selector for container	Any selector	#descansar-timer
`data-duration`	Break duration in minutes	1-480	15
`data-theme`	Color theme	light, dark	light
`data-compact`	Compact mode	true, false	false
`data-branding`	Show branding	true, false	true
`data-autostart`	Auto start timer	true, false	false

Example with parameters:

<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 Parameters (for iframe)

Configure the timer using URL parameters:

Parameter	Description	Values	Default
`duration`	Break duration in minutes	1-480	15
`theme`	Color theme	light, dark	light
`compact`	Compact mode without extra elements	true, false	false
`transparent`	Transparent background	true, false	false
`branding`	Show Descansar branding	true, false	true
`autostart`	Auto start the timer	true, false	false

Example with parameters:

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

JavaScript API

For JavaScript Widget

Control the timer directly through the global object:

// Global widget object
const timer = window.descansar;

// Start the timer
timer.start();

// Pause
timer.pause();

// Resume
timer.resume();

// Reset
timer.reset();

// Change duration (in minutes)
timer.setDuration(30);

Listen to timer events:

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

  switch (eventName) {
    case 'ready':
      console.log('Timer ready, duration:', duration);
      break;
    case 'start':
      console.log('Timer started');
      break;
    case 'pause':
      console.log('Timer paused');
      break;
    case 'resume':
      console.log('Timer resumed');
      break;
    case 'complete':
      console.log('Break complete!');
      // Show notification, play sound, etc.
      break;
    case 'reset':
      console.log('Timer reset');
      break;
  }
});

For iframe

Control the timer via postMessage:

// Get iframe reference
const iframe = document.querySelector('iframe');

// Start the timer
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'start' }, '*');

// Pause
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'pause' }, '*');

// Resume
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'resume' }, '*');

// Reset
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'reset' }, '*');

// Change duration (in minutes)
iframe.contentWindow.postMessage({ target: 'descansar-embed', action: 'setDuration', duration: 30 }, '*');

Listen to iframe events:

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

  switch (event.data.event) {
    case 'ready':
      console.log('Timer ready, duration:', event.data.duration);
      break;
    case 'start':
      console.log('Timer started');
      break;
    case 'complete':
      console.log('Break complete!');
      break;
    // ... other events
  }
});

Embed Timer Widget