![](https://framerusercontent.com/images/zxNuAqdSqxLwW4r4qpU6Cwo.png)
Simon Jenner
Thursday, 1 December 2022
![](https://framerusercontent.com/images/jDPsBvEqaHQKA5sXm4vVsh4g.png)
Guide on how to create notifications functionality on your app via Sendgrid
Posted in:
No-Code
Lead Owner: Pablo
(Responsible for updating the document & helping out with any questions)
Bubble Editor Link: Click here
Screenshot of Notification Mockup (not designed):
Step 1: Create a data type
Additional Notes
“User”: Lets you easily display all of a user’s notifications with a simple Search For.
“Read”: Allows you to track which notifications have already been seen by the related user. By using this you can then show an “unseen” marker when this is “No”.
Step 2: Set up Sendgrid plugin
Additional Notes
Ensure that you have the correct plugin, there are a lot of SendGrid plugins for Bubble, but most don’t have the exact functionality we’re after. You want the one from Copilot with a Green Circle icon.
Ensure that you add “Bearer” before the API key in the Authorization (shared headers) field, otherwise the plugin will not work correctly.
Step 3: Create the UI
Additional Notes
There are many ways to implement notifications into your app, I have chosen one of the most common methods, an icon in the site’s header.
You can attach almost anything to these notifications, you’ll just need an appropriate data field to support it.
Step 4: Create a new notification
Additional Notes
You can attach any relevant data at this stage, just make sure that the required data is available to use as a dynamic item.
The Title and Content can be dynamically generated too, such as the name of a product or the title of a newsletter.
Step 5: Send notifications through SendGrid
Additional Notes
Ensure that the template ID starts with “d-”, as this shows it is a dynamic template. This allows for the easy insertion of data from Bubble.
The client will likely provide the dynamic parameters in {{double braces}}. This is how SendGrid formats these items, but when sending data through the plugin in Bubble, be sure to remove the braces around the word, or else it won’t send the data through correctly. E.g {{title}} -> title or {{Content}} -> Content.
Launch Your Startup Fast and Affordably! Our no-code approach is perfect for non-tech founders. With a simple 3-step process: START, LAUNCH, GROW, join over 1400 startups we've successfully launched. Start your journey today!
Join