You can easily embed your Walls.io social wall on a website in only a few minutes. It's very easy, you just need to copy the code that we auto-generate for you. Depending on your website, you can use either the Iframe or JavaScript.
If you don't have a social wall yet, it's time to create one!
đ¶How to Use the Walls.io JavaScript Embed
To embed your social wall using the auto-generated JavaScript code, follow the steps below:Â
Click on âEmbed & Displayâ in the main navigation
Select JavaScript
Customize your widget and copy the code
Embed the code on your website
Walls.io JavaScript Main Widget Settings - Custom Width & Height
In the "Embed & Display", youâll find the standard JavaScript code and a few settings to adjust the widget.
The default Width is set to "Responsive" and the height to "Auto". This means that your social wall embed will automatically extend to the full width of the containing HTML element, for example, a sidebar.
If your website follows a strict column layout with pre-defined dimensions, you can customize the area occupied by the social wall embed by selecting "Fixed" width and height. Any change here is automatically translated to the code on the right.Â
But keep in mind that manually setting the width and height only makes sense if you know exactly how large the widget should be when itâs displayed on your website.
If you want to get rid of the scrollbars as well, make sure you have the "Height" setting on "Auto". That will automatically extend its height to fit all posts. No more scrollbars.
If you would like to load older posts, select "Yes" for the âLoad moreâ button before you copy the embed code.
 Â
Lazy loading for better page speed results
To minimize the impact of images, iframes, or scripts on the network traffic and loading time of the website our Walls.io JavaScript embeds have a lazy load feature that's turned on by default. We strongly recommend leaving this setting on, but if for some reason you want to switch it off, you can just switch the "lazy load wall" to "No" from Embed & Display > JavaScript > Advanced settings > Lazy load wall.
Â
In case you're technically inclined, feel free to customize the "Lazy loading threshold" setting.
đ· How to Use the Walls.io Iframe Embed
In order to use Walls.io as an <iframe> embed follow the steps below:
Click on âEmbed & Displayâ in the main navigation
Select Iframe
Customize your widget and copy the code
Embed the code on your website
Walls.io Iframe Main Widget Settings - Custom Width & Height
In the "Embed & Display", youâll find the standard iframe code and a few settings to adjust the widget.
Fixed Width: Embedding the Widget with Pre-Defined Dimensions
By selecting "Fixed" width, you can manually set the width and height of your iframe embed. Any change here is automatically translated to the HTML code on the right.
If your website follows a strict column layout with pre-defined dimensions, you can customize the area occupied by the Walls.io widget. To customize the embed code for that website, just enter width and height and youâre good to go.
Â
But keep in mind that manually setting the width and height only makes sense if you know exactly how large the widget should be when itâs displayed on your website.Â
Responsive Width: Embedding the Widget in Responsive Layouts
When you donât have to adhere to strictly defined dimensions, you donât have to bother setting a specific width and height for your social wall embed. Instead, you simply check the âResponsiveâ checkbox next to the width/height settings.
That switches the width attribute of the embed code from fixed pixels to 100% â this means the Walls.io Iframe will automatically extend to the full width of the containing HTML element, for example, a sidebar.
Â
đ How to embed social walls using website builders
We created separate guides for embedding a social wall on your website if you're using some of the most popular website builders.
If you don't see your website builder in this list, don't worry. You can embed your social wall anywhere by using either JavaScript or the Iframe option described above.
We also published a video tutorial covering even more website builders
đ How to embed social walls on event platforms
Your social wall will work great on all event platforms. To help you integrate your social wall easier, we created a few guides for the most popular ones that we also partner with. If you're missing a guide, just drop us a line in the chat.
In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io!