Skip to main content

Command Palette

Search for a command to run...

Adding Preview to Your Bubble Plugin Element: A Simple Guide

Updated
1 min read
Adding Preview to Your Bubble Plugin Element: A Simple Guide

While constructing the Bubble plugin, you discovered that when you drag plugin element to the UI editor, it displays "No plugin preview available."

How can this issue be resolved?

You can incorporate any type of UI based on your element's functionality. However, it is common for people to use a logo in this situation. In this article, I will demonstrate how to add a logo.

$(instance.canvas).append(`<div style="background-color: #E7E9EB;"><img src="logo_image_url.png" style="width: 100%; height: 100%;"></div>`)

You need to copy and paste this code snippet into the preview function.


That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

More from this blog

Nocodetalks - Bubble.io Newsletter

25 posts

Bubble .io Coach | No-Code Content Creator