PWC Plugin List

Hello Bubble members!

We wanted to open a new thread to list our plugins & provide a space to allow questions & answers relating to them. Please look below to see our available plugins.

Upload Informer


Upload Informer automatically works with default Bubble file upload elements, HTML file input elements & other file upload plugins. The events fire & collect information about an upload elements file each time a user interacts with an upload element. Upload Informer reads the file client-side using the users browser, then provides custom states for it’s name, size, MIME, file type, Base64 & Base64 URL allowing you to run the reject or approve action’s before saving the file in your database. The reject action simply clears the file while the accept action allows you to override the file name before uploading the file directly to your database & providing the new Bubble URL. This plugin is best for single file uploads for better control, that said we have added some multi file element support for the first file. If demand for multi file analysis rises we can look at changing it.

Try the DEMO.

Chrome Theme Color


Give your Android users a unique look when using a chrome version 39^ browser by showing your own color in the address/status bar.

Try the DEMO.

Visual Effect’s (UI/UX)


FREE - Visual Effects for your app.

Try the DEMO

Prefetch - Load Resources Faster


Prefetch your images, audio, video, pages & other resources to give your users a faster experience. No more delay while an image renders!

Try the DEMO. (Keep in mind the galaxy image that you see in this demo is a 70 Megapixel image.)

Road Data


Does your app require road data such as speed, number of lanes, surface type (paved), category (highway), Latitude, Longitude, Bounding Box lat & lng for map inputs + MORE?

Try the DEMO.

Keep your eyes out for more plug-ins as they become available.


New Plugin


Show a custom Magnifying Glass over images in your Bubble App. Allowing control over element, glass size, zoom power, inner color & outer color gives your app great ability in this area.


Try the DEMO.

Seems silly that this isn’t already available! I can’t see it in the store yet so I guess it hasn’t finished deploying?

I will be subscribing to this and thank you for opening her up for me its going to provide more of an open store feel to my clients.

@hikaru, thanks for the tip! Not the first time a dirty browser cache has played games with me though. I was referring to the fact that this plug-in does not yet seem to be listed in the plug-in list.

Thanks for your interest - Although Bubble is usually fast to approve our work, we still like pop updates here so expect this plugin to be avail. shortly.

Thanks again for your support.

Thought this may have been the case. Can’t wait still!

1 Like

New Plugin



Edit all your photos in one easy place with Ribbet.


New Plugin



View a users IP, Longitude, Latitude, Country, Timezone & more.



New Plugin

Anything To Image

Turn your anything into an IMAGE & includes convert to PDF, Both are uploaded to your Bubble database.


1 Like

@PWC… I know this might be an obvious question but just for completeness would you be kind enough to confirm if this can include an image as part of the group/element which in turn would be converted to an image. I assume this works on the entire page also with embedded images?


@Bubbleboy I can confirm that the code incorporates a fix for the image issue. In the demo we turn a group containing an image, text, a button, an input, a checkbox and an icon into an image then use the convert image to PDF action (just added this to the demo). The result is exactly as it’s seen on the page.

1 Like

I would like to add that this provides an option for many images in a group or the page to become a single image or PDF.

@PWC thank you for the quick reply and confirmation… Exemplary!

1 Like

Most welcome :+1:

1 Like

Some new additions:




1 Like

Keep an eye out for a couple of new releases.

Data Layer

Make your data instantly available, synced with your Firebase project & updating in real time!

  • Export Your Bubble Data
  • Sync Across Different Apps
  • Offline Persistent Storage
  • Run Data as JavaScript / jQuery
  • Search a Term Through the Entire Data Layer

Note: Firebase Firestore is HIPAA compliant as long as you comply with the Security Rule, the Privacy Rule & the Breach Notification Rule.

What is the Data Layer?

The Data Layer is your Firebase Firestore Data & Bubble Data (if you wish) formatted as JSON. The Data Layer is updated in real time from your Firebase Database & as often as you like from your apps database.

Does this work offline?

Yes, one of the features the Premier Data Layer has is when your users go offline, any values, portion of the Data Layer or pre-selected event data is cached and once the connection is restored the new values are synchronized with the server.

Where do I find my Firebase details?

In your Firebase Console, choose your project, then navigate to ‘Authentication’ and click ‘Web Setup’ . You will see the ID/Keys that are required here.

Make sure you only copy the values without the quotes, for example this line,

projectId: "my-firebase-project",

Would mean your ID is, my-firebase-project

Can I export my Bubble Data to Firebase or the Data Layer?

Yes, We have included a server side action to pull your Bubble Data using the Bubble GET API so you can easily push the result to your Firebase Database using the update action or add to data layer action afterwards.

Does the Plugin deal with Authentication for the user?

Yes, We have allowed for both Email/Password sign in & Anonymous sign in. By using the Firebase Privacy Rules you can restrict the data as required then even if you request all data to be available in the Data Layer only the data that matches your rules will be available.

