This short guide walks you through how to set up the Liveblocks plugin in your Bubble app and find your keys.

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.

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