Introduction
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 Projects, select a project and go to its settings. You will notice a code snippet similar to this:
<belltastic-notifications
api-key="{PROJECT_API_KEY}"
project-id="{PROJECT_ID}"
user-id="{USER_ID}"
></belltastic-notifications>
<script src="https://belltastic.com/component/belltastic.es.js" 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:
Prop | Required | Description |
---|---|---|
api-key | yes | The API key to your Belltastic Project. Cannot use account-level API tokens. |
project-id | yes | The ID of the Belltastic Project. Must be the same for which the API token is for. |
user-id | yes | The 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-hmac | no | The 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-name | no | The name of your user. It will make it easier to identify this user within Belltastic dashboard. |
user-email | no | The email of your user. It is required in order to send email notifications to this user. |
user-avatar-url | no | The avatar of your user. At the moment, this only shows up in Belltastic dashboard to help you identify the users easier. |