How to Embed an Instagram Feed on Webflow and Stop Double-Posting Instagram Content

Are you still manually uploading Instagram content to Webflow? You post to Instagram. Then, you open Webflow and do it all over again.

Every Instagram post has now become a Webflow task.

There’s a better way!

Embedding an Instagram feed through widgets can automate the entire process for you. Post once on Instagram, and it appears automatically on your Webflow site. No manual sync, duplicate captions, or stale content. Set it up in 15 minutes, then forget it exists.

This guide walks you through the exact setup to add a live Instagram feed to your Webflow site. You’ll learn which widget to choose, how to customize it, where to paste the embed code, and how to fix the most common issues that break Instagram feed embeds on Webflow.

4 methods to embed Instagram feeds in Webflow

You have four options for displaying Instagram content in Webflow:

• Manual upload (full control, maximum work)
• Instagram native embed (no extra account, basic styling)
• Zapier automation (workflow automation via API connection; works best for teams already in the Zapier ecosystem)
• Widget services (set-it-and-forget-it automation with minimal maintenance)

For context on how Instagram fits into Webflow's broader integration ecosystem, check the Webflow Instagram integration page. It covers native options, cloneable templates, and when widget services make sense.

The best method is using widget services, which auto-sync Instagram content to Webflow without manual intervention, updating feeds every 24-48 hours based on caching schedules. This eliminates the double-posting workflow that manual uploads require, keeping site content current without ongoing maintenance.

What do you need to embed Instagram feeds on Webflow? Key prerequisites for widget setup

You need a Webflow plan with Custom Code access (paid Site plans or specific Workspace plans), a public Instagram account, 15-20 minutes for setup, and optionally a widget service account (free or paid).

These requirements ensure the Embed element works and the widget can pull your Instagram content via API without authentication barriers.

Before you start, verify you have all these.

Webflow Custom Code access (required)

The Embed element only works on:

• Paid site plans: CMS, Business, or Ecommerce
• Workspace plans: Core, Growth, Agency, or Freelancer

Free Webflow accounts can't add custom code. Check your plan in Project Settings → Plans & Billing. If you're on a free plan, you'll need to upgrade before widget embed codes will work.

Public Instagram account (or Business/Creator)

Widget services pull content via Instagram's API. Private accounts block API access, so your feed won't load.

If you need to keep your personal account private:

• Create a separate public account for business content
• Or convert to an Instagram Business/Creator account (Settings → Account → Switch to Professional Account)

Business accounts unlock additional features, such as location tagging and insights, which some widget services support.

Widget service account (free or paid)

You'll need an account with a widget service to generate the embed code.

Most offer free trials or free plans with basic features:

Choose SociableKIT for free basic feeds, Elfsight for a variety of templates and ease of use, EmbedSocial for content moderation and shoppable posts, or Curator for multi-platform feeds that combine Instagram, X (formerly Twitter), and Facebook.

Each service balances features, pricing, and setup complexity; match the tool to your specific use case rather than defaulting to the most popular option. The widget service you choose depends on three factors: budget, the features you need, and how much control you want over content moderation.

For this guide, we'll use Elfsight as the example because it offers the smoothest setup experience.

5 steps to embed an Instagram feed on Webflow through widget implementation

Embedding an Instagram feed on Webflow requires creating a widget account, customizing the feed layout and styling to match your brand, copying the generated embed code, pasting it into Webflow's Embed element inside a Container, and publishing to a live domain to verify it renders correctly.

The entire process takes 15-20 minutes and requires a paid Webflow plan with Custom Code access. Free plans cannot use the Embed element that enables widget integration.

Step #1: Create your Instagram feed widget to embed on Webflow

Create an account at elfsight.com, and select Instagram Feed from the apps menu.

