Lock Element, Paywall, Upsell

Brandarrow's official documentation for Locked Element, Paywall, Upsell – Bubble.io Plugin.

---

Vitals

Description

Locked Element is a truly amazing plugin! It allows once added to your app: to lock any element at all on your app with a blur and icon/text. This is useful for features you want displayed but not usable until a user upgrades their plan for example. Paywall, upsell, locked features, this is what you need!

Price

$30/once | OR | $10/month

Installation

Lock Element, Paywall, Upsell Plugin for BubbleBubble

Add the plugin to your Bubble app via the official plugin marketplace.

Demo & Editor

Demo Editor

---

Go to Settings → General

Enable “Expose the option to add an ID attribute to HTML elements.”

Instructions

1

Enable HTML ID Attributes

Go to Settings → General

Enable “Expose the option to add an ID attribute to HTML elements.”

2

Add the Plugin Element to Your Page

Drag the LockedElement visual element onto your page.

3

Assign an HTML ID to the Target Element

Give a unique ID (e.g., lock-this-section) to the element you want to lock.

4

Trigger the Lock Action via Workflow

Under Plugins → Locked Element - Lock a Locked Element

Use the same HTML ID from step 3

Configure overlay content (e.g., text, icon, background blur, etc.)

5

Unlock the Element When Needed

Use the action Locked Element - Unlock a Locked Element with the same HTML ID.

That's it, you're ready to use this plugin!

---

Components

Element

• LockedElement

Action

• Locked Element - Lock a Locked Element

• Locked Element - Unlock a Locked Element

Events

None

Data calls

None

---

Common Issues & Troubleshooting

Issue	Likely Cause	Suggested Fix
Overlay not showing	HTML ID mismatch or target element not rendered	Confirm the HTML ID matches exactly, and the target element is visible when the lock is triggered
Blur or style not appearing	Missing or incorrect styling parameters	Re-check the plugin action fields (blur amount, overlay color, text, icon)
Unlock not working	Wrong ID or no active lock	Use the exact same HTML ID used in the lock action
Events not firing	No workflow attached to events	Set up workflows for Locked Element Clicked or Locked Element Tampered events under the plugin section

---

Changelog

Version	Status	Date	Changes
v1.0.0	Shipped	1/6/25	Initial release
v1.1.0	Shipped	1/6/25	Locked Element - Lock a Locked Element Locked Element - Unlock a Locked Element

---

Need Help?

Help & Support

---