.gif)
Master the integration of Bubble.io with Firebase Cloud Messaging using our step-by-step guide. Get started on effective app management now!
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution developed by Google that lets you reliably deliver messages at no cost. Previously known as Google Cloud Messaging, FCM allows you to send notifications and messages to users across various platforms such as Android, iOS, and web. It can be used to notify users of new content, or to send data to your application. FCM also provides topic messaging, which allows you to send a message to multiple devices that have opted in to a particular topic.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
Step 1:
Start by setting up your Firebase account if you haven't already done that. Go to the Firebase website and click Get Started. Follow the steps to create a new Firebase account.
Step 2:
From your Firebase dashboard, click on Go to console on the top right corner then click Add Project. Name your Project and accept Firebase terms. Wait for the project to be created.
Step 3:
Once the project has been created, you will be redirected to your Firebase Project Dashboard. From here, click on the cogwheel icon on the left side near Project Overview and then on Project settings.
Step 4:
In the General tab, scroll to the Your project section, find your Web API Key and save it for later.
Step 5:
Switch to the Cloud Messaging tab. Under the Project Credentials section, note down the Server key and Sender ID, we'll use these later.
Step 6:
Next, go to your Bubble dashboard, click on New App and give your app a name.
Step 7:
From your app dashboard on Bubble, go to Plugins tab, click on Add plugins and search for Firebase. Select the Firebase plugin by Copilot and click Install.
Step 8:
After Installing the Firebase plugin, click on it to open the Plugin settings. In the API Key section, put the Web API Key that you saved from your Firebase Account.
Step 9:
Now head over to the Settings -> General in Bubble dashboard. Scroll down until you see the Service Workers section. In here, you will need to enable Use service workers for network requests and click Save.
Step 10:
Back to Plugins tab on Bubble, click on Firebase by Copilot. Select the Add/Modify service workers action. In Firebase Sender ID, type in the Sender ID you saved earlier from your Firebase Cloud Messaging settings, and in Pre-cache Path(s) field, type in /index.
Step 11:
Go back to Firebase console, click on the Cloud Messaging on the left side of the panel. In here, you can start setting up how and what messages you wish to send to your Bubble app users. You can do that by either sending a message directly from this console, or by setting up an API on Bubble to send a POST request. Be sure to use the Server Key you saved earlier as your Authorization Key in your Header.
Step 12:
Now you can use Bubble to trigger Firebase Cloud Messaging by POST API request in your workflows within your app. These notifications will be received by users who have given your website the permission to send them notifications.
That's it! Your Bubble app is now integrated with Firebase Cloud Messaging. Firebase Cloud Messaging allows you to send notifications to your Bubble app users even if the browser is currently not opened. The notifications will appear in the user's notification tray. This allows you to engage and retain users effectively. Enjoy the features of Firebase in Bubble with this integration.
Scenario: An e-learning platform wants to engage users for an update in its course inventory. The platform uses Bubble.io for programming and designing the interactive user interface. They want to automatically notify all users who might be interested in new course additions using push notifications.
Solution: Integrating Bubble.io with Firebase Cloud Messaging
Application Development: The e-learning platform uses Bubble.io to design and program interactive user interfaces for desktop and mobile versions.
Setting Up the Integration: The platform installs the Firebase Cloud Messaging plugin on Bubble.io and integrates it with their Firebase project using the service account key.
User Notification Workflow: They set up workflows in Bubble.io that is triggered by a specific event (e.g., a new course is added).
Notify Users Workflow: When a new course gets added, the workflow sends a predefined message, using Firebase Cloud Messaging, to all users who've shown interest in similar categories before.
The notification data (e.g., course name, course category, brief description) is automatically sent to Firebase Cloud Messaging via Bubble.io using the Firebase Cloud Messaging plugin. The notification is then pushed to the user's devices.
User Engagement: Users clicking on notifications are directed to the specific course page where they can access more details. This leads to increased user engagement and boosts course enrollments.
Monitoring and Analytics: The integration allows seamless tracking of notification clicks and user engagement. This data helps in studying the efficiency of the campaign and planning future updates.
Benefits:
Efficiency: Automating the notification process increases user engagement and course enrollments by timely notifying users.
Centralized Data: All user data, notification data, and tracking is stored and managed in Firebase, providing a single source of truth for the platform.
Instant Updates: Instant notifications ensure users catch on updates in real-time, increasing their interaction with the platform.
Data Insights: The platform can analyze the performance and outcome of push notifications, gaining insights into user engagement and platform usage. By integrating Bubble.io with Firebase Cloud Messaging, the e-learning platform can efficiently notify users and drive engagement on the platform.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
