Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Whiteboard Pro | Make apps like Miro

Announcing a new way to make a Miro-like app on Bubble, no complex setup required!

:art: Whiteboard Pro is a powerful way to add a real-time collaborative whiteboard to your app. Lets you create apps like Paint 3D, Figma, Miro or Canva

Notable Features:

Fetch & Import Data in between whiteboards
Save Whiteboard data to your database
Draw to a Whiteboard from workflow actions
Control your Whiteboard from actions: (Clear, Zoom, Fullscreen, etc …)
7 day email support

… and more!

:memo: Whiteboard Pro brings new and exciting features that build upon Whiteboard Lite. To try Whiteboard for free, see Whiteboard Lite.

:link: Want to give it a try? See the Demo

:link: For step-by-step Instructions, see the Wiki

:link: Want to see the Bubble editor? Click here

Questions, comments, suggestions? Leave a reply below!

2 Likes

New Update Version 1.2.1

Now you can listen for when users select elements, and then automatically save those elements to the database. You can also toggle on / off the listener, using the Toggle Listening for Select Action, and there is an exposed state named “Listening for Selected” that evaluates to a yes or no to track the listener.

in summary …

New Actions:

  1. Listen for Select
  2. Toggle Listening for Select

New Exposed State:

  1. Listening for Selected
1 Like

Latest Update (1.2.4)

Added a Whiteboard is Ready event.

How to use:

there is no editor mode for the last version ?

1 Like

Can you elaborate?

Are you asking about editor, viewer and collaborator permissions?

i need a lot of help with this plugin ? can we make a zoom call ? i dont know ho to use it for my need

Congrats man, this is a handsome plugin ! :tada:

1 Like

Send me a direct message, we’ll figure something out :slight_smile:

Thanks so much! :hugs:

1 Like

Hey @jonah.deleseleuc
Thank you for such a wonderful plugin.

We were trying to import JSON data into the whiteboard and it seems like the plugin does not import any text JSON data. We fetched data of a line and a text and then imported it back. The lines were imported perfectly but the text doesnt appear at all.

Please let us know if this is a bug or requires some manipulation on our end? Looking forward to using this plugin on a live project, would appreciate if we can get this sorted soon.
Thanks alot! The rest of the plugin is amazing.

1 Like

Hey :wave:

Thanks for the kind words and for choosing Whiteboard Pro. Are you saying that when you fetch data and then import, everything gets imported except for the text? Or that the text gets imported but the colour is white?

Also, make sure after you fetch data you use the Fetched Data is ready event.

Let me know and I’ll check it out and push a fix asap.

Cheers

Hey @jonah.deleseleuc

Yes that is exactly what I meant. “The fetch data” gave me the right JSON response. Here are the steps you can try to rebuild my scenario

  1. Create a simple line/arrow and a text in whiteboard.
  2. Fetch data. Copy the JSON.
  3. Clear the board
  4. Import the same JSON you copied.

Ideally it should add the same line and text you created in 1, but it would just copy the line and not the text.

Is this plugin free? Seems very good appearance from the forum and across the provided links? Is there a trial? How it works, any limitations?

Thanks with best wishes!

1 Like

Here is the free version :blush:

2 Likes

Heya, it looks like the emojis aren’t working on your demo. Could you please inspect? Thanks.

1 Like

Sure thing :slight_smile: I’ll give it a look

Thanks for the feedback

Is it possible to create custom “objects” for the whiteboard? I’m thinking something like a “card” that ties to a Bubble thing called “task” or “stakeholder.” There’d be a number of different fields that would get pulled in from the Bubble DB, but those things could also be created through the Whiteboard. Is this something that could happen?

3 Likes

Yeah I would also like to know a few things.

Can we add custom fonts?
Can we add predrawn items like chat bubbles or anything else?

The creator of the API confirmed there’s a bug on Firefox, he is investigating and fixing it :slight_smile: I confirmed it works on Chrome

Yes, 100% possible! :smiley:

There’s three things you will need to know how to use to achieve this:

  1. The Fetch Data / Import actions
  2. The Draw API
  3. “Selected Coordinates” Exposed State

Fetch Data / Import

First create a test page and place a whiteboard on the page (provide API keys and board code as per usual). You’ll want to place a button somewhere, call it Fetch Data. After creating the desired shape, setup a workflow for when this button is clicked. When this button is clicked, run the action “Fetch Data”. Next, create an event using the “Fetched Data is Ready” event. On this event, save the whiteboard data using the “Data (JSON)” exposed state to the database.

Next, place another button this time called “Import”, and when it is clicked, run the action “Import Data”. Make sure to provide the data from where you saved it in the database.

What you have just created is a basic save and then load whiteboard data flow. This is already really powerful, but now let’s make it more interesting using dynamic data from your database. This might require some trial and error (be warned!)

The Draw API

Create a new type of data “Test” inside of your database. Create two fields: 1) JSON and 2) Dynamic Text. Copy the whiteboard data you got from the fetch data action from before, create a new thing of type “Test” and paste that whiteboard data inside the JSON field. Create another exact copy of this in your database. In the first “thing” set the dynamic text field to “This is a test string” and in your second one fill it with “this is some crazy testing going on here!”. Here, what we have done is created two exact templates with some differing texts.

"Selected Coordinates" Exposed State

Next, go back to your whiteboard preview where you created your template. Find where you want to put some text and just place an empty text. Next, place a button on the page and call it “Listen for Select”. When the button is clicked, run the action Listen for Selected. Next, place a text somewhere on the page and set it’s value to the whiteboard “Selected Coordinates” exposed state. This text should populate with some coordinates later.

Next, load the page and click the Listen for Selected button. Now select the text we placed in the whiteboard before. You should see some coordinates show up in the text that we placed in the editor somewhere on your page. Save them somewhere safe. Congrats, we’re almost done!

All together now

Finally, what you’ll want to do is clear the current whiteboard. Create a workflow for “When the page is loaded” and the first action will be to import the whiteboard data from the first “Test” thing we created earlier. Now run the action “Draw Text” and use the value saved inside the “Dynamic Text” field we created and use the coordinates that we saved from before in the X and Y fields so that we make sure we’re placing this text where we want it to be. Et voila!

Now if you want to change the value of the text on page load, you just got to pull from the second “Test” thing we created and the text should change from “This is a test string” with “this is some crazy testing going on here!”

Now I understand this is a little bit arduous but it works and I’ve done this several times in real apps! Once you get the hang of it, this becomes a super powerful and unique tool and opens up a lot of creativity :smiley:

Let me know if you have any questions

Cheers

2 Likes