Skip to content
Add to ChromeAdd to Edge Add to Home Screen

AwakeTab Embed

Keep your readers' screens awake

Recipe blogs, dashboards and documentation sites: give readers a button that keeps their screen from dimming while they follow along. One script tag, the same honest status as AwakeTab itself, in eight languages.

yourrecipesite.example/lemon-lentil-soup
Placeholder site
[Your recipe site]
Soups

Lemon and red lentil soup

Serves 4 · 40 minutes · Sample recipe text
Pasted snippet renders here 320 × 104

Ingredients

  • 200 g red lentils
  • 1 onion, diced
  • 1 litre stock
  • 1 lemon

Method

  1. Soften the onion in a little oil for 8 minutes.
  2. Add the lentils and stock. Simmer for 25 minutes.
  3. Blend, then finish with lemon juice and salt.

Free, or licensed for your brand

The free widget is ready now and carries a small "Keep awake by AwakeTab" credit. An Embed licence ($29 / year per site) will remove the credit and apply your brand colour. The wake lock and every mode are identical either way.

Licences open soon No payment is taken until a purchase can set up your domain.

Install: one line

Paste this where the button should appear, for example inside your recipe card, above the method or in a sidebar.

<script async src="https://awaketab.com/embed.js" data-mode="cook" data-theme="auto" data-size="compact"></script>
The loader adds the visible credit link below the widget.

The script replaces itself with a lazy-loaded iframe and reserves its box before it loads (no layout shift). It talks only to awaketab.com, and it sends anonymous start and end counts, including your site's domain. The credit sits in your page's own HTML as a plain nofollow link.

Your snippet

Mode
Theme
Size

Cook: a big elapsed timer readers can tap to pause. Full width adds up to three kitchen timers.

Why the allow attribute matters

Browsers only let an iframe from another site keep the screen awake when the page delegates the permission: allow="screen-wake-lock". The loader always sets it. If your platform strips script tags and you paste the iframe yourself, keep that attribute: without it the widget cannot hold the screen on and shows "Ask the site owner" instead of pretending. The page also needs HTTPS, because a wake lock is only available in a secure context.

<iframe src="https://awaketab.com/embed/cook?mode=cook&theme=auto&lang=en&size=compact&preset=pinf"
  title="Keep screen awake"
  allow="screen-wake-lock"
  loading="lazy"
  referrerpolicy="strict-origin"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  style="width:320px;max-width:100%;height:104px;border:0;border-radius:16px;display:block"></iframe>
<div class="awaketab-credit" style="display:block;margin:16px 0 0;height:24px;font-size:13px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><a href="https://awaketab.com/?ref=embed&source=embed" rel="nofollow" style="color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px">Keep awake by AwakeTab</a></div>

JavaScript API

The loader exposes window.AwakeTabEmbed: .start(opts), .stop(), .setTheme(theme) and .on('state', callback). Messages are checked by origin in both directions: the widget only listens to the page that embeds it, and the page only to awaketab.com.

<button id="cook">Keep my screen on</button>
<script>
  document.getElementById('cook').addEventListener('click', () => {
    AwakeTabEmbed.start({ preset: 'p60' }); // from a click: the video fallback needs a gesture
  });
  AwakeTabEmbed.on('state', ({ lock, status }) => console.log(lock, status));
</script>