Instructions
1. Enable ID attributes in Bubble

Go to Settings > General and turn on “Expose the option to add an ID attribute to HTML elements.”

2. Add an ID to the element you want to badge

Select the Bubble element you want Badge Kit to target, then enter an ID attribute such as:

pricing-card
submit-button
profile-avatar

3. Add the Badge Kit element to your page

Place the Badge Kit element anywhere on the page. It acts as a controller, so it does not need to be visually positioned near the target element.

4. Enter your target Element IDs

In the Element IDs field, enter the ID of the element you want to badge.

For one element:

pricing-card

For multiple elements, separate IDs with commas:

pricing-card, submit-button, profile-avatar

You can also put each ID on a new line:

pricing-card
submit-button
profile-avatar

5. Choose a badge style

Select one of the available badge styles:

Diagonal ribbon
Pill
Rectangle
Drop card

6. Customize the badge

Set the badge text, background color, badge size, position, offsets, border radius, shadow, and animation options from the property editor.

7. Style the badge text

Use Bubble’s built-in style editor to control the badge font, font size, font weight, and font color.

8. Preview your page

Run the page in preview mode to see the badge applied to your selected element or elements.