Can I create functions that work online & offline?

Yes, Using the ‘Run Data as JS’ action you can perform JavaScript tasks even while offline by saving the JS in your database. A good example of this is to have a Firebase Main Collection with a sub-collection called JS, now create a new string {Key: "Value"} pair and call the field offline & set the value to:

document.write("<!doctype html> Site Maintenance body { text-align: center; padding: 150px; } h1 { font-size: 50px; } body { font: 20px Helvetica, sans-serif; color: #333; } article { display: block; text-align: left; width: 650px; margin: 0 auto; } a { color: #dc8100; text-decoration: none; } a:hover { color: #333; text-decoration: none; } We’ll be back soon!")

Now in your Bubble app you can use the ‘Data Offline’ event to run the ‘Run Data as JS’ action and point the action to your above code stored in the Database. The result will be a nice offline page when the internet is disconnected. Of coarse you can expand on this and feature some code in the above snippet to listen for the connection and redirect back to your page, where as promised any data changes will be synchronized both to & from your Firebase Database.

What actions are available?

  • Initialize Data Layer

  • Get Data

  • Write Data

  • Get Value for Inputs

  • Post Data To Endpoint

  • Create New User

  • Log User In

  • Log User Out

  • Run Data as JS

  • Export Bubble Data Part 1 & Part 2

  • Add Data to Layer

  • Search Data Layer

  • Make Data Offline

  • Make Data Online

  • Delete Data

  • Clear Data Layer

What custom states are available?

  • String Output

  • Number Output

  • Boolean Output

  • Search Results (list)

  • Logged In

  • Display Name

  • Email

  • Email Verified

  • Photo URL

  • Is Anonymous

  • User UID

  • Provider Data (JSON)

  • Data Offline

What events are available?

  • Data Layer Updated

  • Signed out

  • Signed In

  • Search Finished

  • Data Offline

  • Data Online

  • Data Deleted

The ‘Data Layer Updated’ event is fired each time the Data Layer changes, this includes if another app was to update the Firebase database as any changes to the Firebase database will trigger this event while online. If the app is offline the event will fire when the app connects again.

Basic Usage:

Once you have setup your Firebase Console & finished adding the required values into the plugin settings tab, your can place the ‘Data Layer’ element on each page its required on. Once this element is on a page you will then have access to its actions & states.

Ensure only ONE ‘Data Layer’ element is placed on each page.

If you have public data you wish to use in your Firebase Database, you should add a ‘Initialize Data Layer’ action in an ‘On Page Load’ event and define the Main Collection name(s).

If you want to initialize more than one Main Collection, you can separate them with a comma.

Example: Site_Assets,Public_Data,JS

You can use the ‘Initialize Data Layer’ as many times as you like. This should be done in cases such as a user has signed in or out using the plugin events as such. This is because you may initialize on page load a Main Collection called public_data because the user is not yet signed in then once the ‘Signed In’ event fires you can initialize public_data,user_data . You must include the public_data again because calling ‘Initialize Data Layer’ also clears the Data Layer so that any Main Collection that is not included is no longer part of the Data Layer to prevent data remaining that should no longer be available.

The events for ‘Signed In’ & ‘Signed Out’ fire on page load so if a user is logged in and returns to your site then the relevant event will fire automatically. This is also true for other events such as ‘Data Offline’, ‘Data Online’ & ‘Data Layer Updated’.

Now that the Data Layer is setup you can start making use of the other element action’s to read, write & delete data & also export your bubble data or post the Data Layer JSON to your apps workflow API.

The ‘Export Bubble Data’ action comes in two parts, first you need to run the ‘Export Bubble Data (1)’ action followed by the ‘Export Bubble Data (2)’ action. To use the export actions you need to enable your apps Data API (GET), check all 'things' you want to export & generate an API key. The API Key is required in the plugin’s settings in the field Bubble Data API Key .

Exporting is as simple as defining your Data API’s URL for the thing your exporting, then using the resulting JSON in the ‘Export Bubble Data (2)’ action.

If your 'thing' was for example 'user' , then your API URL would look like this,

Run Mode:

Version-Test Mode:

The resulting data in your Firebase Database will be structured as follows:

user (Main Collection) / unique_id (List of Thing’s ID’s) / this_users_data (JSON Data of this Thing)

Get Web Page’s
Server-Side action that will fetch the HTML for a requested site & return the HTML, The <head>, <style>, <body> & escaped HTML. The plugin automatically deals with images & links that do not have a host.

Will post the demo apps once they are done being published :slight_smile:

Thanks ,


Very interesting, nice work - worthy of a new post in the showcase section for wider reach (as some people subscribe to new posts within that topic section)


Again nice work :+1:, if I might add, it could do with just a little documentation as it goes a long way.

1 Like