
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.


George Apostolov

John Doe

Mark Dinn

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929fed37dd0e157abed883a/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Explore our 'Resources' menu to find helpful tools and documentation for your app development journey.</li>
 <li>Browse the extensive 'Plugins' marketplace to enhance your app with powerful functionality.</li>
 <li>Search and select 'Stripe'.</li>
 <li>Choose which of your applications will receive the new functionality.</li>
 <li>Review plugin details including features, pricing, and compatibility with your app and click 'Install'.</li>
 <li>Click 'Install' to confirm your selection and prepare to configure the plugin for your specific needs.</li>
</ol>

Bubble.io Stripe Integration

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a00f7243f01ed60a4e95e/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the 'Data' tab.</li>
 <li>Enter a name for your new data.</li>
 <li>Click 'Create' to initiate your database creation.</li>
 <li>Add a new field for you new database by clicking 'Create new field'.</li>
 <li>Add the field name and select the field type for your data.</li>
 <li>Click 'Create' to confirm your text field creation.</li>
 <li>Go to the '<code>User'</code> type.</li>
 <li>Click 'Create new field' to add a 'Company' relationship to your database.</li>
 <li>Define the 'Company' field properties.</li>
 <li>Connect to the 'Company' data type.</li>
 <li>View your 'Company' field configuration.</li>
 <li>Go to the 'Design' tab, drag in an Input element and rename it as 'Company name'.</li>
 <li>Add a button and label it 'Create Company'.</li>
 <li>Click 'Edit workflow'.</li>
 <li>Click on the add icon to add data actions. </li>
 <li>Select the 'Data' section.</li>
 <li>Select 'Create a new thing'.</li>
 <li>You now have your action. Click on the dop-down arow. </li>
 <li>Choose which data type to create.</li>
 <li>Start defining Company field values.</li>
 <li>Assign a value to your 'Company' record.</li>
 <li>Set the 'Name' field for your 'Company'.</li>
 <li>Prepare your app for deployment and click 'Deploy' to publish your app and make it live.</li>
</ol>

How to Add a Company in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2d3357f8f6cdddddd3ef/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Access your domain 'Settings' through the main dashboard to begin customizing your app's web address.</li>
 <li>Navigate to 'Domain and email' to manage how users will access your Bubble application.</li>
 <li>Enter your preferred domain name in the field to replace the default Bubble subdomain.</li>
 <li>Click 'Set up this domain' to verify domain availability and configure DNS settings for your custom web address.</li>
 <li>Click 'Save' to finalize your domain settings to make your professional web address active.</li>
 <li>View your app with its new custom domain, ready to share with the world.</li>
</ol>

How to Add Custom Domains in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2d3b57f8f6cdddddd4a1/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click 'Settings' to access the visual editor to start customizing your application's appearance.</li>
 <li>Navigate to the 'SEO and Metatags' section.</li>
 <li>Scroll down to 'Advanced Settings' and find the 'Script/meta tags in header' field.</li>
 <li>Modify text formatting to enhance visual hierarchy and readability.</li>
 <li>Open additional design tools to further customize your application by clicking the 'Data' tab.</li>
 <li>Access the 'File Manager' to upload and manage custom assets.</li>
 <li>Select the 'Upload' button to add custom fonts to your application.</li>
 <li>Watch as your custom font file uploads to your application.</li>
 <li>View your uploaded 'Poppins' font file in the asset library.</li>
 <li>Return to the editor to apply your newly added custom font by clicking the 'Styles' tab.</li>
 <li>Select this placeholder text to modify its appearance.</li>
 <li>Change from the default Gilroy-Regular font to your custom font.</li>
 <li>Open the font selector to view all available typography options.</li>
 <li>Navigate through your font library to find your custom fonts and apply the 'Poppins' font to give your design a fresh, modern look.</li>
</ol>

