How to embed your Instagram feed in Webflow

Before you start: get your embed code

1. Sign up for Social Feed by grip space with your email address. The Free plan lets you create one widget.
2. In the dashboard, click “+ Connect Instagram account” and connect an Instagram professional account (Business or Creator). A personal account can be switched to a professional account for free in the Instagram app.
3. Open “Settings & preview”, choose a grid or a slider, set the number of posts and columns while checking the preview, and save.
4. Under “Add the embed code to your website”, click “Copy”. The code looks like this:

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

The posts appear exactly where you paste this code. Keep it handy for the next steps.

Add the feed with a Code Embed element

1. Open your site in the Webflow Designer and go to the page where you want the feed.
2. Open the Add panel, find Code Embed (type “embed” in the search) and drag it onto the canvas where you want the feed.
3. Paste the embed code into the code editor that opens.
4. Click Save & close.
5. Publish your site and open the published page to check the feed.

In the Designer, the Code Embed element is shown as a placeholder box, and the feed does not appear there. That is normal: check the feed on the published site.

Show the feed on every page

To use the same feed on several pages, for example in the footer, turn the Code Embed element into a component and place the component where you want it.

If your posts do not appear

1. Check that the widget is set to Published in the dashboard. An unpublished widget shows nothing.
2. Make sure the whole code was pasted, from <script to </script>.
3. Look at the published page, not the editor. Many editors do not run scripts while you are editing.
4. Check the published site after publishing again. Changes in the Designer do not appear on the live site until you publish.