Adding MagicBell to your product

Let's move on to the fun part and add MagicBell to your product. Depending on your tech stack, there are several choices.

Be sure to replace MAGICBELL_API_KEY with your project's API key. Keep your API secret safe, do not initialize the notification inbox with it.

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">
  (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://assets.magicbell.com/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>
<div id="notifications-inbox" />
<script type="module">
  import { renderWidget } from 'https://assets.magicbell.com/magicbell.esm.js';

  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 ESM build and use it.

<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://assets.magicbell.com/magicbell.esm.js';

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.