Then, choose a template (grid, slider, or masonry), and connect your Instagram source: either your account username (e.g., @webflow), a specific hashtag (e.g., #webflow), or a location. This initial step establishes what content the widget will pull and how it will display visually before you customize specific styling details.

Choose your template

Templates determine the base layout:

• Grid: Classic Instagram grid layout, best for photo galleries and portfolios
• Slider: Carousel that cycles through posts, works well in hero sections or sidebars
• Masonry: Pinterest-style layout with variable heights, great for mixed content (photos + videos)
• Cards with header: Includes Instagram profile info above the feed

Pick the template that matches where you're placing the feed. For homepage hero sections, I can say the slider works. For portfolio pages, grid. For blog sidebars, cards with a header.

Connect your Instagram source

In the Sources tab, enter your Instagram source directly — no account connection required:

1. Account username: Enter @yourinstagram to pull all public posts from a specific account
2. Hashtag: Enter #yourbrandhashtag to aggregate posts using that tag (great for UGC campaigns)
3. Location: Enter a place name (e.g., "California" or "Times Square") to pull location-tagged posts

Example: If you run a coffee shop, you might use #YourCoffeeShopName to show customer photos. If you're showcasing your own work, use your account username.

The account or hashtag must be public. Private accounts return zero posts even if you own them.

Then, click Create Feed to generate the widget. It pulls your most recent posts immediately so you can preview the layout.

Step #2: Customize your Instagram feed widget for Webflow embedding

With your widget created, move through the customization tabs in the left panel:

• The Layout tab controls structural elements (columns, rows, gaps, and header visibility)
• The Post tab determines which post details display (likes, comments, captions)
• The Style tab adjusts visual aesthetics (colors, overlay effects, backgrounds)

These customizations ensure the widget integrates seamlessly with your Webflow site's design system, rather than appearing as an obvious third-party embed.

Once you're happy with how it looks in the preview, move to the next step.

Step #3: Get the embed code for your Instagram feed Webflow widget

After customizing your widget, you need the embed code to add it to Webflow.

Click the "Publish" button in the top right of the Elfsight editor. This saves your settings and makes the widget live.

A popup appears with your installation code. It looks something like this:

<!-- Elfsight Instagram Feed | Untitled Instagram Feed -->
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-a1b2c3d4-e5f6-7890-abcd-ef1234567890" data-elfsight-app-lazy></div>

Click "Copy code" to add it to your clipboard.

Important notes about this code:

• The <script> tag loads Elfsight's platform script (required once per page)
• The <div> tag with the unique class ID is your specific widget
• This code is unique to your widget — if you create multiple widgets, each gets a different ID
• The code contains all your customization settings (colors, layout, filters)

Keep this code handy. You'll paste it into Webflow in the next step.

Optional: If you want to share the feed via direct link or request free installation from Elfsight's support team, those options appear in the same popup. For this guide, we're using the embed code method.

Step #4: Embed your Instagram feed on Webflow with the Embed element

Now that you have the embed code, it's time to add it to your Webflow site.

Open your Webflow Designer

Log in to Webflow and open the project where you want the Instagram feed.

Navigate to the specific page (e.g., Homepage, About page, Contact page).

Add the Embed element

Here’s how to add the embed element to your page:

1. Click the + (Add Elements) icon in the left sidebar
2. Scroll to the Components section
3. Drag “Code Embed” onto your canvas where you want the feed to appear

Common placement locations:

• Homepage hero section (use slider template)
• About page "Our Work" section (use grid template)
• Footer (use small grid, 3 columns × 1 row)
• Blog sidebar (use cards with header template)

Don't just drop the Embed element directly on the page. Wrap it in a Container or Section for proper responsive behavior.

Standard structure:

• Section (full-width background)
  
  • Container (centered, max-width)
    
    • Heading (optional: "Follow us on Instagram")
    • Embed element (paste code here)

This ensures the feed stays centered and responsive across devices.

With the Embed element selected:

1. The Embed code editor window opens automatically
2. Paste your Elfsight code (the code you copied in Step 3)
3. Enable Line wrapping at the bottom of the editor (optional, makes code easier to read)
4. Click Save & Close

Make sure you paste the complete code, i.e., both the <script> tag AND the <div> tag. Missing either one, and the widget won't render.

Step #5: Publish your Webflow site with an embedded Instagram feed

You've pasted the code.

Now publish your site to see the widget actually work.

In the Webflow Designer:

1. Click Publish in the top right corner
2. Select Publish to Selected Domains
3. Wait for the publish process to complete (usually 10-30 seconds)

Webflow will show a success message with a link to your live site.

Click the link to your live site (e.g., yoursite.webflow.io or your custom domain).

Navigate to the page where you added the Instagram feed.

The widget should now display your Instagram posts in the layout you configured. If you see the feed loading, you're done. If you see an error or blank space, jump to the Troubleshooting section below.

Your Instagram feed is now live and auto-updating. New posts appear on your Webflow site without you touching anything.