Plugin Development Tutorials (With Code) for Bubble

Plugin builders
1

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.

6 Likes
2

I recommend this one from Copilot > Plugin Development

53%20PM
53%20PM2484Ă—976 221 KB

10 Likes
3

Thank You! I’ll check out :slight_smile:

4

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

1 Like
5

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

1 Like
6

Thanks all! Just bought the course :slight_smile:

2 Likes
7

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:

8 Likes
8

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

1 Like
9

@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.

9 Likes
10

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

11

I wonder if you can provide an update regarding new plugin features in the course (?)

12

I have a new intern starting on Monday and had this video course purchased only to find out all the videos don’t exist anymore on the platform.

Copilot - Content
Copilot - Content865Ă—612 18.7 KB

2 Likes
13

Thanks for the heads up. I was planning to buy this course in the next couple of days. Did your intern got a refund?

14

I sent them an email to fix the issue. I’d rather not have a refund :slight_smile:

1 Like
15

Great. I will wait then. Looks like an interesting course

16

Hey @nocodeventure,

We had a technical issue with our video provider that was resolved same-day! Hope your intern is able to take advantage of the material with minimal downtime. Feel free to give us a shout over at courses@withcopilot.com if you’re still running into issues and we’d be happy to take a look. :slight_smile:

1 Like
17

hi @syedibrahim1388 I don’t if you are still interested in this topic but I’ve just released a new course on how to develop custom plugins for Bubble, that includes:

  • a detailed explanation of the Bubble plugin editor;
  • how to create plugin’s elements, actions and dealing with data/REST APIs;
  • how to integrate a JS library in the plugin;
  • a boilerplate project plugin that pulls data from Twitter and performs a sentiment analysis using a JavaScript machine learning library.

More info here https://bit.ly/38rKTt6

M
Matteo

5 Likes
18

new link to the course Superbuild — Break through your limits by mastering Bubble Plugins

3 Likes
19

Hi @copilot I’m keen on the plugin course! But is there like a community or a trainer I can reach out to whenever I’m stuck?

20

i need help please @copilot

1 Like