How to Embed Instagram Widget on Webflow
Idukki is a powerful UGC platform that lets you create and manage user-generated content for your website without any coding. One of the amazing features of Idukki is the ability to create a widget that showcases your Instagram feed. This is a fantastic way to let your website visitors see your latest snaps and clips, and to inspire them to follow you on Instagram.
Go to your Idukki dashboard and create a collection of your Instagram posts.
After you've created a new collection, you will be taken to the Manage Collection page. Learn more about it here.
On the Manage Collection page, click the “Publish” button. You get a prompt overlay: Curate My Feed or Publish. Continue to publish.
Learn more about curating your feed here.
Pro Tip: Add various sources for diversity. Edit your collection to manage posts and products. Curate your collection to fit your brand. Use a consistent design for your widget.
In the Publish Collection dialog, by default, HTML 5 will be selected. You can simply copy the embed code by clicking Copy to Clipboard. You can click the Mail icon to send the code to the developer.
Note: If you're not sure how to install the code, you can connect with Idukki support using the Start Live Chat at the bottom or email the code to your development team by clicking Send it to Developer.
Open your Webflow website and go to the page where you want to add your feed.
Click the plus icon (+) on the left panel to add an element. Drag the Embed element from the Add panel to the Webflow canvas at the desired location.
Pro Tip: You can change the size and layout. You can add a title and description. You can embed more than one feed.
Paste the HTML code you copied from Idukki into the Embed element and click Save and Close the code editor.
|| Learn more about custom code embed in Webflow here.
I hope this helps.
To display your Instagram feed on your Webflow website using an Idukki collection, you will need to do the following:
Go to your Idukki dashboard and create a collection of your Instagram posts.
After you've created a new collection, you will be taken to the Manage Collection page. Learn more about it here.
On the Manage Collection page, click the “Publish” button. You get a prompt overlay: Curate My Feed or Publish. Continue to publish.
Learn more about curating your feed here.
Pro Tip: Add various sources for diversity. Edit your collection to manage posts and products. Curate your collection to fit your brand. Use a consistent design for your widget.
In the Publish Collection dialog, by default, HTML 5 will be selected. You can simply copy the embed code by clicking Copy to Clipboard. You can click the Mail icon to send the code to the developer.
Note: If you're not sure how to install the code, you can connect with Idukki support using the Start Live Chat at the bottom or email the code to your development team by clicking Send it to Developer.
Open your Webflow website and go to the page where you want to add your feed.
Click the plus icon (+) on the left panel to add an element. Drag the Embed element from the Add panel to the Webflow canvas at the desired location.
Pro Tip: You can change the size and layout. You can add a title and description. You can embed more than one feed.
Paste the HTML code you copied from Idukki into the Embed element and click Save and Close the code editor.
|| Learn more about custom code embed in Webflow here.
I hope this helps.
Updated on: 15/08/2023
Thank you!