Bubble Custom Code Snippets (Internal Dev Toolbox)

A quick reference with useful custom code examples for Bubble. Use with the Toolbox plugin (Run JavaScript) or HTML elements when Bubble’s native options fall short.

⚙️ General Guidelines

Prefer native Bubble solutions when possible — custom code is for edge cases or UI tweaks.
Always comment and document where a snippet is used.
Avoid critical business logic in JS.
Don’t manipulate the database with JS.
Test on all screen sizes & browsers.

🔩 Snippet Library

⬅️ Auto Horizontal Scroll to Group (Toolbox + JavaScript)

Use case: Allows you to automatically scroll horizontally to a specific group inside a repeating group or responsive layout, perfect for layouts where content is side-by-side, since Bubble only supports vertical scrolling natively.

How to use: Add a “Run JavaScript” action (from the Toolbox plugin) and paste the code below. Replace step2 with the Attribute ID of the group you want to bring into view.

<script>
document.getElementById("step2").scrollIntoView({
  behavior: "smooth",
  inline: "center", // move horizontally
  block: "nearest"
});
</script>

🎨 Custom Scrollbar Styling

Use case: Change the scrollbar colors and style to better match your app’s visual identity.
How to use: Go to Settings > SEO and Metatags > Script in body, and paste the CSS snippet below.

<style>
html, body {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #6decb9 #1d2733;
}
 
/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #1d2733;
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #6decb9;
  border-radius: 10px;
}
 
* {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #6decb9 transparent;
}
 
/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 8px;
}
 
*::-webkit-scrollbar-track {
  background: transparent;
}
 
*::-webkit-scrollbar-thumb {
  background-color: #6decb9;
  border-radius: 10px;
}
 
</style>

⬆️ Auto Scroll to Top on Page Navigation

Use case: Automatically scrolls to the top whenever the user navigates to a new page, without needing to add a “scroll to top” action manually.
How to use: Paste the code inside an HTML element placed in a header/sidebar (anything that’s always visible across your app).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
(function() {
    const originalPushState = history.pushState;
    history.pushState = function(...args) {
        originalPushState.apply(this, args);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };
})();
</script>
</body>
</html>

⌨️ Auto-click (Enter Key to trigger button)

Use case: Auto-submit/search on pressing Enter
How to use: Add a Run JavaScript action on page load

$(window).keydown(function(e) {
  if (event.keyCode == 13) {
    if($('#enter').length){
      $('#enter').click();
    }
  }
});

Replace #enter with the element’s ID Attribute.

🎨 Change Bubble Calendar Plugin Colors

Use case: Customize the appearance of the Bubble Calendar plugin to better match the app’s visual identity and branding.

<style>
.fc-button-active {
  color: #000000;
  background-color: #085039 !important;
  border-color: #000000 !important;
}
.fc .fc-button-primary:not(.fc-button-active) {
  color: #FFFFFF;
  background-color: #72DD91 !important;
  border-color: #FFFFFF !important;
}
</style>

🗺️ Hide Map Controls (Keep zoom & drag)

Use case: Remove unnecessary controls (like map type or fullscreen) from the Google Maps element while maintaining interactivity (zoom, drag, etc.).

<style>
.gm-style-mtc { display: none !important; }
.gm-fullscreen-control { display: none !important; }
</style>

⬇️ Rename blank value in the Dropdown

Use case: Modify the default empty option in a dropdown to show a meaningful label like “All” or “Select...”. This is especially useful when:

You’re using dynamic data, and want to give users an option to “select all” without filtering.
You rely on “ignore empty constraints” in searches — selecting the renamed empty option keeps the constraint inactive while improving clarity for the user.
The field is still considered empty in the database, maintaining expected behavior in conditional logic.

<script>
  document.getElementById('ELEMENT_ID').options[1].innerHTML = "VALUE_LIKE_ALL";
</script>

Replace 'ELEMENT_ID' with your dropdown’s ID.

🧮 Calculate Days Between Two Dates

Use case: Calculate the number of days between two dates on the client-side without needing backend workflows — great for availability, bookings, deadlines, etc.

function daysBetween(start, end) {
  const oneDay = 1000 * 60 * 60 * 24;
  const diff = new Date(end) - new Date(start);
  return Math.round(diff / oneDay);
}
bubble_fn_returnDiff(daysBetween(properties.start, properties.end));

🖱️ Smooth Scroll to Element

Use case: Smoothly scroll the page to a specific element — useful for single-page apps or jumping between sections on user actions.

document.getElementById("element_id").scrollIntoView({ behavior: 'smooth' });

📋 Copy to Clipboard

Use case: Copy specific content (e.g., coupon code, generated link, user ID) to the clipboard with one click — improves UX and reduces user effort.

navigator.clipboard.writeText("your text here");

🌐 Get Current Browser Language

Use case: Detect the user's browser language automatically for localization or dynamic language selection.

bubble_fn_lang(navigator.language || navigator.userLanguage);

🧼 Remove All Whitespace from String

Use case: Clean up user input or format strings by removing all spaces — useful in validations, formatting, or when comparing raw strings.

bubble_fn_cleanedString(properties.input.replace(/\s+/g, ''));

📘 Contributing

Found a useful snippet? Add it here or send it in #Bubble channel in Slack with:

A short description
How to use it
Where it's being used (if relevant)

Keep it clean, tested, and readable. When in doubt, comment your code.