Forum Academy Marketplace Showcase Pricing Features

🚀 [PLUGIN] Advanced iframe / Embed website

Advanced iframe v1.4.0 released! :tada:

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

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

Thanks @BubbleSam, works like a charm!

1 Like

Hey - just purchased the plugin :slight_smile:
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

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!

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 :wink:

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 :slight_smile: Thank you!

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 :slight_smile:

Thank you very much!

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?

Hi @BubbleSam,

First I would like to thank you for your attention.

I will detail the situation a little:

  1. I have an HTML page that was defined as the URL source in the “Advanced iframe / Embed website Plugin for Bubble”.

  2. 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…

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…

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 :slight_smile:

Have a great day!

Hi @mfernandes.beto ,

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

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!