The Notification Component is a core part of delivering notifications to your users. The Belltastic Notification Component is a Web Component that is supported by all major browsers. It is a simple in-app inbox for your users to receive their notifications. It is easy to get started, but it has a number of configuration options for your specific use case.

Let's install it first!

Installing the component

Installation is as easy as copy/pasting a code snippet to your app.

Head to your list of Projectsopen in new window, select a project and go to its settings. You will notice a code snippet similar to this:

<script src="" defer></script>

Property Reference

There's a number of additional properties available for this component to provide additional details about the user. Here's a full list of the properties of this component:

api-keyyesThe API key to your Belltastic Project. Cannot use account-level API tokens.
project-idyesThe ID of the Belltastic Project. Must be the same for which the API token is for.
user-idyesThe user ID from your app. This can be an incrementing ID, an email, UUID, or any other string of up to 255 characters. Multi-tenancy is supported with Compound IDs.
user-hmacnoThe HMAC hash for this user. It is only required when enabled in the project settings. You can learn more about it on the HMAC documentation.
user-namenoThe name of your user. It will make it easier to identify this user within Belltastic dashboard.
user-emailnoThe email of your user. It is required in order to send email notifications to this user.
user-avatar-urlnoThe avatar of your user. At the moment, this only shows up in Belltastic dashboard to help you identify the users easier.