You can easily embed your Walls.io social wall on a website in only a few minutes. It's straightforward. You only need to copy the code that we auto-generate for you. Depending on your website, you can use either the Iframe or JavaScript.

To embed your social wall using the auto-generated JavaScript code, follow the steps below: 

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.

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 order to use Walls.io as an <iframe> embed follow the steps below:

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.
​ 

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:

Your social wall will work great on all event platforms. To help you integrate your social wall more efficiently, we created a few guides for the most popular ones we partner with. If you're missing a guide, drop us a line in the chat.