Installing the widget on your site

If you have not turned on user authentication, you can just copy and paste the embed code we supply you in your page before the </body> tag. The only parameter you need to customize is userEmail:

var options = {
target: document.getElementById('notifications'),
apiKey: 'API_KEY',
projectId: PROJECT_ID,
userEmail: 'john@example.com'
};
MagicBell.initialize(options);

However, if you are ready to launch, we highly recommend enabling user authentication to your project and passing a valid userKey computed using the email address of the user and your secret key (obtained from the projects page).

var options = {
target: document.getElementById('notifications'),
apiKey: 'API_KEY',
projectId: PROJECT_ID,
userEmail: 'john@example.com',
userKey: 'computed_hmac_user'
};
MagicBell.initialize(options);

Available Options

You can pass all of the following options to the widget:

Setting

Default

Options

Role

target

null

element

An HTML element that will host the notification center.

projectId

0

integer

ID of the MagicBell project.

apiKey

null

string

API key of your MagicBell account.

userEmail

null

string

Email of the current user. Notifications will be fetched for this user.

userKey

null

string

User HMAC key (required only if auth is enabled for this project).

onNotificationClick

null

function

Callback invoked when a notification is clicked (optional).

onSeen

null

function

Callback invoked after notifications are seen (optional).

theme

'light'

'dark', 'light'

The CSS styling theme (optional).

trigger

'click'

'mouseenter', 'focus', 'click'

Specifies which type of events will trigger a tooltip to show. Separate each by a space (optional).