How to Add Custom Fonts in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3066d673bd5aa8e630d2/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>From your dashboard, open the editor for the app whose subscription you wish to cancel.</li>
 <li>Access the visual editor where you'll build your application without writing code.</li>
 <li>Click 'Settings' to open the subscription management dashboard to view your plan options.</li>
 <li>Go to the 'App plan' and click 'Cancel Plan' to initiate the cancellation process.</li>
 <li>Select a reason why you're making changes to help Bubble improve their offering.</li>
 <li>Provide feedback about your experience by selecting a reason for changes.</li>
 <li>Click 'OKAY' to confirm your selection and proceed with subscription changes.</li>
 <li>Wait while the system processes your subscription update request.</li>
 <li>Click 'Got it' to acknowledge the completion of your subscription management process.</li>
 <li>Confirm your updated plan with $0 cost, your account has been successfully downgraded.</li>
</ol>

How to Cancel Bubble.io Subscription

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a376eab56e05a00fdcdab/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Once you're in the Bubble dashboard, click the 'Stat from scratch' button.</li>
 <li>Begin building your blog with template as your foundation. Name your app and click 'Get started'.</li>
 <li>Click 'Activate free trial' to access powerful features to customize your blog's appearance and functionality.</li>
 <li>Explore the 'Elements Tree' to organize and manage your app components.</li>
 <li>Customize your blog's headline to reflect your brand and purpose.</li>
 <li>Add a compelling call-to-action button to encourage user engagement.</li>
 <li>Adjust your blog's layout and design elements to match your vision.</li>
 <li>Modify content areas to create the perfect user experience for your readers.</li>
 <li>Add dynamic functionality to make your blog interactive and engaging.</li>
 <li>Click 'Deploy' to publish your creation and share your fully-functional blog with the world.</li>
</ol>

How to Create a New App in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a395fab56e05a00fdfb5b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start your app-building journey by accessing the design dashboard and go to the 'Data' tab in the bubble editor.</li>
 <li>Under 'Data Types', add a new type.</li>
 <li>Click 'Create' to confirm.</li>
 <li>That's it! Your customized data is now visible.</li>
</ol>

How to Create Custom Data Types in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3977ab56e05a00fdfe5b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Let's start by exploring the Bubble.io interface where your app development journey begins.</li>
 <li>Create a new interactive element by adding a button to your application interface.</li>
 <li>Now, enhance your button with dynamic data to create personalized user experiences.</li>
 <li>Customize your element properties to perfectly match your application's design and functionality.</li>
 <li>Click 'Add workflow' to set up your form submission button that will trigger your app's workflows.</li>
 <li>Fine-tune your submission button's appearance to improve user conversion rates.</li>
 <li>Define the trigger event—when users click your submission button, your workflow springs into action.</li>
 <li>Click the add button.</li>
 <li>Once in the 'Workflow' editor, choose what you want to happen and select an action.</li>
 <li>Configure your email notification settings to deliver personalized messages to your users.</li>
 <li>Customize the email content with user data to create relevant communication.</li>
 <li>Confirm your trigger event is properly connected to initiate your automated workflow.</li>
 <li>Once you have set the action details, click 'Deploy' to publish and make it live.</li>
</ol>

How to Create Custom Workflows in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a39a3ab56e05a00fe042f/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the 'Design' tab.</li>
 <li>Choose the page where you want the form to appear.</li>
 <li>Drag and drop 'Text Inputs' for each form field.</li>
 <li>Add a 'Button' at the bottom labeled.</li>
 <li>Add your button to the form.</li>
 <li>Go to the 'Data' tab.</li>
 <li>Under 'Data Types', add a new type and click 'Create'.</li>
 <li>Click 'Create a new field'.</li>
 <li>Add the field name and field type. Once done, click 'Create'.</li>
 <li>Click on the 'Workflow' button.</li>
 <li>Click on the add icon.</li>
 <li>Add an action, click 'Data'.</li>
 <li>Click 'Create a new thing...'.</li>
 <li>Finalize your form and click 'Deploy'.</li>
</ol>

