3. How to Customize BubbleBase for Your Project
Before using BubbleBase, there are a few things you need to set up to make sure that everything works as expected.
🔒 System Configuration
BubbleBase includes an 🔒 System option set that needs to be configured before use.
Navigate to Data → Option Sets → 🔒 System.
Update the Admin Email field with your own administrator email address.
This email will be used for system notifications and access control.
Update the other fields for Logos and App Name
📌 For more details on configuring the system settings, refer to this section.
💳 Stripe API Setup
To enable payment processing through Stripe, you need to enter your Stripe API keys.
Go to Plugins → API Connector → Stripe in your Bubble project.
Locate the API Key fields (as shown in the image below).
Enter your Live and Test API keys from your Stripe Dashboard.
📌 Ensure that you use the correct keys for each environment (Test vs. Live) to avoid payment processing issues.
📧 SendGrid API Setup
BubbleBase uses SendGrid for email notifications and transactional emails.
Go to Plugins → API Connector → SendGrid.
Enter your SendGrid Live and Test API keys (see the image below).
Ensure your SendGrid account is set up to allow outgoing emails.
📌 For more details on configuring SendGrid, refer to this section.
🔵 Google Plugin Configuration
If you plan to enable Google Login for your users, you need to configure the Google Plugin:
Go to Google Developer Console and create a new project.
Generate your Client ID and Secret Key for OAuth authentication.
Go to Plugins → Google in Bubble and enter your credentials.
📌 For detailed instructions, refer to this section.
🌍 Google Maps & Geocode API Setup
If your application requires location-based data (e.g., address fields or maps), you will need to register and add Google API keys.
Go to the Google Cloud Console and enable the following APIs:
Google Maps API (for map rendering)
Google Geocoding API (for address search and conversion)
Generate your API keys.
Enter the keys in Settings → API Keys within Bubble.
🎨 Customize Branding in the Library Page
To ensure your app matches your brand identity, you should update the Library page with your own colors, typography, and design elements.
Navigate to Pages → Library in your Bubble project.
Update the primary and secondary colors to match your brand.
Adjust the typography and font styles for consistency.
Modify any global design elements such as buttons, backgrounds, and icon sets.
📌 The Library page acts as a style guide for your app. Keeping it updated ensures a consistent design across all pages.
📝 Adjust Copy & Components in the Library
BubbleBase provides a set of pre-built components and reusable elements that should be adjusted to fit your project’s messaging and UI needs.
Review all text content on the Library page (e.g., default headlines, placeholder text).
Modify the buttons, popups, and form labels to match your tone and functionality.
Replace any sample images and icons with your brand assets.
Test different components to ensure they align with your app's goals.
📌 Customizing the Library components early in development saves time and ensures a seamless user experience.
Last updated
