An Instagram story widget brings your live Instagram Stories onto your website. This template shows them as a small floating avatar with a Watch Stories label, and visitors open your stories and posts in a popover with one click.
What the Instagram story widget shows and where to place it
An Instagram story widget is an embedded element that pulls your current Instagram Stories into a web page through the official Instagram API. It updates on its own while stories are live, so your site reflects what you post.
An Instagram stories popup adds the familiar avatar ring as a compact overlay. It adds social content without taking over the page, which makes it a good fit where a full feed would feel too heavy.
Use it for product drops, behind-the-scenes clips, events or daily offers. It suits ecommerce product pages, homepages, campaign landing pages and creator or lifestyle sites.
To connect stories, your Instagram account needs to be a Business or Creator account. Our guide on how to embed Instagram stories covers the full requirements, and the Instagram stories widget page covers layouts and plans.
- Homepage: a social touchpoint that doesn’t push your main content down.
- Pricing page: short clips from customers or the team add proof without crowding the plans.
- Product pages: stories that show the product in use sit one click away from the buy button.
- Landing pages: campaign stories keep a launch page current for as long as it runs.
How to add an Instagram story widget to your website
- Connect your Instagram Stories source in EmbedSocial.
- Choose the Instagram Stories Popover template.
- Customize the avatar style, popover text, and widget position.
- Set when and where the widget should appear on the page.
- Copy the embed code.
- Paste it into your website, landing page, or CMS and publish.
WordPress
Open the page in the block editor and add a Custom HTML block. Paste the embed code and update the page. The popup floats over the content wherever the block sits.
Shopify
Go to Online Store > Themes > Customize and add a Custom Liquid section to the template you want. Paste the embed code and save.
Wix
Add an Embed a Site or HTML iFrame element (the name depends on your editor version). Paste the code and publish.
Squarespace
Edit the page and add an Embed block. Paste the code into its code field and save.
Popup vs other layouts
| Layout | Best for | Shows | Template |
|---|---|---|---|
| Popup | Adding stories without a new section | Floating avatar and a popover with stories and posts | Instagram Stories Widget: Popup |
| Autoplay slider | A dedicated stories section | A row of tall story cards that advance on their own | Instagram Stories Autoplay Slider |
| Stories and posts slider | Mixing stories with your feed | A horizontal slider of stories and recent posts | Classic Instagram Stories And Posts Slider Widget |
