Forum Documentation Showcase Pricing Learn more

Plugin Development Tutorials (With Code) for Bubble

Any content creator want to make a video of how to create a simple plugin in Bubble. Maybe front-end based functionalities like a lazy loader, parralax scrolling, or an image slider? Would love to learn the basics of creating plugins for bubble. Also I would love to learn the process of implementing a jquery plugin in bubble.

1 Like

I recommend this one from Copilot > Plugin Development

4 Likes

Thank You! I’ll check out :slight_smile:

I agree with @JohnMark This is a good one to start.

1 Like

Me too. That is where I learned all about them… it is a great video series!

1 Like

Thanks all! Just bought the course :slight_smile:

1 Like

Thanks for the shoutout, @JohnMark!

We’re soon updating the Plugin Development course to cover new features available to Bubble plugin developers like server-side actions as well as introducing optimization tips. :blush:

3 Likes

Hi @copilot,

I have already built a few plugins but I want to learn how to draw on the canvas so that in run mode, my plugin would display something directly on the end user’s screen. Does your course cover this?

To clarify, so far I have only written plugins where I publish a value to an element’s published state and then the bubbe developer using the plugin can use that value in one of bubble’s native elements like an image or text element. What I want to learn is how to have my plugin draw say an image directly on the canvas. I hope this makes sense.

Regards,
Louis

@louisadekoya Well, I’m not them, but if what you want is to display an image, here’s one of the thousand ways of doing it:

let box = $(`<div></div>`);    
    
instance.canvas.append(box);
box.css("height", properties.bubble.height)
box.css("width", properties.bubble.width)
box.css("background-image", "url(https://dd7tel2830j4w.cloudfront.net/f1564192295493x883459422171276200/Kazam_screenshot_00000.png)")
box.css("background-repeat", "no-repeat")
box.css("background-position", "center")
    
}

Basically instance.canvas is a “div wrapped in a jQuery object” (just a div!) and to display something at the page is to create an HTML element (a <input>, an <image> or whatever else and then append (or any other jquery manipulation) that element to that div. You’ll need to know HTML, CSS and jQuery basics. And I mean just the basic.

The snippet above creates a div and sets its background to a specific image. That’s how I make the Leafy Maps plugin show up like a map in Bubble editor so we get a feel on how the map will look like at run mode.
I could use that code to display that image in the run mode too.

1 Like

Thanks for this @vini_brito. I will give it a try.