Skip to main content
Version: 1.3.x

Your First Notification Center

This guide assumes that you've already went through the Getting Started section. If you haven't already, please check it our first and then come back here. Don't worry, we'll wait 😉

Today, we'll see how to integrate a simple notification center on your React powered website.

Let's start by creating a new create-react-app project.

npx create-react-app my-notifications-app
cd my-notifications-app
npm start

If everything went well, you'll be seening this screen below

Next step is to add engagespot to our dependency. We'll be using the component version of engagespot in this tutorial.

npm install @engagespot/react-component
info

Engagespot supports all popular modules systems namely UMD, AMD, Commonjs and ESModules. You are free to use it anywhere you want!

Let's now create a new component called Nav and add some styles to it. This will act as the navigation bar where we'll integrate the notification center later. We'll be using styled-components for styling this.

// Nav.js
import styled from 'styled-components';
import React from 'react';

const NavBar = styled.nav`
  width: 100%;
  height: 56px;
  color: white;
  border-radius: 5%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: orangered;
`;

const NavList = styled.ul`
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
`;

const NavItem = styled.li`
  display: flex;
  padding: 0 2.5rem;
  cursor: pointer;

  &:hover {
    transition: all 0.5s;
  }
`;

export default function Nav({ children }) {
  return (
    <NavBar>
      <NavList>{children}</NavList>
    </NavBar>
  );
}

Nav.NavItem = NavItem;

Now, import this component into your App.js and add a few NavItems

//App.js
import "./styles.css";
import Nav from "./Nav";
import { Engagespot } from "@engagespot/react-component";

export default function App() {
  return (
    <div className="App">
      <Nav>
        <Nav.NavItem>Home</Nav.NavItem>
        <Nav.NavItem>About</Nav.NavItem>
        <Nav.NavItem>Contact</Nav.NavItem>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Nice! Our Navigation is ready and things are really looking good. Only remaining step is to integrate our notification center. Let's import the Engagespot component for that

import { Engagespot } from '@engagespot/core';

Add it as a NavItem with the required props

<Nav.NavItem>
  <Engagespot apiKey="shiynklpz18l3ktqyy6d9a" userId="anandnew" />
</Nav.NavItem>
tip

Engagespot packages have built-in typescript support OOTB. So even if you're not using typescript in your apps, IDEs like VSCode would give you autocompletion by reading the type definitions from the package. How cool is that?

If all went well, it should look somewhat like this 👇

Here's the complete code for what we done so far.

In the upcoming chapters, we'll discuss on how to customize the looks of notification center to make it truly your own!