How to Create Forms in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3a1cab56e05a00fe1057/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start your app-building journey by exploring a trial application.</li>
 <li>Go to the 'Reusable Elements' section.</li>
 <li>Click '+ New Reusable' to create reusable elements to build efficiently and maintain consistency across your app.</li>
 <li>Enter a name for your reusable component in the profile field.</li>
 <li>Click 'Create' to confirm your new reusable component to start building it.</li>
 <li>Add design elements to your component from the toolbar.</li>
 <li>Enhance your component with additional functionality or properties.</li>
 <li>Add a 'Message' functionality to enable communication within your app.</li>
 <li>Switch to custom settings for complete control over your component behavior.</li>
 <li>Customize background color using dynamic data for responsive design.</li>
 <li>Select 'Deploy' to finalize your component by applying dynamic styling variables.</li>
</ol>

How to Create Reusable Elements in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f95ab56e05a00fe77f4/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start by accessing the design editor where you'll build your responsive layout.</li>
 <li>Open the 'Layout' panel to access core building blocks for your page structure.</li>
 <li>Go to the 'Container Layout'.</li>
 <li>Choose the right 'Layout' in the 'Property Editor' for each group.</li>
 <li>Set visibility options to control when elements appear and how they behave.</li>
 <li>Access the element properties panel to customize your row's behavior.</li>
 <li>Navigate to the 'Responsive' tab to make your design work on all devices.</li>
 <li>Adjust the responsive settings to control how elements adapt across screen sizes.</li>
 <li>Select the 1200px breakpoint to customize how your site appears on desktop devices.</li>
 <li>Adjust layout proportions for optimal desktop viewing experience.</li>
 <li>Set custom positioning to control exactly where elements appear in your layout.</li>
 <li>Review your responsive settings to ensure consistency across device types.</li>
 <li>Preview your design to see how it will appear to your users.</li>
 <li>Test interactions to ensure your responsive elements function correctly.</li>
 <li>Click 'Deploy' to save your changes to preserve your responsive design work.</li>
</ol>

How to Implement Responsive Design in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a3f96ab56e05a00fe7852/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Drag an 'Input' onto your page.</li>
 <li>Select this field to customize how users will enter information in your app.</li>
 <li>Add a placeholder to guide users on what information to enter here.</li>
 <li>Rename the field as 'Search Input'.</li>
 <li>Use the search functionality to quickly find elements for your application.</li>
 <li>Add a 'Repeating Group' to dynamically display multiple items from your database.</li>
 <li>Define what type of content will populate your repeating group from your database.</li>
 <li>Display product data in your app with this pre-built integration.</li>
 <li>Set up actions that will trigger when users interact with your interface.</li>
 <li>Insert dynamic 'Text' elements to display product information and pricing.</li>
 <li>Finalize your product display layout and click 'Deploy'.</li>
</ol>

How to Implement Search Functionality in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a47dbab56e05a00ff269b/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Go to the left-side panel and then click 'Create'.</li>
 <li>Choose 'Zaps' from the list of options.</li>
 <li>After that, click the 'Trigger' tab to start the integration process.</li>
 <li>Search for 'Bubble' and select it from the recommended matches.</li>
 <li>Next, specify your preferred 'Trigger Event'.</li>
 <li>Tap 'Sign In' afterwards and then log into your active Bubble account.</li>
 <li>Subsequently, click 'Continue'.</li>
 <li>Provide the information needed to configure the Trigger accordingly.</li>
 <li>Once done, click 'Continue' to run your input and test the Trigger.</li>
 <li>Click 'Continue' one more time to proceed further.</li>
 <li>Following that, search for 'Google Sheets' and then choose it as the Action app.</li>
 <li>Next, tap the drop-down menu and pick the specific 'Action Event' you prefer to use.</li>
 <li>Click 'Sign In' afterwards, then log into your Google account.</li>
 <li>Subsequently, tap 'Allow' to accept the terms and grant the necessary permissions.</li>
 <li><article>One by one, fill out the input fields with the required information.</article></li>
 <li><article>Once done, click 'Continue' to proceed.</article></li>
 <li><article>Finally, tap 'Publish' to enable the integration and link your Bubble account to Google Sheets based on your input.</article></li>
</ol>

