Metype React
Introduction
A react wrapper around metype widgets
- Metype-Commenting-widget [ commenting platform to keep your users engaged ]
- Metype-Feed-widget [ realtime feed of all the comments on the site ]
- Metype-Contribution-Widget [ submit content to the system ]
- Metype-Reactions-Widget [ Add reactions to a realm to keep the users engaged ]
Installation
npm i @metype/components --save
Usage
import { MetypeFeedWidget } from "@metype/components";
import { MetypeCommentingWidget } from "@metype/components";
import { MetypeContributionWidget } from "@metype/components";
import { MetypeReactionsWidget } from "@metype/components";
Code Samples
<MetypeCommentingWidget
host={'<-hostname->'}
accountId={<-account id->}
pageURL={'<-url of current page->'}
primaryColor={'<-Hex code of required color->'}
className = {'<-class name for styling->}
secondaryColor = {'<-Hex code of required color->'}
fontColor = {'<-Hex code of required color->'}
windowHeight = {'<-preferable window height || defaults to the required height>'}
windowWidth = {'<-preferable window width || defaults to 100% width of the parent container>''}
fontFamily={'<-font family name for the widget->'}
fontUrl={'<-font family url for the widget->'} />
<MetypeFeedWidget
host={'<-hostname->'}
accountId={<-account id->}
primaryColor={'<-Hex code of required color->'}
className = {'<-class name for styling->}
secondaryColor = {'<-Hex code of required color->'}
fontColor = {'<-Hex code of required color->'}
publisher={'<-publisher name->'}
fontFamily={'<-font family name for the widget->'}
fontUrl={'<-font family url for the widget->'} />
<MetypeContributionWidget
host={'<-hostname->'}
accountId={<-account id->}
publisher={'<-publisher name->'}
fontFamily={'<-font family name for the widget->'}
fontUrl={'<-font family url for the widget->'} />
<MetypeReactionsWidget
host={'<-hostname->'}
accountId={<-account id->}
storyUrl={'<-story realm url->'}
storyId={'<-story realm id->}
fontFamily={'<-font family name for the widget->'}
fontUrl={'<-font family url for the widget->'} />
Support for third party login
Prerequisites:
- Login to be implemented in the parent app where metype is embedded.
- Enable third party login in the metype dashboard settings.
Usage
- Generate the jwtToken after login and pass it as a prop to the
MetypeCommentingWidget
as a string.
Code Samples
<MetypeCommentingWidget
host={'<-hostname->'}
accountId={<-account id->}
pageURL={'<-url of current page->'}
.....
jwt={jwt} />
- To login the user we call the below function with jwt being passed
this.props.jwt && window.talktype.accountUserLogin({
jwt: this.props.jwt
});
Note: The iframe is rerendered based on the jwtToken.
TODO: To be made more scalable and performant.