This might super simple, or not possible, but it’s driving me nuts. All I’m trying to accomplish is to append dynamic field to the end of this iframe which lays inside the element code of a visual element.
Having a brain fart if anyone can lead me the way. 
Can you not append the iframe to the dom in the initialize function and set the src attribute there?
Hey @jacobgershkovich, how would this look?
(Thanks in advance, I’m still new to the visual element side of things)
Check this link out: https://www.dyn-web.com/tutorials/iframes/dyn-gen/
In the initialize function, you could create and store the iframe:
(using vanilla javascript)
instance.data.iframe = document.createElement(‘iframe’);
Then, assuming you’re trying to use some dynamic data that the user is going to give you, in the “update” function, you access the properties object:
var iframe = instance.data.iframe
iframe.setAttribute(‘src’, properties.yourDynamicData)
Also, here is a great series on YouTube on manipulating the dom using vanilla javascript. Helped me tremendously.
Thank you! This video is great.
I think I’m almost there, but it doesn’t seem to catch:
Hi Lantz,
I don’t think the iframe belongs in the headers section. One approach would be to create the iframe in the element’s initialize() method and append it to instance.canvas. That can be done using jQuery. (instance.canvas is, after all, a jQuery object itself.) So, your initialize() method might look something like the following:
const $ = context.jQuery;
/* Create iframe with desired attributes
* and styling, and store a reference to it.
*/
//instance.data.iframe = $('iframe').attr({ <-- incorrect
instance.data.iframe = $('<iframe>').attr({
name : 'myiFrame',
scrolling : 'no',
frameborder : '0',
marginwidth : '0',
marginheight : '0',
width : '700',
height : '700'
}).css({
border : "0px #ffffff none;"
});
/* Add iframe to the DOM by appending it
* to the Bubble element container.
*/
//instance.canvas.append( iframe ); <-- incorrect
instance.canvas.append( instance.data.iframe );
Then (assuming “something” is a property specified in the Bubble editor), in the element’s update() method, add the src attribute with the dynamic value:
instance.data.iframe.attr({
src : 'https://some.url' + properties.something
});
Then, whenever the element’s property changes, the URL will be updated. (The code’s untested but hopefully close.)
Also FWIW, I don’t think frameborder, marginwidth, and marginheight are valid HTML5. You could use CSS border and padding instead.
Hey @sudsy! Thank you so much for this.
I definitely am getting closer. Your code worked for the most part, as there aren’t any errors in the debugger. But, it doesn’t seem to want to render on page load… Any troubleshooting ideas?
Yeah, I think I see an oversight. Try putting angle brackets around the string “iframe” so that it’s “<iframe>” (when it’s created using jQuery).
No dice on this one 
you need to append instance.data.iframe, not just iframe
You beat me to it! 
(Just tested it out and discovered that.) 
Thanks @exception-rambler, does this go directly underneath the canvas append? No errors in the debugger, but doesn’t render. Maybe my syntax is off. (I clearly need to up my reading on plugin dev lol)
Thanks for being patient with me guys!
No problem.
instance.canvas.append(iframe);
should be
instance.canvas.append(instance.data.iframe);
This is because there is no iframe variable defined, instead you have created an ‘iframe’ key of the instance.data object
Just to be clear, there were 2 issues:
instance.data object - not a local variable - so replace the line as @exception-rambler indicated.
I see… For some reason this still doesn’t want to render.
If this is just me writing the iframe in brackets incorrectly I think I’m going to need a new monitor 
What do you see when you inspect the element with the dev tools on the rendered page?
I can see the element is visible on page load, but the contents of the iframe, in this example is just google.com for testing, isn’t:
When I look at your screenshot, it seem that you have removed the “function” already there when you create an element.
function(instance, properties, context) {
}
If for the “update” part
function(instance, context) {
}
If for initialize
When you do get it to “work”, you should see the iframe element in the DOM, but the external site content might not display, because many sites set the X-Frame-Options response header to deny.