Styling

ThemeOverrides

The theme parameter is of ThemeOverrides interface. You can customize pretty much every element of your notification center.

For example, if you want to change the primary colors of your notification feed,

import {Engagespot} from '@engagespot/react-component';

const theme = {
    colors: {
        colorPrimary: "#0971f1";
    }
}

<Engagespot
  apiKey = "ENGAGESPOT_API_KEY"
  userId = "youruser@example.com"
  theme = {theme}
/>

View the Complete Theme Reference.

tip

You can check out examples in Codesandbox to learn how to customize different elements of the notification inbox component.

Custom UI

To enhance the visual presentation of your notifications, you can utilize several custom rendering options in the Engagespot component. These props allow you to tailor the appearance and content of various elements within the notification panel.

Available Custom Rendering Options

• renderFooterContent(customRenderFn)
  A custom function to render footer content in the panel, allowing for links or other specific content.

• renderNotificationIcon(customRenderFn)
  A custom icon renderer for the main notification icon, enabling personalized visuals for your notifications.

• renderEmptyPlaceholderImage(customRenderFn)
  Renders a custom image when no notifications are available, helping to maintain a consistent design even in empty states.

• renderNotificationContent(customRenderFn<customNotificationContentType>)
  Customize the display of each notification item's content, providing flexibility to include various types of information.

• renderNotificationBody(customRenderFn<customNotificationContentType>)
  Offers granular control over the text or components within the notification body, allowing for tailored messages and layouts.

Example Usage

Here’s how to implement these custom rendering options within the Engagespot component:

import { Engagespot } from '@engagespot/react-component';

const CustomFooter = () => <div>Custom Footer Content</div>;
const CustomIcon = () => <img src="custom-icon.png" alt="Notification Icon" />;
const CustomEmptyImage = () => (
  <img src="no-notifications.png" alt="No Notifications" />
);
const CustomNotificationContent = ({ notification }) => (
  <div>{notification.message}</div>
);
const CustomNotificationBody = ({ body }) => (
  <p style={{ color: 'blue' }}>{body}</p>
);

<Engagespot
  apiKey="ENGAGESPOT_API_KEY"
  userId="youruser@example.com"
  theme={theme}
  renderFooterContent={CustomFooter}
  renderNotificationIcon={CustomIcon}
  renderEmptyPlaceholderImage={CustomEmptyImage}
  renderNotificationContent={CustomNotificationContent}
  renderNotificationBody={CustomNotificationBody}
/>;

With these options, you can fully customize the UI of your notification panel to align with your application's design and user experience requirements.

Theme Reference

interface ThemeOverrides {
    colors: {
        brandingPrimary: string;
        colorPrimary: string;
        colorSecondary: string;
    };
    panel: {
        boxShadow: string;
        width: string;
        height: string;
        borderBottomLeftRadius: string;
        borderBottomRightRadius: string;
        borderTopLeftRadius: string;
        borderTopRightRadius: string;
        arrowSize: string;
        arrowInset: string;
    };
    feed: {
        background: string;
        placeholderTextColor: string;
        height: string;
        placeholderTextSize: string;
        placeholderMargin: string;
        placeholderFontWeight: string;
    };
    feedItem: {
        border: string;
        background: string;
        notificationDot: string;
        hoverBackground: string;
        headerColor: string;
        descriptionColor: string;
        dateColor: string;
        placeHolderBackground: string;
        placeHolderGradient: string;
        height: string;
        padding: string;
        placeholderTextSize: string;
        notificationDotSize: string;
        imageSize: string;
        imageRadius: string;
        hoverTransition: string;
        textContentPadding: string;
        textContentMargin: string;
        headerFontWeight: string;
        headerSize: string;
        headerPadding: string;
        descriptionSize: string;
        descriptionPadding: string;
        dateSize: string;
        menuMargin: string;
    };
    notificationButton: {
        background: string;
        hoverBackground: string;
        iconFill: string;
        floatingButtonShadow: string;
        iconSize: string;
        outline: string;
        margin: string;
        padding: string;
        borderWidth: string;
        normalButtonRadius: string;
        floatingButtonRadius: string;
        transition: string;
    };
    unreadBadgeCount: {
        background: string;
        color: string;
        borderRadius: string;
        fontSize: string;
        inset: string;
        size: string;
    };
    dropdown: {
        iconFill: string;
        background: string;
        hoverBackground: string;
        menuBackground: string;
        menuShadow: string;
        menuItemTextColor: string;
        menuItemHoverBackground: string;
        iconWidth: string;
        iconHeight: string;
        margin: string;
        padding: string;
        borderWidth: string;
        outline: string;
        transition: string;
        menuBorderRadius: string;
        menuItemPadding: string;
    };
    jumpToTop: {
        background: string;
        iconFill: string;
        shadow: string;
        iconSize: string;
        inset: string;
        borderRadius: string;
        padding: string;
        margin: string;
        transition: string;
    };
    header: {
        fontColor: string;
        closeButtonBackground: string;
        fontSize: string;
        fontWeight: string;
        height: string;
        padding: string;
        closeButtonOutline: string;
        closeButtonPadding: string;
        closeButtonFontSize: string;
        closeButtonMargin: string;
        closeButtonColor: string;
    };
    footer: {
        background: string;
        fontColor: string;
        preferenceButtonColor: string;
        border: string;
        preferenceButtonHoverBackground: string;
        fontWeight: string;
        height: string;
        padding: string;
        fontSize: string;
        linkMargin: string;
        linkSize: string;
        preferenceButtonMargin: string;
        preferenceButtonSize: string;
        preferenceButtonPadding: string;
        preferenceButtonHoverTransition: string;
        linkRadius: string;
    };
    preference: {
        fontColor: string;
        background: string;
        height: string;
        fontWeight: string;
        padding: string;
    };
    preferenceModal: {
        overlayBackground: string;
        headingColor: string;
        background: string;
        closeButtonColor: string;
        textPrimaryColor: string;
        textSecondaryColor: string;
        buttonPrimaryColor: string;
        buttonPrimaryBackgroundColor: string;
        buttonPrimaryHoverBackgroundColor: string;
        buttonSecondaryColor: string;
        buttonSecondaryBackgroundColor: string;
        buttonSecondaryHoverBackgroundColor: string;
        overlayOpacity: string;
        height: string;
        backdropFilter: string;
        borderRadius: string;
        padding: string;
        textAlign: string;
        headerMargin: string;
        headerFontSize: string;
        closeButtonSize: string;
        textPrimaryMargin: string;
        textPrimaryFontSize: string;
        textSecondaryMargin: string;
        textSecondaryFontSize: string;
        primaryButtonFontWeight: string;
        primaryButtonPadding: string;
        primaryButtonBorderRadius: string;
        primaryButtonMargin: string;
        primaryButtonTransition: string;
    }
}