Does NationBuilder support iFrames?

Official response from NationBuilder Support

Yes. You can use iFrames and JavaScript elements with NationBuilder - you need to put the code in your website theme (Website > Theme > Files) or in the page template (edit page > Template), not in the content or basic HTML editor. Our theme documentation provides more information on the difference between website and page level template editing.

Please note, we cannot help troubleshoot the functionality of the iFrame since the content is being brought in from a 3rd party service.

Share this post

Showing 22 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Luke Stickels

Luke Stickels commented
Hi I’m having the same problem in the comments below about mobile view cutting off the iframe — I’ve tried inserting the <div id=““iframe-container”” class=““iframe-container””> code above the iframe code itself, but more help for a noncoder would be much appreciated! With thanks, Luke</div>
posted 2016-08-02 03:15:58 -0700
NationBuilder Support

NationBuilder Support responded with completed

posted 2016-05-10 12:27:53 -0700
NationBuilder Support

NationBuilder Support responded with submitted

posted 2016-04-19 15:53:00 -0700
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Glad to hear you were able to sort it out!
posted 2014-12-05 11:12:18 -0800
Jd Marlow

Jd Marlow commented
Ian I was able to get this to work with a Google map, but I ended up putting the CSS code into the THEME file and not the Tablet-Desktop file.
posted 2014-12-05 10:21:10 -0800
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
JD — There are lots of things that could be going wrong, unfortunately. I use that code on my site and it works well, but — again — it could be nearly anything. At this point, I’d recommend to reaching out to one of NationBuilder’s Experts or Architects to see if they can help.
posted 2014-12-03 06:17:33 -0800
Jd Marlow

Jd Marlow commented
Ian,

Thanks so much for this helpful information. I’ve gone ahead and added the CSS code into the Tablet and Desktop file. And then I’ve added this container code right above my iFrame:

<div id=“iframe-container” class=“iframe-container”>
iFRAME CODE
</div>

Doesn’t seem to have taken though…still looks wonky on my iPhone. Perhaps I’m doing it wrong?
posted 2014-12-03 06:07:36 -0800
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Whoops. Looks like that link got corrupted.

http://via.ianhin.es/1lHc8/1nRtCv3J
posted 2014-12-02 17:18:14 -0800
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Hey JD —

If you add this CSS to your tablet-and-desktop.scss file, and wrap your iFrame in a <div> tag with a class of “iframe-container”, it ought to resolve that issue. Understand, however, that if the actual contents of the iFrame are not responsive this will not solve that problem. It will only make the actual frame itself resize.

Code: http://via.ianhin.es/1lHc8/1nRtCv3J</div>
posted 2014-12-02 17:17:47 -0800
Jd Marlow

Jd Marlow commented
I’m having trouble with certain iFrames that aren’t coming in with mobile compatibility. For example, one of our pages is embedding an iFrame from Shopify which cuts off on the iPhone. Is there code we can write into the CSS that can assist with this? We’re having the same issue with Google Maps iFrames. Obviously the Nation Builder Google Maps work, but any custom maps we make and embed don’t show up properly on Mobile.
posted 2014-12-02 14:18:01 -0800
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
@chris — You’ve likely formatted the URL in some way.

Check the HTML view in the WYSIWYG and ensure that the content URL is wrapped only in <p> tags. If it’s italicized, bolded, or has any styling rules it won’t render as a content URL.</p>
posted 2014-11-12 06:42:51 -0800
Chris Hares

Chris Hares commented
Got a website link that contains a video, it finds the content URL, to works in the preview but I publish… and it is just a link of link text that publishes. Any ideas?
posted 2014-11-12 06:37:42 -0800
Ion Rutz

Ion Rutz tagged this with Helpful

posted 2014-11-03 13:20:26 -0800
Ion Rutz

Ion Rutz commented
Worked for me. Thx!
posted 2014-11-03 13:20:04 -0800
Matthew Pancione

Matthew Pancione tagged this with Not helpful

posted 2014-02-27 16:32:02 -0800
C.J. MinsterCheng

NationBuilder employee

C.J. MinsterCheng commented
Brian – code is stripped away from the basic content editor. But if you go to the Template section of the webpage, you can add code there and manage its placement. More information is available in our theme documentation: http://nationbuilder.com/theme_documentation#theme_v_page_level_editing
posted 2014-01-14 08:29:12 -0800
Matthew Pancione

Matthew Pancione tagged this with Not helpful

posted 2014-01-13 15:41:23 -0800
Brian Boyko

Brian Boyko commented
This was absolutely not helpful! I’m trying to render a map in the CONTENT of my page. INLINE. I tried using Javascript but your non-optional WYSIWYG editor strips it away, so I tried to render it in an iframe on another site, but the iframe code gets stripped away. This is sloppy, sloppy work.
posted 2014-01-13 15:41:14 -0800
Matthew Pancione

Matthew Pancione tagged this with Not helpful

posted 2013-09-25 14:21:45 -0700
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Hey Sebastián — I think the answer above may be a bit confusing. Matthew was referring to adding the iFrame directly into the theme files (which can be done at either the site or page level), as opposed to in the WYSIWYG content editor.

Typically when people are using iFrames on their nation they’re doing so in order to render content from an external website, in which case they’re including an element in the theme of one of their pages.
posted 2013-07-05 14:49:23 -0700
Sebastian Llano

McMillianCo.
Certified Architect

Sebastian Llano commented
Hi, so I’ve uploaded my iFrame file to (Websites > MyWebsite > Theme > Files) and then called it from the pages template (not the content or editor), but nothing is showing. Do I need to host the file elsewhere or did I miss something?

Thanks!
posted 2013-07-05 14:08:22 -0700
Matthew Pancione

Matthew Pancione responded

posted 2013-03-18 17:22:09 -0700