Webflow is a tool that empowers designers to build professional, custom websites in a completely visual canvas with no code. You can embed a social wall on your Webflow website in less than 5 minutes by following the steps below.
1. Sign up at Walls.io & set up your social wall
To get started, sign up for a Walls.io trial. Setting up your social wall is fairly easy – connect your social media accounts and start adding sources – f.e. hashtags around your brand and products or your owned social media accounts. For further information, check out our tutorial or watch the video below!
2. Copy the iframe embed code from your wall
In your Walls.io account, go to "Embed & Display" and copy the iframe embed code as marked in the screenshot below (it's sufficient to click on the code to copy it to your clipboard):
For most use cases we recommend sticking with our "Fluid" default layout – if you prefer another layout, or want to pick a different color scheme or language, please have a look at the advanced settings before you copy the embed code:
Most options should be pretty self-explanatory, but we've more information available here.
3. Insert your social wall on the Webflow page
To embed a social wall on your Webflow site, find the place you want to put it, then hit the plus button and scroll down until you get to Components. Pick the Embed component and drag it to the right spot on your page.
When Webflow asks for the code, simply paste your JavaScript snippet and save your changes. Just keep in mind that Webflow doesn’t render JavaScript in the editor, so you’ll have to publish your page first to see the embed. If you use the iframe code, it’ll show up in the editor immediately.
More tips & tricks:
The Walls.io widget is fully responsive – which means it will automatically adapt to the size of the section you are embedding it to. You can override this by setting fixed width, height, rows, and columns when generating the embed code (we recommend using the default for maximum layout compatibility).
Try out our different layouts! Walls.io offers a variety of diverse layouts to display your wall. Continue to read here for more details!
In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io!