Hybrid sites: "embed" Bubble in other websites

Is in Bubble’s roadmap a way to integrate Bubble’s projects into external websites? Something as a way to “embed” pages built in Bubble into other websites using a script or similar (equivalent to how a YouTube player can be embedded in a website). This would unleash an infinite amount of possibilities: bots, popups, widgets and many other things could “easily” be built on Bubble and then injected inside traditional HTML pages. To me, currently it looks like there’s a big gap in terms of integration between the 2 worlds, and this feature would allow us to build “hybrid” websites.

I will be sooooo happy when this is possible :slight_smile:

1 Like

I think @keith is actually doing something like this (creating a widget that goes on other sites) and should have a few posts about it in the forums.

That would be AWESOME. How should I find more info about this? I cannot find relevant info using the search… Thanks, @Kfawcett!

Click on the @name

Then click on the name in the popup
image

Then click the “Activity” button
image

Then read posts. :slight_smile:

or just go here for the post I was refering to: GRUPZ Vacation Rental Booking Widget: Now on Product Hunt Today... Give Us an Updoot?

1 Like

Thanks a lot, @Kfawcett! Indeed, I need something like this! This would mean we can merge the 2 worlds (Bubble and non-Bubble). Looking forward for more ideas about how to build this kind of things! :smiley:

1 Like

Have you experimented with iFrame it into your other site?

1 Like

Hi and thanks, @mente12! Indeed, although iFrames look like an option, I’m not sure if integration-wise makes that much sense. Having the capacity of sharing a script with other people would be awesome. In any case, how would you “fake” a widget with an iFrame to avoid weird behaviours (some webs blocking iFrames, ugly scroll bars, etc.)? Thanks! :smiley:

I believe groupZ dot com widget is using iFrames. Double check though, the information is in the main page.

“HTML/iFrame code!”

iFrames can be fidgety but you can control scrollbars and size to an extent.

1 Like

Indeed, they seem to be using iFrame. Well, if the page allows iFrames, it’s OK, so maybe it’s enough…! I was thinking that scripts give a better option to customise the location of the widget, etc. But if in the page to embed the script we have an invisible floating div that we can place where we want (as a canvas), that could make the job done (although with less flexibility, since the location of the widget is not included in the widget itself, but in the div that contains the iFrame). I will give a try to the iFrame approach for the moment… :slight_smile: Thanks again, @mente12!

Oh hai: My ears are burning… Thanks for the @ mentions… Indeed, my app grupz.com (among other things) generates widgets that can be embedded on other sites. This is done via iFrames.

In terms of making things embed nicely, you have to construct embed code for your users that does the right thing. Unfortunately, they do sometimes mess it up.

I’ve also posted about trying to add embed.ly support for my widgets, but I’ve not got it working yet. (That would ultimately make embedding our widgets more-or-less doofus-proof! :wink: But there are some difficulties with building the required API components for that directly in Bubble – search embed.ly in the forums and I’m sure my description of that will come up.)

You can see examples of these widgets in action on the GRUPZ site:


Also, I just added support for a BUNCH of languages to the calendar widgets. See:

I’m posting an article over in the showcase section that describes (a bit) how I did this momentarily. There’s a lot of cool stuff you can do with Bubble and a little JavaScript library elbow grease.

-K-

2 Likes

My app provides folks with relatively doofus-proof code. There’s no other way to do it. (You might be a smarty-pants and say, “well, you could do it in a script.” But ultimately that script is going to slap down an iFrame.)

See my comments previously on embed.ly (which I’m trying to add support for, but it’s tough going).

1 Like

@keith thanks for the info, examples and ideas! And congrats for your achievements :slight_smile: I’m going to try all this carefully and let’s see if I get good results! Thanks a lot!

BTW, if you want to learn about embed.ly / oEmbed standard, my note about that is this reply (you might find the whole thread helpful):

Basically, modern embedding is just putting a nifty lil’ API wrapper around the process of getting appropriate iFrame code. (So, what you think of as “embedding” is nothing more than old-fashioned iFrames wearing a new suit of clothes.)

Conceptually, it is quite easy to understand what you need to do to enable this sort of embedding. Unfortunately, a couple of limitations of the API workflow capabilities in Bubble seem to make it impossible at present to create appropriate oEmbed responses.

This is not a dig at Bubble’s mostly-quite flexible API options. You can stand up a custom API interface that does just about anything you’d need to do. (Point being that even if something’s a little funky, well you can just document that.)

However, with oEmbed, there are certain standardized requirements for what one’s API must do. Unfortunately we cannot model all of them in vanilla Bubble at the moment. I kinda gave up on oEmbed for a bit to concentrate on other areas.

2 Likes

Please keep sharing your experience!

1 Like

Thanks A LOT, guys! You’re awesome :slight_smile:

1 Like

@keith

I am trying to get some input on a conversation I think would be relevant to a lot of bubblers and something I really don’t have too much of an idea about as a non-coder; focused on SEO, iframes and “money sites” and affiliate sites.

Hoping you might be able to add some thoughts or comments to the thread.

Cheers