Automatically adapt the height of an Instablock for embedded widgets

Please note that the snippets in this article will only work for pages using the new and improved page generator, the Thor Rendering Engine. We recommend testing the snippet functionality in case your page was created before 2019 or duplicated from an older page, as the two render engines have a different code structure in the backend. To migrate your older pages to the new Thor Rendering Engine, you can contact our support team at help@instapage.com.

If you embedded a widget on your page, but notice that the height of the Instablock does not adapt to the size of the third-party widget, don't worry! We created a code snippet that will fix that automatically by adapting the height of an Instablocks to the height of your embedded widget.

After embedding a widget through the HTML element onto your page, add the following code snippet under the Settings > Javascript > Footer section.

The default time setting should work correctly for most HTML widgets, but you can adjust the time inside the code snippet (as seen below). The time you add will depend on the third-party widget that you are embedding. For example, HTML widgets could load with the default time setting, but iFrames might take longer to load and might need 4000ms or more.

3001.png

Note: The code will work only with ONE embedded HTML widget per Instablock. You can embed more than one widget on your pages, but no more than one widget per Instablock (page section).

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have a Professional Services team that can help our Enterprise users. The Enterprise Solution includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/enterprise-benefits