Embedding a bubble app in a client's website

I need to be able to embed the bubble app in a client’s existing website and for that embed to work responsively across different devices, screen sizes, mobile etc. Is this possible right now and if so what is the best way of doing it?

thanks very much for your help!

1 Like

Hi,

If you put an iframe on the client’s website, that should just work.

Bubble’s apps are not responsive per se yet. Currently, users have 2 versions of a page based on the device, which would work in an iframe as well but you have to design these two versions (https://bubble.io/reference#Elements.Page.mobile_page). We’re currently working on responsiveness, and will have that not too far from now.

2 Likes

thanks Emmanuel

1 Like

Would it be possible to create a bubble page that is a form and then embed it using an iframe? That way people could submit form results into bubble from a different website?

That would be awesome! @emmanuel

Well you can already do this. Just create a page wherever and have an iframe such as

<iframe src="https://forum_app.bubbleapps.io">
  <p>Your browser does not support iframes.</p>
</iframe>

It’s not a bubble feature actually, it’s more on the receiving side that you need to be able to do this.

2 Likes

sweet, it works well. That’s a big help for us!

on form submit is there a way to break out of the iframe and direct the top navigation to the bubble app url? I’m getting an error on the landing page site that is from bubble. But if I click the same button while not being in the iframe it works.

I’m having the same problem. i.e.,
I’m getting an error on the landing page site that is from bubble. But if I click the same button while not being in the iframe it works.

In my scenario, my bubble app is using an API to an external service.

I got the same error… I think. The best I can figure is that it’s a CORS issue. Cross origin policy prevents the iframe from controlling the top browser. It’s especially difficult in wix. In the embedded iframe you can try adding some permissions in the sandboxed iframe. Look up sandbox iframe and you should be able to see what functions you are allowed to add. You can try onMessage to pass a message from the iframe to the upper window… although I could not get it work.