Embed your guide directly on any website, blog, or help center. The embedded guide appears inline with your content and automatically resizes to fit.
The embed tab
Click Share on any published guide and select the Embed tab:
Embed on Your Website
Add this Stepsy directly into your page content.
<script src="https://stepsies.com/e/xYz123AbCd" async></script>
Paste anywhere on your page. The embed will automatically resize to fit.
The embed code
Each published guide has a unique embed code. Copy and paste it into your HTML:
<script src="https://stepsies.com/e/YOUR_TOKEN" async></script>
The async attribute ensures the script loads without blocking your page.
How it works
When you add the embed code to your page, here’s what happens:
…
</script>
Responsive design
Embedded guides automatically adapt to their container:
The embed automatically: - Adapts to fit the container width - Resizes height based on content - Works on all screen sizes - Maintains readability at any size
Where to embed
Common places to use embeds:
Product documentation and support articles with interactive tutorials.
Add interactive guides within your articles instead of static images.
Product tours and demos that engage visitors.
Internal documentation in Notion, Confluence, or custom wikis.
Best practices
Place the embed in a container at least 320px wide for best readability. Full-width containers work best.
The embed automatically resizes its height based on content. Avoid setting fixed heights that might cut off content.
Preview your page on mobile, tablet, and desktop to ensure the embed displays correctly at all sizes.
What’s included
The embed displays your guide exactly as it appears on Stepsies:
Keep your guide published
Embeds only work for published guides. If you unpublish the guide, the embed will stop displaying content.