Skip to main content

Styling notification content overview

Designing rich notification for Push closely follows the markdown standards. Below is a live example of what is possible with push notifications currently via Push Protocol.

How to design content rich notifications?

Push Notification markdown live playground

// DO NOT FORGET TO IMPORT LIBRARIES// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { NotificationItem } from @pushprotocol/restapi;
function App(props) {
  return (
    <>
      <h2>Markdown Notification to style your notification as per your need</h2>
          <NotificationItem
           notificationTitle={"Title"}
           notificationBody={"[Hello World](https://github.com) ***Bold&Italic*** \n **Bold** \n *Italic* \n <span color='green'>green text</span> \n [PUSH website](https://push.org) \n [timestamp: 1699347011]"}
           image={"https://www.youtube.com/watch?v=R8nsAhyrvTI"}
           chainName={"ETH_TEST_GOERLI"}
           icon={"https://push.org/assets/pushIcon.svg"}
           app={"PUSH"}
          />
    </>
  );
}
LIVE PREVIEW

Supported markdown

These are some of the styles currently supported by Push

Previous MarkdownCuurrent MarkdownUse CaseStyling effects
[b: textcontent]**Bold**For EmphasisFor Bold
[i: textcontent]*Italic*For EmphasisFor Italics
[bi: textcontent] ***Bold&Italics***For EmphasisFor Bold and Italics
/n/nFor SegregationFor new line
[w: textcontent]<span color="white">Hello World</span>For colored textFor white color
-<span color="#ANYHEXCODE"> Hello world </span>For colored textSupports any color by hexcode
[d: textcontent]<span color="primary">Hello World </span>For colored textEPNS Primary colored Text
[s: textcontent]<span color="secondary">Hello World </span>For colored textEPNS Secondary colored Text
[t: textcontent]<span color="tertiary">Hello World </span>For colored textEPNS Tetiary colored Text
[u: textcontent][PUSH website](https://push.org)For URL’sUnderlined, Red Colored Text
[timestamp: timestamp_in_epoch][timestamp: timestamp_in_epoch]For timestampRequired to be last component in description of the payload

Contribute

We believe notifications or any sort of web3 communication is a community wide effort and we invite everyone to come, discuss and better it for everyone via Push Improvement Proposals (PIPs).