Forum Documentation Showcase Pricing Learn more

[New Feature] Plugin preview rendering

We’ve just released a new feature that allows plugins to be rendered in the editor. Up to now, user-written plugins have been represented by a static placeholder image in the editor, but going forward they will be able to work in the editor just as native Bubble elements do.

To take advantage of this new functionality, plugin developers should write a “preview” function in the elements tab of the plugin editor. The preview function is essentially a rehashing of the “initialize” or “update” function, simplified so as to be compatible with the more minimalist context of the editor. Two parameters are provided, instance and properties, exposing the canvas, setHeight function (responsive mode only), element dimensions, and any properties the user has supplied. In most cases, you should be able to reuse your runmode code with a few alterations.

Your plugin will then render itself in the editor, sizing itself correctly. Placeholder images will still be displayed for existing plugins until a preview function is specified.

As always, your feedback/bug reports/feature requests/thoughts are welcome, and thank you for developing plugins for our platform!

21 Likes

I am off to try this right now :slight_smile:

Omg this is big

This is great! Nice job.

@marca

1 Like

@marca
Awesome I was wondering what this preview field was yesterday.

I ran into an issue with this though.

This is my bubble editor error for the plugin

Also I’m not able to set an image Placeholder because there is no placeholder field. So I can’t actually publish the plugin, even if I provide a preview function.

@steven.junio91 @JonL ushing a fix right now for the second issue. Can you provide repro steps for the 401 error message?

Seems to be that I get the error unless the Preview function has this exact formatting as starting code. It has to be the same spacing and returns. Adding any sort of code or text throws the error.

function(instance, properties) {

}

Oh yeah it works after the plugin is published. The testing mode app doesn’t work

Hi @marca will you guys push a fix to preview in unpublished mode?

Sweet! Seeing those placeholder images everywhere in the editor wasn’t the nicest UX, so this is pretty awesome. :clap:

Certainly, as soon as we can reproduce it. So far I’ve not succeeded in getting it to break in unpublished mode. Further clues toward a reproduction case would be welcome–who else is seeing this bug, and under what circumstances?

These are conditions(that I can think of) about my scenario:

  • Not published
  • Private private
  • Tested with a hobby plan
  • Plugin files loaded externally
  • No application authorised in plugin Settings
  • No plugin editors added
  • Container invisible on load

Thanks for looking into this @marca
I was facing the exact same issues yesterday:

  • Existing plugin
  • Published
  • Private
  • Hobby plan for app tested with

I also tested with my test app authorized in test mode as well as without test mode. I removed and added the element in question each time I switched between test and non test to ensure no issues there.

Also tried with a nearly blank preview code to see if there was any part of the preview code failing, but seems to be unrelated.

From my perspective it seems like its a matter of a security mechanism, that the “origin” of the Bubble Editor is not allowed to request the iframe-component. It may have to do something with: token, cookie or IP address of the requesting browser not being whitelisted, thus a 401.

1 Like

I am getting the same issue too:

And am running this by using “Go to test app ->”:

40%20AM

Looking forward to hearing how to get to work

thank you

Are the bugs solved

The 401 bug is outstanding, but as of the end of Friday we finally got a workable repro case. From here it should be a quick and straightforward fix–we’ll keep you posted.

1 Like

Any timeline on the bug resolution?

Tomorrow morning, I think.

I just deployed a fix for the 401 bug.

1 Like