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.
Lemon and red lentil soup
Serves 4 · 40 minutes · Sample recipe textIngredients
- 200 g red lentils
- 1 onion, diced
- 1 litre stock
- 1 lemon
Method
- Soften the onion in a little oil for 8 minutes.
- Add the lentils and stock. Simmer for 25 minutes.
- 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.
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 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.
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>