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.