Adding MagicBell to Your Product

Let's move on to the fun part and add MagicBell to your product. The notification inbox is very flexible and offers dozens of customizations. It will look something like this:

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      placement="bottom-start"
      closeOnClickOutside={false}
      {...props}
    />
  )}
</MagicBell>

Depending on your tech stack, there are several choices. Let's explore them.

MAGICBELL_API_KEY

JavaScript (browser)

If you are building a web-based product, you can grab the latest MagicBell build for the browser via CDN. You will get a fully working notification inbox out of the box.

For example, to display the notifications for Mary, whose email was mary@example.com, copy and paste the following code before the closing body tag:

<div id="notifications-inbox" />
<script type="text/javascript">
  // prettier-ignore
  (function(i,s,o,g,r,a,m) {i['MagicBellObject'] = r;(i[r] =i[r] ||function() {
  (i[r].q = i[r].q || []).push(arguments);}),(i[r].l = 1 * new Date());(a = s.createElement(o)), (
  m = s.getElementsByTagName(o)[0]);a.async = 1;a.src = g;m.parentNode.insertBefore(a, m);
  })(window,document,'script','https://unpkg.com/@magicbell/embeddable/dist/magicbell.min.js','magicbell');

  var target = document.getElementById('notifications-inbox');
  var options = {
    apiKey: 'MAGICBELL_API_KEY',
    userEmail: 'mary@example.com',
    height: 500,
  };

  magicbell('render', target, options);
</script>

Your MagicBell will be rendered in the notifications-inbox div. You can place it wherever you want MagicBell to appear in your app.

React

You can get the same out-of-the-box experience with our React SDK. However, unlike the previous approach, you can also build a custom UI using the components from our React library and your own.

Start by installing our React package:

npm install @magicbell/magicbell-react
# Or
yarn add @magicbell/magicbell-react

Then add it to your app:

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userEmail="mary@example.com">
      {(props) => <FloatingNotificationInbox height={500} {...props} />}
    </MagicBell>
  );
}

Check our React guides to know more about how you can customize the default notification inbox or build your own. You can tailor it to your needs as much as you want to.

Vue.js

While we don't offer a native Vue library, you can use the ESM build to render a MagicBell in your app easily.

You can either grab it from our CDN or install the embeddable package from NPM.

npm install @magicbell/embeddable
# Or
yarn add @magicbell/embeddable

After grabbing the library, you can import the renderWidget function to render the notification inbox.

Vue.js
<template>
  <div ref="notifications">Notifications</div>
</template>

<script>
  import { renderWidget } from '@magicbell/embeddable/dist/magicbell.esm.js';

  export default {
    name: 'Notifications',
    mounted: function () {
      const options = {
        apiKey: 'MAGICBELL_API_KEY',
        userEmail: 'mary@example.com',
      };
      renderWidget(this.$refs.notifications, options);
    },
  };
</script>

If you prefer to use the CDN bundle, replace the import statement (line 6) with

import { renderWidget } from 'https://unpkg.com/@magicbell/embeddable';

Angular

You can also use the ESM build to render a MagicBell in your Angular app easily.

You can either grab it from our CDN or install the embeddable package from NPM.

npm install @magicbell/embeddable
# Or
yarn add @magicbell/embeddable

After grabbing the library, you can import the renderWidget function to render the notification inbox.

Angular
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { renderWidget } from 'https://unpkg.com/@magicbell/embeddable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('notifications') notifications: ElementRef;

  ngAfterViewInit() {
    renderWidget(this.notifications.nativeElement, {
      apiKey: MAGICBELL_API_KEY,
      userEmail: 'mary@example.com',
    });
  }
}

If you prefer to use the CDN bundle, replace the import statement (line 2) with

import { renderWidget } from 'https://unpkg.com/@magicbell/embeddable';

Building a custom UI in any framework

If you use any other JavaScript framework, check our core package, it handles the network calls and real-time updates and build your UI on top of it.

We'll be adding more SDKs soon.