What types of widgets can we create with Bubble?

I’m considering a few options that would enable me to publish portions of our site on partners and customers websites via widgets. Am curious what the technology supports.

Seems to me that we can easily create iframe widgets, but not really sure about JS widgets and the associated tradeoffs.

iFrame - This would just reference a specific page on our site set in an iframe. We could give people a few specific options for sizing (and just change the corresponding parameters within the iframe snippet) as well as give them the ability to select from a few color pallets (and pass that to the page via a URL parameter).

I suspect technical customers/partners may prefer a JS widget, and my understanding is that this would be better for SEO (but I could be wrong). Is this something that we could create it Bubble? I suspect the only way to do this would be to create an iframe widget and then create a line of JS code that loads the iframe via AJAX so that it’s not viewed as an iframe on initial page load. Any other ideas?

Curious to get thoughts from the community on how we should think about this problem, both from a Bubble/Technology point of view and also from a Business / customer adoption / usability / SEO point of view.

Thanks!

3 Likes

I am, as of recently, in a similar boat. I was looking forward to reading the replies on your post because of how familiar it sounded, but it doesn’t look like as many people have tried it as I’d hoped. I’ll continue to research and let you know if I come across anything!

You can definitely publish them as iFrames which is easy. I suspect there’s a way to load them as javascript widgets but that’d require at least some custom coding.

Agreed. I was also pleasantly surprised to see that content in the iframes was still responsive after embedding into another site.

Regarding SEO & iFrames…
Google can/does read content in iframes, and obviously takes note that the content is in an iframe. In most cases, you don’t want the widget url to compete against the page it is embedded on in terms of search ranking. You also don’t want Google to give SEO credit to the widget’s url, which it may do when it recognizes it as being an embed from another site. To combat those things, I build each widget on its own dedicated page, size the page to fit the widget, and exclude the page from the exposed sitemap in Bubble.

More than likely, you also want to keep Google’s web crawlers from traveling through the iframe and leaving the site it is embedded on (site “A”). I do my best to leave links out of my widgets. However, if you have a use case where an external link (i.e. not in site A) is required, (ex: the widget is free and being used on a 3rd party site, so you want to add a “made by [your company’s name]” line), I would also add a link in the widget that points back to site A to be safe.

Depending on the amount of control you have over the site holding the iframe, I suspect some pretty interesting things regarding how Google reads the iframe could also be done by editing a robots.txt file.

1 Like