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 Markdown	Cuurrent Markdown	Use Case	Styling effects
[b: textcontent]	**Bold**	For Emphasis	For Bold
[i: textcontent]	*Italic*	For Emphasis	For Italics
[bi: textcontent]	***Bold&Italics***	For Emphasis	For Bold and Italics
/n	/n	For Segregation	For new line
[w: textcontent]	<span color="white">Hello World</span>	For colored text	For white color
-	<span color="#ANYHEXCODE"> Hello world </span>	For colored text	Supports any color by hexcode
[d: textcontent]	<span color="primary">Hello World </span>	For colored text	EPNS Primary colored Text
[s: textcontent]	<span color="secondary">Hello World </span>	For colored text	EPNS Secondary colored Text
[t: textcontent]	<span color="tertiary">Hello World </span>	For colored text	EPNS Tetiary colored Text
[u: textcontent]	[PUSH website](https://push.org)	For URL’s	Underlined, Red Colored Text
[timestamp: timestamp_in_epoch]	[timestamp: timestamp_in_epoch]	For timestamp	Required 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).