Right. You create your “embeddable widget” in a page like this:
And this becomes the page that your users will iframe (with code that you will create and supply). Viewed on its own, such a page will look like this:
(Here’s the actual page: GRUPZ Embedded Vacation Rental Calendar Listing 1533598513737x940983987061391400)
And, embedded as an iframe:
Now, you have to generate the code for your users. In GRUPZ, it comes out like this, for example:
All that css there is to do the little loading spinner. Also, my iframe embed code itself isn’t really fully modern and correct (I’m going to change that soon) so I wouldn’t literally use that as the best model, but you get the idea.
To enable your app to be iframeable, you have to do this:
Note that this is a server setting and all we have control over in Bubble is to allow embedding or not. You can’t control this per-page, so just know that any page in your app is potentially iframe-able.
You will build pages in your app that enable your users to customize their widgets. Like in GRUPZ, there’s pages like this:
And then we create and deliver the code:
As you can see, currently I use a rather long text expression to dynamically fill in values that the user will need. There are slightly sexier ways to do this that result in less ugly expressions, but hey it gets the job done.
The user sees:
