How to add a widget to your webpage

Many popular applications can be embedded into a webpage automatically with our Embed.ly integration. For more control over how a widget displays, and to embed an application that is not an Embed.ly provider, you can add the code to a page template.

When you're editing a page, go to the Template section.

Edit page menu in NationBuilder

Typically, you'll want to have the widget display after the content that you've written in the Content area of your page. 

where to insert embed code in a NationBuilder page

In the above example of a page template, to display a widget after the content area of the page, you'll want to insert the code at line 14, so that it lives between the div tag on line 13 and the div tag on line 14. 

You can place the code anywhere within the content container and it will display on the live page. The content container begins with div id="content" (line 8 above). Once you've inserted the code, click the "Save and publish" button at the bottom of the page. 

Remember: saving and publishing template changes is not the same as publishing the page. You'll now be able to preview your page with a nicely embedded widget. Hit the orange publish button at the top right of the control panel when you're ready to see your webpage live.

If you'd like more flexibility in formatting where the widget will display on your page, you could draft the content of your page within the page template. Our theme documentation explains more about how to work with page and site templates. Note that text in white will be displayed on your live site. 

Please note: if the widget you are embedding was not built with responsive design, the size and shape of the widget will not adjust based on the size of the window it is being viewed in.  

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.