Adding your Instagram widget to your Webflow website is easy. Follow these steps to create your widget. Once you've created your widget, follow the appropriate steps below to add it to your website.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences.
Webflow uses Sections and Containers to allow adding your Custom HTML code snippet. This tutorial doesn’t strive to provide a tutorial on Webflow but it is necessary to display certain stages we went through to create this tutorial.
Please Note - the free option of Webflow does not allow adding Custom HTML code, you will need a site plan for this.
A. Start
Go to your Webflow dashboard and select your project.
Select the page you want to add your widget to under Pages on the left vertical menu on your dashboard.
When the page opens in the editor, select the + (Add Elements) item on the left vertical menu on your dashboard.
On your page, below or above any other content, insert a Section.
This will place a Section on your page covering the whole available width.
Make sure the newly added Section is selected on your page and insert a Container.
This will place a Container centered inside the Section.
For this tutorial, we have placed a Heading inside this Container (to distinguish the type of widget we are discussing).
Select the Container and insert a Heading (under Typography on the Add Elements menu).
Choose your Heading Type.
Then double-click on the Heading textbox and enter your heading.
You can change the formatting of this heading on the Style (S) menu (right side).
In this example we have only changed the justification of the heading to centered.
The resulting area we created to add our widget will then contain the following elements (the different colors are just to differentiate between the elements). Our widget will be placed in the HTML Embed element.
B. Let's add our widget.
As mentioned in the tutorial intro, the process of adding your Grid and Slideshow widget is the same (the Webflow parts) but the way the widgets display differs.
Adding the HTML Embed element.
Select the Container (you will see that it now contains the inserted Heading).
Select the Embed item under Components on the + (Add Elements) menu on the left vertical menu on your dashboard.
This will place an Editor Box inside the selected Container and provide an HTML Embed Code Editor to insert your snippet.
You can select Line wrapping at the bottom of the Editor to make reading your entered code easier.
Inserting the widget snippet.
This process is the same for the Grid and the Slideshow widget. To start, in the example below we have added the snippet for the Responsive Pro Grid widget. We will go through the Slideshow widget process later.
Insert your snippet and when you are ready, click on Save & Close.
Please Note - Webflow does not provide a preview of the Embedded code and displays a message to the effect that it will only be displayed on a published / exported site.
Select Publish on the top menu and click on Publish to Selected Domains.
When done, Webflow will display a success message. To view your website, click on the top link to open your live website.
Your live website will then display the widget as follows (this is with the responsive pro grid widget with an iframe width set at 100%).
If you change the width to e.g. 50% it will display as follows.
It displays smaller, but left-justified. If you want to set the justification of the widget to centered you will have to add some additional HTML code.
We will add a <div> block encapsulating the iframe code. The “width: 75%; margin: auto” setting of the <div> style will set the width of the <div> block to 75% and centered on the page. With this setting we will leave the iframe width set to 100% to set the width of the iframe to 100% of the width of the <div> block.
Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
This will then display the widget as follows.
Adding your Slideshow widget.
As mentioned above, the process for adding the snippets is the same for both widget types.
If you added your responsive Slideshow snippet to your page it will be displayed as follows.
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.
We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows.
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following code.
Make the following changes to the snippet.
Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
<div id=”Wrapper” style=”width: 40%; margin: 0 auto;”> (this sets the Wrapper to 40% of available width and center-justified. With this width setting we can change the width of the widget to any width we want). Please Note - as with the Grid display, if you make the width too small, you will have difficulty to click on an item to display it in a Lightbox. Your Social Media buttons will also not be displayed properly.
<div id="Container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;"> (this sets the area used to display the iframe to 100% of the Wrapper width as well as height = 100% of the width).
Remove the width and height attributes of the iframe style setting and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;).
This will then display the widget as follows.
The widget is also responsive.