Forum Academy Marketplace Showcase Pricing Features

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.

3 Likes

I recommend this one from Copilot > Plugin Development

8 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:

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

8 Likes

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

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

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.

2 Likes

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

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

1 Like

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

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 [email protected] if you’re still running into issues and we’d be happy to take a look. :slight_smile:

1 Like

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

3 Likes

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

3 Likes

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?

i need help please @copilot