This guide walks you through how to set up the Liveblocks plugin in your Bubble app and find your keys. If you prefer a video walkthrough, check out our step-by-step tutorial below. Otherwise, keep reading for the written guide:

Steps

Prerequisites:

Ensure you have a Liveblocks account and a Bubble account. The free accounts for both services are more than enough to get started.

1. Create a new app

First, you’ll need to create a new app in Bubble. Sign into Bubble, head to the apps tab in your Bubble account, and click on the “Create new app” button. create a new app You won’t need a template.
create new app widget
You can start with the basic features and skip the application assistant.

2. Head to the plugins tab

Now that you’re in the app editor, head to the plugins tab. plugin tab Select “Add plugins.” add plugins Search for “Liveblocks by Lunch Pail Labs” and click install.
screenshot placeholder

3. Create a Liveblocks project

Now you should see the Liveblocks plugin in the plugins tab.
Liveblocks plugin in plugin tab
You’ll need to add your secret key to your app, so go to your Liveblocks dashboard. Add a project if you don’t already have one.
Liveblocks project
For this demo, we’ll set up a development project, but in a live production environment, you’ll want to create a production environment as well. Liveblocks development project

4. Add your secret key to the Liveblocks plugin

Go to the API Keys tab and reveal your key and copy it,
API Keys tab
Next, paste the key into the dev field of the Liveblocks plugin. When you move to production, be sure to create a production project and use the production key. In the PLUS version of the plugin, make sure to add your key to the authorization field, and remember to prepend Bearer before your API key. ⚠️ Remember, keys are sensitive—keep them secure to avoid unauthorized access and potential charges on your account.
Liveblocks secret key

Next Steps

That’s it for setting up the plugin! You now have it installed and ready to go.