🚀 [PLUGIN] Advanced iframe / Embed website

BubbleSam · June 26, 2021, 11:49am

Advanced iframe v1.4.0 released!

Added 2 new fields: allow-microphone and allow-camera:

@gate56holdings I hope it will be helpful to resolve the issue! Please keep me updated

gate56holdings · June 26, 2021, 5:36pm

Thanks @BubbleSam, works like a charm!

stevenrichardlevy · September 23, 2021, 2:29pm

Hey - just purchased the plugin
Just wondering if you had any advice on how to trigger the iframe showing from the Javacript toolbox plugin.

I need to use the Javascript toolbox plugin to create a credit card token (must be done client side) and then open an iframe to display a credit card verification page

In javascript, I believe you just use window.open command but I am not quite sure how to make this all work with your plugin.

Thanks in advance

aestela · September 24, 2021, 1:57am

Hi @BubbleSam I’m looking into this plugin and was wondering if there is any way to block right click in the iframe to avoid users navigating outside the main site?

My personal use case is exactly the same as the use you are giving the plugin in the demo, https://digitaleyedemo.bubbleapps.io/iframe. I want to show the apps’ user manual inside the app and avoid people sharing the source link outside the organization or printing it/navigating outside the main app.

Thank you!

BubbleSam · September 24, 2021, 1:27pm

I think you could trigger a workflow event and use iframe’s Update URL action.

You could add a custom CSS style pointer-events: none; (using the HTML element) to the iframe. It will disable the clicks.
As an alternative, you can add a transparent overlay on it (not tested).

Hope it helps

aestela · September 24, 2021, 4:22pm

Hi @BubbleSam the problem with that solution is that it’ll disable all navigation inside the iframe. Will have to keep looking for a solution Thank you!

mfernandes.beto · October 11, 2021, 12:39pm

Hi @BubbleSam ,

First of all, sorry for my poor English.

I´m using the Advanced iframe / Embed website Plugin for Bubble, but a I can´t get a value from the page used in plugin source_url.

I have to send a “back” value to Bubble but I´m not able to solve this trouble.

This is the function on html page.

        function myFunction() {   
            if (video.muted) {     
                video.muted = false;  
                btn.innerHTML = "";
	    window.parent.bubble_fn_ativasom("back");
            }

But JS to Bubble plugin doesn´t read the value “back” when function is called.

Would you help me please?

Have a nice day

Thank you very much!

BubbleSam · October 12, 2021, 9:05am

Hi @mfernandes.beto ,
Thanks for using our plugin!
I didn’t really get what you are trying to achieve.
Isn’t it related to the Toolbox plugin?

mfernandes.beto · October 12, 2021, 12:13pm

Hi @BubbleSam,

First I would like to thank you for your attention.

I will detail the situation a little:

I have an HTML page that was defined as the URL source in the “Advanced iframe / Embed website Plugin for Bubble”.
On this HTML page, pressing a button runs the following function

function myFunction() {
if (video.muted) {
video.muted = false;
btn.innerHTML = “”;
window.parent.bubble_fn_sounds(“12345”);
}
3) I would like to pass the value “12345” to my Bubble app.

Could you let me know how I would be able to receive the value “12345” in Bubble ?

Again, thank you for your attention and wish you a great day.

Thank you very much

PS: Take a look at this article, my problem is something like this…

BubbleSam · October 13, 2021, 10:37am

Thank for your explanation, I understand now that you are trying to make a communication between 2 apps via an iframe.
Actually iframes behave like “sandboxes”, so I do not think it will be possible to pass values in that way…

mfernandes.beto · October 13, 2021, 11:56am

Thanks @BubbleSam

I understood this safety rule.

I would like to know if it is possible to check the property of a video (running inside the iframe) is muted or not.

That would solve my problem too much.

Thank you again

Have a great day!

BubbleSam · October 14, 2021, 10:15am

Hi @mfernandes.beto ,

For the same reason, I do not think it will be easy to do

mfernandes.beto · October 14, 2021, 9:19pm

Hi @BubbleSam

I verified that it is possible to obtain the element values of an Iframe if it is in the same domain.

This is achieved through the command below:

<script language="JavaScript" type="text/javascript">
var myIframe= document.getElementById("myIframe");
var contentIframe= myIframe.contentDocument || myIframe.contentWindow.document;

var name = contentIframe.name.value; // captures the value of the field of id="name", inside the iframe of id="myIframe"
var email = contentIframe.email.value; // captures the value of the field of id="email", inside the iframe of id="myIframe"
</script>

My question is how should I reference the Iframe if I’m using the Advanced iframe Plugin / Embed website

Would you know how to inform me how I should inform in
document.getElementById(“myIframe”)

Again, thank you for your help and attention in all my questions.

Have a good night!

BubbleSam · October 16, 2021, 8:19am

Hi @mfernandes.beto ,

If you need to refer to your iframe, then you could try the following:

var myIframe = element.getElementsByTagName("iframe")[0];
var contentIframe = myIframe.contentDocument || myIframe.contentWindow.document;

arte912 · November 13, 2021, 2:01pm

Hi @BubbleSam ,
glad I just found your Plugin, works perfect for displaying a youtube video on my page!

Just one thing / request:
When you play the video in fullscreen mode and then turn your phone the playback stops and one has to hit “play” again.

Any way to have uninterrupted video playback even when the user rotates the phone?

Here a link to my page so you see what I mean:

Thanks in advance for taking a look at the issue!

BubbleSam · November 14, 2021, 1:36pm

Hi @arte912 ,

Awesome remark!
Unfortunately I think it won’t be possible to fix that because the rotation is controlled by browser and for the moment I do not see how we can change this behaviour…

dreuxgabriel · December 22, 2021, 11:29pm

Hi, @BubbleSam ! how are you doing?

I turned my bubble aplication into a ionic apk using android studio and im just wondering if the fullscreen mode is gonna work in the aplication as well…

Thanks in advance!

BubbleSam · December 23, 2021, 12:22pm

Hi @dreuxgabriel ,

Great question! However, I don’t really know how an iframe will work in an ionic app The best way to know as usual is make a test…

ciscotreasure · January 11, 2022, 9:02pm

Hi @BubbleSam interesting plugin. Thanks in advance , I Have questions please :

Is it possible user can submit link from : Slideshare.com website and show the result “slides”?
Can I let the user embed Notion page link ?
Is there any security risk when i let users submit links in the plugins input field ?

BR

BubbleSam · January 13, 2022, 8:15am

Hi @ciscotreasure if you send me in PM the urls, we can test it together