Localization and internationalization (i18n)

MagicBell is available in 3 languages out of the box: English, Spanish and Brazilian Portuguese. English (en) is the default one. However, you can also translate the entire UI into any language you want.

Localization

To change the default language, we expose the locale property. Set it to

  • es for Spanish
  • pt_BR for Brazilian Portuguese
import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="u001" locale="pt_BR">
      {(props) => <FloatingNotificationInbox height={500} {...props} />}
    </MagicBell>
  );
}
<script type="module">
  import { renderWidget } from 'https://assets.magicbell.com/magicbell.esm.js';

  let targetEl = document.getElementById('notifications-inbox');
  let options = {
    apiKey: MAGICBELL_API_KEY,
    userExternalId: 'u001',
    height: 500,
    locale: 'pt_BR',
  };

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

Internationalization (i18n)

MagicBell is ready to support any locale you need. To do it you need to set a name for the locale and the translations for default messages.

This is a list of all messages the UI uses:

KeyDefault value (en)
header.titleNOTIFICATIONS
header.mark-all-readMark All Read
notification.mark-as-readMark as read
notification.mark-as-unreadMark as unread
notification.deleteDelete
web-push-notifications.noticeBy enabling browser notifications, you’ll stay up to date even better.
web-push-notifications.enable-nowEnable Now
messages.empty-inboxAll clear!
We'll let you know when there's more.
Supports HTML
messages.server-error"We can’t seem to retrieve your notifications.
Please check back soon.
Supports HTML
messages.no-internet-connectionHmm, we’re unable to connect to the internet.
Please check your connection.
Supports HTML

For example, let's create a locale for our German users:

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

export default function Notifications() {
  const locale = {
    name: 'de_DE',
    translations: {
      header: {
        title: 'Benachrichtigungen',
        'mark-all-read': 'Markiere alle als gelesen',
      },
      messages: {
        'empty-inbox': 'Keine ungelesenen Benachrichtigungen',
      },
    },
  };

  return (
    <MagicBell apiKey={MAGICBELL_API_KEY} userExternalId="u001" locale="pt_BR">
      {(props) => <FloatingNotificationInbox height={500} {...props} />}
    </MagicBell>
  );
}
<script type="module">
  import { renderWidget } from 'https://assets.magicbell.com/magicbell.esm.js';

  // Your custom locale definition
  let locale = {
    name: 'de_DE',
    translations: {
      header: {
        title: 'Benachrichtigungen',
        'mark-all-read': 'Markiere alle als gelesen',
      },
      messages: {
        'empty-inbox': 'Keine ungelesenen Benachrichtigungen',
      },
    },
  };

  let targetEl = document.getElementById('notifications-inbox');
  let options = {
    apiKey: MAGICBELL_API_KEY,
    userExternalId: 'u001',
    height: 500,
    locale,
  };

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

As you can see, you can provide complete dictionary of definitions or a subset. If an entry is not found in your definition, MagicBell just renders the default message in English.

Overriding default messages

You can easily override default messages by setting the locale property when you render MagicBell. For example, this definition will change the default title to "My notifications":

const locale = {
  name: 'en',
  translations: {
    header: {
      title: 'My notifications',
    },
  },
};