How to Link Bubble to Google Sheets via Zapier

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4c31ab56e05a00ff7aa3/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Access the app in your <a target="_blank" rel="noopener noreferrer nofollow" href="http://Bubble.io">Bubble.io</a> account.</li>
 <li>Open the 'HTML' editor to customize your content with advanced formatting options.</li>
 <li>Drag an 'HTML' element onto the page.</li>
 <li>Paste the code into the HTML field.</li>
 <li>This removes scrollbars for all browsers, including Chrome, Firefox, and Edge.</li>
 <li>Click 'Deploy' to finalize your design and prepare to deploy your no-code application.</li>
</ol>

How to Remove the Scroll Bar in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4dbeab56e05a00ff9668/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Navigate to your desired app and click on it. </li>
 <li>Go to the 'Design' tab. Explore the 'File Uploader' component, essential for handling document uploads in your Bubble app.</li>
 <li>Drag the 'File Uploader' customize how users will interact with file uploads.</li>
 <li>Examine the upload interface where users will select and submit their files.</li>
 <li>Customize the file upload experience with tailored settings for your application needs.</li>
 <li>Set file size limitations to optimize performance and prevent oversized uploads.</li>
 <li>Adjust visibility settings to control when and how the upload component appears to users.</li>
 <li>Review your File Uploader configuration to ensure it meets your application's needs.</li>
 <li>Optimize the uploader's layout for seamless integration with your app's design.</li>
 <li>Implement conditional logic to create smart, context-aware file upload experiences.</li>
 <li>Click 'Deploy' to finalize your file uploader with conditions that adapt to user actions and app states.</li>
</ol>

How to Set File Uploads in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a4e53ab56e05a00ffa2dd/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Start building your interface by adding a 'Text' element for your sign-up form.</li>
 <li>Customize this field for the Username input on your registration form.</li>
 <li>Set up the 'Password' field to securely collect user credentials.</li>
 <li>Design an interactive 'Button' element for form submission.</li>
 <li>Customize your 'Sign Up' button with dynamic data capabilities.</li>
 <li>Now, let's make your 'Sign Up' button functional with workflows.</li>
 <li>Click 'Add workflow' to create a new workflow to process user registration.</li>
 <li>Click the add icon to build your authentication flow.</li>
 <li>Navigate to the 'Account' options for user management features.</li>
 <li>Choose the user registration action to enable account creation.</li>
 <li>Define what happens when a user interacts with your form.</li>
 <li>Access 'Current User' data to personalize the experience after signup.</li>
 <li>Connect the 'Password' field to your authentication system.</li>
 <li>Test your workflow logic to ensure smooth registration.</li>
 <li>Implement post-registration navigation to enhance user flow.</li>
 <li>Review your complete Sign Up workflow before launching your app and click 'Deploy'.</li>
</ol>

How to Set up User Authentication in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a50d0ab56e05a00ffd879/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>Click 'Resources' to expand the dropdown menu to explore Bubble's app-building options.</li>
 <li>Access 'Plugins' under the 'Marketplace' section.</li>
 <li>Go to the search bar and search for 'API Connector'.</li>
 <li>Once you have your premium account, click 'API Connector' from the results and follow the prompt. </li>
</ol>

How to Use API Connector in Bubble.io

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a5238ab56e05a00fff573/preview?step=1&embed"}/>

 
<h2>Guide</h2>

<ol>
 <li>First, let's add a search input to filter our repeating group content.</li>
 <li>Customize this input field and use it to search through items in our repeating group later.</li>
 <li>Add a placeholder like 'Search Input' to help users understand what this field does.</li>
 <li>Rename this field to 'Search Input' so we can easily reference it in workflows.</li>
 <li>In the search bar, type 'Repeating Group' element.</li>
 <li>Drag a 'Repeating Group' element onto your page and this will display multiple data items in a structured format.</li>
 <li>Set the 'Data Source' for your repeating group by selecting which database objects you want to display.</li>
 <li>Configure the 'Type of Content' - this tells the repeating group what kind of data it's working with.</li>
 <li>Click inside the repeating group cell to design the template for each item that will repeat.</li>
 <li>Add elements inside the cell and connect them to the 'Current Cell's Item' data.</li>
 <li>Finally, set up a workflow that filters the repeating group when text in our search input changes. </li>
</ol>

LIVEDEMO

Showing tutorials from bubble category

Tutorials