Question & Answers
- Bubble.IO Questions
- Plugin Integration API
- Bubble Funtionalities
- Connecting
3rd Party Services
with API & Plugins - Bubble Tutorials
- Debugging
- Mobile Development
- Testing Management
- Version Control
- Web Development
- Workflow Management
- Drag and drop Builder
- App Integrations
- AI-Assisted Development
- Integrations Management
- Application Templates
Yes. You can buy plugins in the Bubble editor (on a per app basis). This plugin allows you to convert your Bubble app into a Progressive Webapp (PWA). This will allow your users to install your App to their home screen.
Fortunately, Bubble makes everything else so easy, it’s usually worth it. After considering those main questions, start playing around on the Bubble platform if you haven’t already. You can sign up for a free plan if you’re still not sure you want to commit.
Bubble apps can only be run on the Bubble platform; there’s no way of exporting your application as code. If you decide to move off the Bubble platform, you’ll have to rebuild the application logic, although we can help you export the design. We’ll do our best to help you leave if you want to.
The Low-Code development needs you to have basic coding skills so as to deploy an app successfully either with the help of full-fledged programmers or users themselves.
The No-Code development, on the other hand, is much more user-friendly and abstract in comparison to the low-code development. It provides a user experience that is completely based on visual development. This needs no knowledge about coding whatsoever. In order to successfully use the no-code tools, users need to be logical and should be someone who is capable of conceptualizing the app from the very beginning to the end.
The major difference between the no-code and low-code is that the latter one is much more complex in comparison to the former one as it needs some level of programming knowledge. This difference has its own trade-offs. The no-code platform, on the one hand, is much more accessible to the wider audience level, whereas, on the other hand, the low code platforms are much more powerful that allows the users to hand-code a few parts of an app.
Bubble may be a no code or a low code depending of what apps do you want to build. Some of the users uses code for their apps in Bubble.
Advantages:
- Cost effectiveness
- Ease of usage – user friendly
- Business agility
- Stronger IT Governance
Disadvantages
- Innovation applications
- Customer engagement applications
- Operational efficiency applications
- Legacy migration applications
Bubble editor is free to use while you build your product. Once you’re ready to publish the app on a custom domain, there paid plans can start just $25/month.
Bubble fundamentals video series is a great place to start. It will walk you through what is possible in Bubble, as well as share guided walkthroughs of how to achieve it. https://bubble.io/video-course
There will always be a need for coding. They benefited in there both alternatives. Bubble tool is aimed at empowering makers from all backgrounds to get started creating software. No code tools help lower the barrier to entry for those without any previous technical experience.
The Bubble team can assist you with any questions that pertain to the use of the Bubble platform, such as billing and account questions, best practices when building your app, and bug reports. They are not able to assist you with custom code, and plugins or templates that are published by third-party providers.
Many business users have getting IT to change existing applications and workflows to solve point problems like tracking work from home but building large scale enterprise class applications that power entire organizations skills requires high skilled programmers. No code software is not a future of code. It is certainly having a place in the future and will be leveraged to make many applications.
In traditional languages, you work with low-level concepts such as clients, servers, databases, data models, and HTML templating. You work in text documents, and it’s up to you to know what to type.
In Bubble, you can work in clicks, rather than code, and apply higher-level concepts such as “show this button”, “send an email”, and “turn this font red.” Design your page using a visual editor, and write the logic of your application with a system that prompts you with suggestions, so you’re never at a loss for what to type next.
Bubble is empowering. You no longer need programming skills to build an app, whether it’s just a hobby app for personal use, or a complex piece of software built to run an entire large-scale business on.
With Bubble, you can build interactive, multi-user apps for both desktop and mobile web browsers. Some users have successfully used third-party tools to wrap Bubble websites as native apps and submitted them to the Apple App Store and Google Play Store, and they plan to fully support native apps in the future.
Bubble is open-ended. As with traditional programming languages, there’s no fixed set of possibilities.
Things you can build include (but are not limited to!)
– a real time voting app
– video sharing social network
– A Craigslist-eques marketplace
– A turn-based storytelling game
Bubble makes it easy to build animations, but currently isn’t really suited for building anything that involves a lot of dynamic graphics, such as a platform game.
Bubble is most efficient for writing business and display logic, rather than mathematically-complex algorithms or novel UI interactions. Bubble seamlessly integrates with JavaScript via plugins; we recommend using JavaScript for expressing mathematically-complicated formulas, or building game-like or non-web-native visual interactions.
Designing in Bubble is as straightforward as dragging and dropping. As you get more familiar with it, you’ll be able to build beautiful web designs with just a few clicks. It can be pixel perfect, if you can visualize it, you can build it.
Yes, Bubble is still relatively new, but the growth they’ve already seen is impressive. Not only did they have an explosive launch on Product Hunt, they’ve continued to grow since then — in both user-count and staff-count. They’re consistently adding new team members, and deepening their roots all the while. And the good is thing is their basic rule is that you own your own data.
Every app, person and situation are different. Learning bubble depends on the type of app you want to build; the time you can commit; and your ability to invest financially. You should technically learn all the fundamentals and concepts. From there, the more you practice those techniques, the quicker you’ll get a handle on the platform, and the better your app will become.
Yes, Bubble is still relatively new, but the growth they’ve already seen is impressive. Not only did they have an explosive launch on Product Hunt, they’ve continued to grow since then — in both user-count and staff-count. They’re consistently adding new team members, and deepening their roots all the while. And the good is thing is their basic rule is that you own your own data.
Adalo is a more visual programming app that lets you see the flow of your user interface, and then customize a whole lot more. The functionality can’t extend super far, but you’re going to be able to build 95% of what you need. For instance, a full marketplace application is easy to build there. Bubble lets you build almost anything, and it connects super well with other apps, so it’s going to be the go-to if you need something more complicated with any deeper backend database.
Bubble and Wix can be primarily classified as “Website Builder” tools. Bubble is a visual programming language that lets you build a fully-functional web app without writing code. Users have built marketplaces, CRM tools, social networks Engineers can focus on new features and add them as plugins with code, while business people can focus on the customer-facing product. Wix.com is a web development platform enabling anyone to build a stunning online presence using simple cloud-based creation and management tools. Creating your stunning website for free is easier than ever. No tech skills needed. Just pick a template, change anything you want, add your images, videos, text and more to get online instantly.
In Bubble and Amazon Honeycode, you can build a web app without writing a code. Bubble is a visual programming language that lets you build a fully functional web app without writing code. On the other hand, Amazon Honeycode gives you more power to build a powerful mobile and web applications without writing a code. It uses familiar spreadsheet models and easily share data with your team.
Bubble is a platform where you can create digital products without code. Bildr is a platform where you can create an apps, web sites, Google Chrome extensions, and many more. Bubble is been around for more years and it is more mature. It has a really vibrant communities where you can use plugin and you can do all kinds of apps. It has specific type of workflow that allows you to create your projects. It can easily done without the experience of coding. On the other hand, in building apps in Bildr you need to have a background in coding. Bildr is a new platform and it’s still a lot to go through unlike the bubble that has been around for a long time but its feature are interesting and powerful.
Glide is a no-code platform that helps you, they say, “create an app from a Google sheet in five minutes, for free.” The no-code tool enables you to convert a Google Sheet into a beautiful, easy to use mobile app with simple UX. Glide is a convenient no-code platform for people who want to build simple apps quickly, for work, travel, leisure, or setting personal goals (such as fitness and savings).
Unlike Thunkable and Bubble, Glide does not provide a drag-and-drop editor, so the layout choices are more constrained. On the plus side, this means that Glide offers an incredibly fast time-to-launch.
Similarities between Glide and Bubble:
Both Glide and Bubble offer a community forum where users can ask questions and offer advice.
Both allow for integration with Zapier and Stripe, which is helpful for online businesses.
Both Glide and Bubble currently have a free plan option.
Both enable you to build apps visually and without code.
Both provide free templates to help you get started.
Neither Glide nor Bubble currently support native app development. While Bubble community members have found ways to convert their apps to mobile app stores, Glide users can submit a form and work with the Glide team on publishing their app.
The key differences between Glide and Bubble are:
Templated Onboarding: Glide provides templates that limit layout choices but make it incredibly easy to launch your app. You can choose a template and create your first app in minutes. Unlike Glide, Bubble provides a drag-and-drop interface editor that requires some lessons to learn, but then allows for full design freedom. Templates for Bubble apps are also available for purchase by third-party creators, such as Zeroqode.
Database: Glide apps use an existing Google Sheet as their database and basically only allow for CRUD (create, read, update, delete) interactions with the backing Sheet. In addition to allowing for both front and back-end events, Bubble comes with full database functionality beyond CMS and allows you to accomplish things like handling conditional situations, connecting to any API or backend, and building features such as a comments system or an upvoting system.
Figma is used to design the user interface of your application, whereas Bubble is used to actually build your product. Bubble actually has a great integration with Figma that allows you to import your Figma designs into Bubble.
Bubble disadvantages are the speed and performance; you may be locked into the vendor and don’t get your source code; it has no native mobile application support; you cannot self-host and you can bump into design limitations.
Here are examples of different types of apps built on Bubble:
Escape the City
SendPilot
Marlow
Mage.Town
App DuJour
This is very doable in Bubble. Below is a basic structure to get you started, but you’ll need to modify it to your needs:
Database
You’ll need a data type to save a score value that is unique to the quiz and quiz taker. Depending on how complex your scoring system is, an “Answer” data type could hold a score value per answer and/or an overall “Submission” type could hold the summed up score. So, you’ll need data types like the following:
Quiz
– Name (text)
– List of Questions (Question, list)
Question
– Text (text)
– Quiz (Quiz)
Submission
– Respondent (User)
– Score (number)
– Quiz (Quiz)
– List of Answers (Answer, list)
Answer
– Value (this field type just depends on what kind of answer … text, number, yes/no, etc.)
– Submission (Submission)
– Score (number)
So, each Answer would save its individual score, and the Submission would be the final score. Or, if you don’t need to keep track of individual answers, you could do away with that type and just have the Submission and update the Score there every time an answer is given.
Workflows
This also depends on how you’re designing the quiz, but I’d recommend using a repeating group to display the Quiz’s list of questions so that for each question a unique Answer can be generated and/or you can be tabulating the Submission’s final score after each Answer gets an entry (number, text, yes/no, etc).
There are quite a few ways to do this and the system can really be as simple or complex as you need, but hopefully, this gets you moving in a forward direction. Start small. Don’t overthink it. Create your data types simply first, get the questions to display, then play around with workflows to save/generate data as you need. Hope this helps!
Google Maps (bdk) plug must help. It is an extended version of google maps with extensive marker support, styling and customization capabilities. It can build maps like Airbnb with useful marker icons, dynamically update markers in real-time for each customer of your 1/2/3/4/5 – sided marketplace or just apply funky styles to make that map visually appealing.
Bubble applications cannot be transferred while on a Personal plan; your application will either need to be on a Personal plan or Professional and above in order to be transferred to another user. You can transfer an application on the personal plan from your current account to another by going to the app’s editor, clicking on Settings, selecting the Collaboration tab, typing in the new user’s email in the “Invite a user” field, and clicking “Transfer”. In order to transfer an application on a paid plan (Professional and above), you will need to invite the user as a collaborator instead. You can do this by going to the app’s editor, clicking on Settings, selecting the Collaboration tab, typing in the new user’s email in the “Invite a user” field, and clicking “Invite”. The new user will need to assume responsibility for payment on the application’s plan by going to the app’s editor on their account and selecting the option in the App Plan tab.
No-code app builders like bubble.io make it easy for anyone to build their own software now. The name says it all: no-code app builders allow developers of all kinds to build the apps they want minus the technical burden of the process. Because coding makes exclusive traditional app development, only studied professionals can take on these projects.
In creating a responsive design in Bubble you must do these steps:
Check your page width that must be the same as the other page.
Show the grid. This will be helpful for lining things up.
Make sure your page isn’t set to a fixed width.
Use a group to make a container on-page. It gives you control over how the elements within them behave.
Put a group within your container group. This is how bubble does margins and padding.
You can use an invisible shape for every space of element that acts as spacer to allign it properly.
Check your app if it is responsive.
Bubble is not a native app builder; it isn’t designed for building apps specifically for the App Store. Because of how much easier Bubble is than other app builders, though, some people still use the platform to create their app and then use another service to make it app-store-ready. To do so, you’d have to use both Bubble and a service, like BDK Native or GoNative.io, in combination. This will allow you to “wrap” your app and submit it to app stores. Doing that requires paying for two services, learning to flatform tools and finding developers for two platform tools.
Bubble apps can only be run on the Bubble platform. This proprietary model is justified by Bubble’s business model. Thus, you cannot export an application as code. If you decide to move away from Bubble platform, you’ll have to rebuild the (no-code) application logic. You will only be able to export the application data and the custom code you added on top of Bubble.
It is possible to build Google Surveys in Bubble as long as you properly modify your data and workflow.
Bubble has pre build plugins like Google Analytics that can be used to easily visualize data. It tracks page loads, custom events, user interactions and other key analytical-data.
There is update on how Bubble handles application languages, which makes handling more than one language much easier. You can define a field on the user type that contains the language to apply to the user in the Settings Tab -> Languages. The field should be of type ‘text’ and should contain a value that is part of the list in the language’s dropdown (English, French, Greek, etc.). You can also access the “current language” in the dropdown, as one of the App Data (like Website home, admin email, etc.). You can use this information in the conditional tab to change the text of some elements, for instance
There are all kinds of ads you can use to monetize your app—feed, splash, banner, interstitial, video, and many more. There are also a number of companies you can use to easily integrate those ads straight into your app.
Using ads as a monetization strategy, again, depends on your user base, and integrating them requires a fine balance.
If your users will simply click away or uninstall your app because it explodes with ads every time they log in, scale back. And if even a few ads turns your user base away, consider another monetization method.
Web Search plugin allows you to create your own search engine from scratch or just integrate a search functionality into one of your apps. This Plugin makes use of the Contextual Web Search API.
Dividend finance is built and runs on Bubble. It is free to create and use an account while you build your product. Once you are ready to access features like the API Connector or publish your App on a custom domain, Bubble paid plans can start from just $25/month.
There is a paid plug in Coingate – Cryptocurrency Payments. One API for 50 cryptocurrencies. fully customizable API allows integrating Bitcoin payments alongside over 50 other cryptocurrencies into any webshop or online business, whether it is a clothing store, or an online casino. It can buy on per application basis that cost $50.
Google Maps (bdk) plug in published on September 2019. It is an extended version of google maps with extensive marker support, styling and customization capabilities. It can build maps like Airbnb with useful marker icons, dynamically update markers in real-time for each customer of your 1/2/3/4/5 – sided marketplace or just apply funky styles to make that map visually appealing.
You can easily integrate your app with Google Maps or Mapbox to build advances mapping products.
Bubble themselves have developed a number of their own plugins for you to use, which makes them both perfectly-functional and reliable. Bubble might not have every single plugin you need, and some plugins might be built, then “left behind” at+ some point. But even so, with the ease Bubble offers to no-code developers, it’s hard to pass up a platform like this when there are other options for plugins.
Bubble is not PCI compliant, meaning you can’t store sensitive data within your app. So, if your app is related to banking in some way (student loan tracker, budget tracking, personal finance, investments, etc.), you’d need to come in with a solid plan of action.
While we’ve seen banking-related apps built on Bubble, each founder has done so with their own compliance knowledge. It’s important you seek your own expert legal counsel if your app needs to be PCI compliant.
Bubble has new plug in called PDF Conjurer. It is a free, powerful, reliable and flexible plugin that allows you to create PDF files to be downloaded, opened or printed by your user’s browser. It is completely client-side, uses no API, no external services and does not increases your app’s costs. It dynamically generates a PDF file and offers to download it with the standard browser’s download option (save as / open with).
SSO Login (Multiple Providers) plugins, this plugin allows you to add Single Sign-on (SSO) login capabilities to multiple providers without the effort of setting up an OAuth Token Authorization, Refresh Flow and API calls. The plugin offers the UI/Visual Element, authorizes your users and gives you profile data (email, name and profile pic) to save in your DB.
For documentation: https://docs.pathfix.com/single-sign-on-sso-login
Mr. Josh Haas, founder of bubble.io states that they don’t see a conflict at all between plugin building and no code. No code is about having as many pieces as possible and as flexible a system as possible for combining them. Bubble marketplace states that their marketplace terms states that if the plugin seller stops selling a particular plugin, that plugin does not get automatically removed from user Apps. Rather, it becomes free so the user can continue using it until they can find a replacement or use it forever as long as is it working. They are not planning to make the code public without the seller consent but plugin users won’t have to worry about their apps suddenly not working.
The time it will take to build will be completely reliant on your capabilities with Bubble toolset.
You can easily publish any Bubble app to the IOS and Android app stores. You’ll just need to review if WhatsApp has an API that allows you to publish to their platform. If ever they have an API end point, you can easily integrate this with you app.
Marketplace and Auctions sites are some of the core use cases. It’s always free to create an account and start experimenting with what’s possible.
You can use Unsplash, UI Name, UI Faces and even their own 3d backgrounds but it requires a Professional Account to gather some presets for your user interface.
(Really not sure how it works)
Some people complained that the Bubble app can get sluggish when a certain number of people are using it at once. Also, Bubble.io doesn’t mention anywhere in its plan how many users it can handle. It seems like speed is one of the most important concerns for anyone with a Bubble app that wishes to scale up in the future.
Auto-binding lets you modify a record in your database without having to create a new workflow. Think of its kind of like an “auto-save” function, where any data entered gets saved or changed automatically. With fewer workflows to create/manage and no buttons to click, it’s an instant overwrite that makes it easier and faster for both you and users to input or alter data. Auto-binding isn’t right for every use case, but when a data record needs to be modified quickly, it’s a seriously helpful feature.
Group elements in a row, set condition when Current Cells Index <-modulo->2 is 1, change background style and color.
If you want an app where you allow users to book a session with you, chances are that you are thinking about using Calendly. Calendly allows you to schedule meetings by allowing the user to see a list of slots you’re available in. It has a free tier as well. You would need an account with Calendly to allow your users to book sessions.
Shippo Track Plugin may help. It is a free plugin on bubble that can track packages with tracking numbers and shipped through many shipping services like FedEx, UPS, USPS, and more. Sign up for Shippo Account and get their API token. Input your Shippo Tokens on your plugin settings under Authorization and your all set.
As of 2021, Bubble is not a platform to build native mobile applications for iOS and Android. Although Bubble can get you an impressively complex and powerful web application – you need help if you want to translate that into mobile apps to publish on the App Store and Google Play. There is a website known as MVP.dev that will help you build your application with zero code and give you an experience that is completely clean and hassle-free. It is the best no-code app builder in the industry. Developing and launching your application is not an easy task at all. It involves a lot of planning and processing to make it happen. So, this website helps you by giving you a detailed description of how you should execute things and go ahead and plan. You also get expert tech consulting, and they will guide you on how to develop your idea, what is best for you and what is not, and how can you make the idea a grand success. http://mvp.dev/
Install Facebook plugin in your Bubble App.
Create a button that indicates signup and login with Facebook.
Go to https://developers.facebook.com/ . Make sure that your Facebook account is login.
From there, click My Apps – Create an App. Then Create your App Id and Submit. Click Facebook Login and Setup Button.
Select WWW. Paste your site URL and click save and continue.
Off in Development Settings. Click Basic Settings
Custom states allow you to create variables and helps store those variables in any elements. To better understand custom states, a variable is anything that can hold different values. Example for that is:
When x is green you should run and;
When x is red you stop.
Create a design in your plate and in your chosen element, create a custom state via workflow or you can just to its property editor and click the element inspector icon and create your custom state and your preferred value. Then create a conditional in your chosen element to justify your custom states. And your all set. Preview your app and test if it’s working.
A popup is an overlay element that takes over the entire page. Popups are hidden by default and must be shown with a workflow. A button clicks or even a Page Load event can trigger the “Show Element” action. Popups can be closed via workflow or by clicking anywhere outside the popup. If you want to force users to only close through a workflow (i.e., an X or “close” button), then check the box “This popup cannot be closed by pressing ‘Esc'” in the popup’s settings.
Floating Groups element can “stick” in place as you scroll through the page so it’s always visible. It can be visible on page load, and you can also show/hide via workflows. It can either “stick” to the top or bottom of the page if you place them at those boundaries of your page. For example, a floating group header needs to be placed at the very top of your page. Play around with the settings to see what works best for you.
Group Focus is “attached” to a reference element (another element on the page). Primarily used for showing temporarily. It can hide by default and must be shown with a workflow. Clicking anywhere outside of the Group Focus will close it. Group Focus elements require a “reference” element, which essentially attaches them to that element. If you need to move the positioning a bit, you can adjust the offset settings.
First click a button and set a custom state: state name=click count; state type = number
(Note that it can be a text yes/no or name, whatever you prefer. For now, it states as number)
Set your value to 0. Create a workflow When this button is clicked and this button clicked account is 0 and other workflow that set value is equals to 1.
Set a condition in the property editor of the button: When button is clicked count 1, change the text and the color of your button. And preview your work if you are done.
If you’re building an app, there’s a very good chance you’re working with dates in some way. It can be a little tricky, though, because Bubble uses different ways of working with time than you might be used to. With that unfamiliarity could come mistakes in how you set up your date function (whatever it may be). Bubble stores dates as a UNIX timestamp. UNIX time is technically the number of seconds since January 1, 1970 UTC, which essentially makes it a zone-less value. So, no matter where you are in the world, the number of seconds since that time is the same. Whenever Bubble displays a date/time value though, it automatically converts that value to your local time zone.
Disable workflow is where if you’re undecided to the workflow and you want to test something else you can disable your selected workflow and bubble will not run it. This is the great way to hang on staffs so you don’t need to delete it.
Breakpoint is where you can run a sequence of action at a normal speed. Its either you choose an entire workflow or series of action/s, the debugger mode comes up the moment that the event is trigger.
When you find yourself creating a group or element multiple times throughout your app (like an opt-in form, for example), you can turn that into a reusable element.
By doing so, instead of recreating that opt in form (or whatever else you’re creating) from scratch, you can simply drag it onto your page already completed.
Sometimes, you might not think you’ll need a reusable element, and then later on find yourself copying and pasting or recreating something you’ve already built. Instead, you can just convert that original element into a reusable element and save yourself some time.
You may select a group, right click – Convert into a reusable element. Type your element name and create.
Without having that crucial element in place, the pages of your Bubble app might not be indexed or crawled by Google. If you want any of your app to show up in search results, that can be a big issue.
In your Bubble editor, you can collapse and expand sections in the sidebar. When every section is open, that sidebar is long and bulky. It takes a lot of scrolling and searching to find what you need. When the sections are collapsed, though, it’s simple and quick to immediately head to the tool you need.
Collapsible sidebars are important to design, especially when you have a lot of options you need to give users. They let you put the power of navigation in your users’ hands, but without any overwhelm.
Create your design for an options and sub option. For sub option: make sure this element is not visible on the page load and put a check on collapse this elements height when hidden.
Set a workflow on your text element option – Element Action – Toggle (Select a sub option you want to show.
You may set the design you want and workflows of its option according to your preference.
Bubble gives you a number of SEO options to configure right within your editor. No magic tricks required. If you’re building an app (or landing page for your app) that needs to be found on Google (aka when people type in your keywords, you actually pop up!), make sure you configure these settings in your Bubble editor.
SEO and social metatags optimization is only possible on a paid plan.
Right click on the header on your page, select replace by another element and select your new type of element and click replace.
To enlarge images from gallery of thumbnails in bubble.io
- Add a pop-up
- Add another repeating group in your popup
Type of Content: image
Data Source: Repeating group List of Images
Fixed Number of Cells
Row: 1 Column: 1
- In a repeating group in popup, add image element Current Cell’s image
- Add previous and next button
- Create a workflow, when button previous in clicked – Elements Actions – Show previous
- When button next is clicked – Elements Actions – Show next.
Drag an input element on your page app. And add a group focus. Reference Element is your Input search.
Inside a group focus, add a repeating group to display the choices that match on your search.
Go to https://fontlibrary.org/ and click/select your preferred font. At the right side of your font, highlight and copy the html page of your selected font.
Go to your Bubble App Settings – General – Custom Fonts – Under custom fonts, type your font name and paste html page on CSS File Path and click Add Font.
In order to reset your password in email, you should create a button reset password and create a workflow on it states that if you clicked this button- Account – Send Password to Reset Email (Email to Reset: Email’s value; Subject: your password reset; body: your message stating your request to reset your password.)
If you want to customize a token and don’t want to send an email, check the box behind it and create another action that send email: Body: Website Home URL: <reset password page name>?reset=Result of Step 1 (Send Password Reset)
Geo Plugin is the easiest way for you to geolocate your visitors, allowing you to provide geo localized content more relevant to their geographical location. In order to setup Geo Plugin in your Bubble Apps you should:
First, install Geo Plugin in your Bubble Apps.
In order to get the current users IP Address, install Ipiphy Plugin.
Add text element and in a text, get data from an external API. In an API Provider, search for IP Info – Get Geo From IP, the IP Address of Current User is automatically display. Then you can add your preferred info to display on your IP such as city, region, country, location, postal. In IP Address Path, Get data from an external API provider. Get current user’s IP Address and preview your apps. Use/Click inspector from debugger, click on text and evaluate text in properties. Click on the general part of Geo from IP City to display all the values of IP address information fields to display everything.
Back to your plate and add a Map and Searchbox element. In Searchbox, choose Geographic Places as choice of styles. Default Value: IP info – Get Geo from IP Location. The Map Address should be Searchbox Value. Your all set. Preview your Apps to see if it’s working.
RSS stands for Really Simple Syndication. It refers to files easily read by a computer called XML files that automatically update information. This information is fetched by a user’s RSS Feed reader that converts the files and latest updates from website into an easy-to-read format.
To add RSS Feed in your Bubble App you should:
– Install RSS plugin
– Insert group element in your index page.
Type of Content: Get Feed
Data Source: Get data from external API
API Provider: RSS Get Feed
Get your URL of your own and paste it on feed URL path.
Inside a group element. Input text element – dynamic data – Parents Group Get Feed RSS Channel’s Title.
-Insert Repeating Group below the title group element
Type of Content: Get Feed RSS Channel’s Item
Data Source: Get Data from External API
API provider: RSS Get Feed
Data Source: RSS Get Feed Channel’s Item
Input data on a Repeating Group by a text element: text Current Cells Get Feed RSS Channel’s:
Title and Publication Date
And a link element, Current Cells Get Feed RSS Channel Item’s Link
Link Destination: External URL
Destination URL: Current Cells Get Feed RSS Channel Item’s Link
Preview your app to check if it is working.
Install Google Places Plugins in your Bubble App. Google Places is a free plugin by AirDev to obtain information for various attraction given a location or string input. In order to get the API keys of Google Places Plugin go to https://console.developers.google.com/ headed to API Library. Search for Google places API and grab its API keys. Copy it and paste it on your Bubble App plugin page.
Instead of using Searchbox, Insert an input text element and a repeating group below it.
In a repeating group:
Type of Content: Google Place
Data Source: Get Data from an External API
API Provider: Get Google Place
Search Type: Text Search
Query: Input Text’s Value
Type: Choose your preferred location (café)
Add text to a repeating group:
Current Cells Google Place’s Name
Current Cells Google Place’s Address
Run your apps and see if it is working. Then you can add design on it
Braintree is a full stack payment platform that make it easy to accept payments in your apps or website. It is currently a division of PayPal and provides mobile and web payment systems for companies. Example of companies that uses Braintree in their tech stacks are Uber, Airbnb and Accenture.
In able to integrate your Braintree in your Bubble App:
Sign up an account on https://www.braintreepayments.com/ . Fill up the form and click Try Sandbox and you will receive an email for the confirmation of account. Save this email for the important links.
Once you have a sandbox account, install Braintree plugin in your Bubble App. Then go to https://sandbox.braintreegateway.com/ . Go to Settings Icon – Click API. Copy the keys and paste it on your Plugin Settings in your App.
Make sure to run the page as user. Go to Data Interface – App Data – All Users – run this page as users’ email.
Then add button to your page.
Example: Charge $100 Button.
Workflow: When the button is clicked – Payment – Charge the Current Users
Payers Email: Current Users’ email
Amount: $100
Note: When you run your app and you click a charge button, PayPal generator form is loading up and there is a two option where you can directly login your PayPal account or you may input user’s card number and its expiration date. Just choose your preferred option and click Pay Now Button and there is a success message that your card was successfully charge. You may check your transaction in your sandbox dashboard account.
Trello is a collaboration tool that organizes your project into boards. Trello tells you what is being worked on, who’s working on, what and where is something is in a process. Trello Plugin in bubble is a free plugin by Coaching No code Apps whereas you can create board, cards, team members, board lists, labels and get card in the list. In able to integrate it to your bubble apps:
Sign up for Trello Account https://trello.com/
Install Trello Plugin on your Bubble App, to get your API keys go to https://trello.com/app-key . At the top of the page, there is a generated API key. Copy this API key and paste it on all key fields in your Bubble Plugin Settings.
Go back to https://trello.com/app-key and generate token. Copy and paste it on all token path fields on your Bubble plugin Settings App.
To display a list of team boards, boards list and cards in your visual element, drag Repeating Group to a page
Type of Content: Get Board
Data Source: Get Data from an External API
API Provider: Get Boards
Team Id: (It may be static or you may set it in your Trello account URL)
Add text in your Repeating Group: Current Cells Get Board’s Name.
In creating a board using in action provided by a plugin:
Create an input text Board Name and a Multiline Input for Board Description.
Add Create Button and Set a Workflow. When button is clicked – Plugins – Trello – Create Board
Name: Input Board’s Name
Description: Multiline Input’s Description
- Reset relevant inputs
Install Slick Slideshow Plugin in your account. Click slideshow in your visual element and drag it in your boiler plate. And begin to upload more images.
Clean URL is easy to share, easy to remember and SEO friendly. In order to have clean URL, bubble has different ways such as:
On your Bubble App page property editor, there is a Type of Content and a capability to define a Field for Readable URL. You can create a button and have a workflow that when it is clicked, Navigation – open an external website, Destination: Website Home URL <Type your page name> / <type your slug>
Or simply set your slug on your existing database entry and go to your workflow; Navigation – open an external website – Destination: Website Home URL <Type your profile page> / <Dynamic Data – Current User’s Slug>
In working with retrieving campaigns, sending a campaign immediately and adding a subscriber, a user in your application to a list in your MailChimp account so that is all connected and you can manage everything directly from your app.
The first thing you want to do, is logged in to your Mailchimp account https://us1.admin.mailchimp.com/ . Head over to the account and head over to extras, click API keys. This allows you to create or copy keys that you want to use with any external applications or plugins. Copy this key and paste it to your Mailchimp Extended Plugin Settings. Add apikey<space>paste api keys. Copy same keys in both strings.
The next thing is your MailChimp data center. Go to URL of any page in your MailChimp account.
The Tinder-like Pile element lets you swipe left and right on a list of Things like the popular dating app, Tinder. This plugin is great for mobile-focused apps with a matching feature. That’s why the Tinderpile plugin can be such a helpful addition to your app. Not only will it give your pages more engaging functionality, but it’ll also give users something they’re already familiar with, which can greatly increase the chances they’ll stick with using your app.
Data Type for User:
Address = geographic address
Admin = yes/no
Full name = text
Job title = text
Matched users = List of Users
No Matched Users = List of Users
Profile Picture = image
Go to your Bubble App page.
Plugin-Install Plugin- Search for “Tinder-Like Pile” and install and click done.
Go to design – Drag Tinder Pile on your page – Property Editor:
Type of Content: User
Data Source: Search for User: filtered – Unique id <> Current User’s Unique id
Image Field: Profile Picture
Create a Group to display User Information.
Type of Content: User
Data Source: Tinder Pile User’s current slide
Create a workflow. Element – Tinder Pile User’s card is swiped right – Data (Things) – Make changes to User – Matched users add Tinder Pile current slide. (Repeat this workflow in swiped left = No matched users.)
Create a repeating group for a Matched user and no matched user to display the list of users.
https://www.youtube.com/watch?v=zGh5MkgwBc4&list=PL8fkQddJmh-gb4RXGSrgtDCA6XeLxSWpw&index=13
When you send emails, for example (or when users send emails from your app), you can address people by name or send personalized information to multiple people at once, without having to manually go in and edit each individual email.
So, instead of having cookie-cutter, robot-sounding emails sent to multiple recipients, you can write to them like the individual people they are. It’ll certainly be appreciated.
Beyond personalizing for a better user experience, though, being able to send individualized emails to groups of people at once is also great for things like reporting, when certain people need specific information, but you don’t want to manually send a bunch of emails.
Steps on how to personalize email that can send to multiple recipients:
Go to App Settings in your Bubble Account – API – Make sure that “This App exposes a workflow API” is checked.
Go to API Workflow in your Bubble App Search. – Click here to add an endpoint,
Endpoint Name:
Send Email:
Expose as public endpoint
Add a Parameter:
Key: recipients Type: User
Key: sender Type: User
Then create a send email action:
To: Recipient’s email
Sender Name: Sender’s Name
Input your Subject and body message.
On the button Send Invite. Create a workflow when this button is clicked – Custom Event – Schedule API Workflow on a list:
Type of Things: User
List to Run on: Search for user
API Workflow: send email
Scheduled Date: Current Date/Time
Interval: 10
Recipient: This User
Sender: Current User
Note: Using the API Workflow requires a paid plan. This couldn’t work on free plan.
Server logs are great for troubleshooting issues because they essentially give you a full overview of your app’s history. You can inspect usage, pinpoint problem areas, and know exactly where to fix any issues.
Everyone loves a good-looking app, but there’s way more going on than the design. Your Bubble app’s server logs are one of those behind-the-scenes aspects to be aware of once you launch and have users on your app.
Go to Bubble App Logs – Server Logs – Search for your log time and date.
The ability to scheduled Backend workflow is only available on paid plans.
One of the most powerful aspects of any app is its ability to run automatically, so any action —both in the present and future — can happen seamlessly and without constant, manual work.
In Bubble, you can schedule workflows to happen in the future at a certain date and time. This applies to individual workflows, lists, and more, all with a single action. There’s a key part of this process, though, that confuses a lot of Bubblers…
Every time you schedule a workflow, Bubble generates an ID for it. You should always save this ID so you can look it up later in your Scheduler (Logs / Scheduler) and/or potentially cancel it in a separate workflow at some point.
Progress bars give users a reason to keep going. If they’re 50% or 75% of the way there, they might as well finish, right? To create progress bars in your forms and pop ups:
- Go to Bubble App Plugins – Install Progress Bar Plugin – Click Done
- The Progress Bar Element will be visible in Visual Element. Drag it in page.
Add a custom state: percentage (number).
Percentage: Progress Bar Percentage
- Create a Button Start
- Add an Event – General – Page is Loaded – Element Action – Set States:
Element: Progress Bar
Custom State: Percentage
Value: 0
- Back to Design – Click Button Start – Create a Workflow – Element Actions – Set State
Element: Progress Bar
Custom State: Percentage
Value: 10
- Navigation – Add a pause before next action
Copy and paste the two workflows until you reach a 100%.
To convert the pages of your apps to a printable format, you can use Bubble’s SelectPDF plugin.
– Go to your Bubble App Plugins – Install Select PDF Plugin – Click Done.
Once a plugin is installed, you need to enter a license key to use SelectPDF plugin.
Go to https://selectpdf.com/api/RequestKey.aspx . Request demo key for online Html to PDF Rest API. It is a free trial valid for 1 week and can be used for testing purposes only with limited to 200 conversion usage.
Grab and copy demo key and paste it on Select PDF plugin license key.
Go to Bubble App Plugin – Air Copy to Clipboard
Create a Button Copy Clipboard – Add an event – Plugin – Copy to Clipboard – Text to Copy: this URL
Create an alert button copied and a text input to paste your copied URL.
Most API are using API in some way and some points. API is the things that allows you to connect your App or another app platforms so the two can communicate. Some Apps are fully dependent on API.
This are the checklist that you consider in using API:
- You have an access to API. You have to be on paid plan to have access on API.
- Pricing for the API. Know the plans, limitations, is it open or is it free?
- Look for the access of API Documentations/Guidebook
- Check for authentication method wherein you may find an API key. But some API doesn’t have authentication method involve.
One of the most common needs I’ve found across nearly every type of app is the ability to count or track time in some way.
It’s useful for invoicing, timed quizzes, auctions, sales, countdowns, stopwatches, and so much more…You can find a use for timers in pretty much any app you can think of.
When it comes to adding a timer or clock as a feature in your own app, though, things can get tricky fast, especially if you’re not really a “math person.”
Clock formulas:
- DD = Parent group’s date – clock’s current date/time :format as seconds / 60 / 60 / 24 modulo 365 – 0.5 :rounded to 0
- HH = Parent group’s date – clock’s current date/time :format as seconds / 60 / 60 modulo 24 – 0.5 :rounded to 0
- MM = Parent group’s date – clock’s current date/time :format as seconds / 60 modulo 60 – 0.5 :rounded to 0
- SS = Parent group’s date – clock’s current date/time :format as seconds modulo 60
The outlook plugin available in bubble marketplace is a good example of a tool that adds more convenience to user’s lives with it. They can do things like sign up with their Microsoft Accounts and connect to their Outlook email, contacts and calendar events.
In order to integrate your Cotter Magic Link to your Bubble App, you need an account to their website. Go to https://dev.cotter.app/ to create an account. Once you have an account. Make sure to create a new project and encode the required fields that given and grab the API Keys.
In your Bubble App, create two pages:
A Log in page where the users will see a log in form and a Protected page which contains protected contents that are only accessible in the current user.
Install Cotter Paswordless Login plugin in your Bubble and paste your API keys you get from Cotter’s dashboard. Once you’ve done that, you should be able to see Cotter Login Form under Input Forms.
Drag the plugin into your page. You should be able to see the login form.
And go to Protected page and drag Cotter Page Shield to only allow the current user see its own content.
This is very doable in Bubble. Below is a basic structure to get you started, but you’ll need to modify it to your needs:
Database
You’ll need a data type to save a score value that is unique to the quiz and quiz taker. Depending on how complex your scoring system is, an “Answer” data type could hold a score value per answer and/or an overall “Submission” type could hold the summed-up score. So, you’ll need data types like the following:
Quiz
– Name (text)
– List of Questions (Question, list)
Question
– Text (text)
– Quiz (Quiz)
Submission
– Respondent (User)
– Score (number)
– Quiz (Quiz)
– List of Answers (Answer, list)
Answer
– Value (this field type just depends on what kind of answer … text, number, yes/no, etc.)
– Submission (Submission)
– Score (number)
So, each Answer would save its individual score, and the Submission would be the final score. Or, if you don’t need to keep track of individual answers, you could do away with that type and just have the Submission and update the Score there every time an answer is given.
Workflows
This also depends on how you’re designing the quiz, but I’d recommend using a repeating group to display the Quiz’s list of questions so that for each question a unique Answer can be generated and/or you can be tabulating the Submission’s final score after each Answer gets an entry (number, text, yes/no, etc).
There are quite a few ways to do this and the system can really be as simple or complex as you need, but hopefully, this gets you moving in a forward direction. Start small. Don’t overthink it. Create your data types simply first, get the questions to display, then play around with workflows to save/generate data as you need. Hope this helps!
Still have questions?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.