Skip to main content
Version: Release

Integrating Notifi React card

To see the source code, look at the Notifi SDK.

note

You will need a card config to use the Notifi React Card, which can be created in the Admin Portal. Follow the guide here to create a card config.

Installation

npm

NPM Registry

npm install @notifi-network/notifi-react

yarn

yarn add @notifi-network/notifi-react

Import the following CSS file into your component to get baseline styling:

import '@notifi-network/notifi-react/dist/index.css';

Design Guidelines​

We have design recommendations on how to best present the UI to your dapp users. Check them out here: Figma.

Tips​

  • Embed the bell icon by the wallet login section: here

     

  • There should be a state for the bell icon when connected/not connected: example of not connected state If not connected, the bell icon should be hidden.

  • Make sure that there is enough contrast between color selections.

  • Styling should be consistent with your current UI.

 

Notifi React Implementation Examples​

Notifi Example Implementation