The easiest way to use AnnounceKit widgets in your React App.
Visit https://announcekit.app to get started with AnnounceKit.
yarn add announcekit-reactimport React from "react";
import AnnounceKit from "announcekit-react";
class App extends React.Component {
render() {
return (
<div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<AnnounceKit widget="https://announcekit.co/widgets/v2/3xdhio">
<span>Whats new</span>
</AnnounceKit>
</li>
</ul>
</nav>
</div>
);
}
}widget- The url of the widget. You can obtain it while creating or editing widget in AnnounceKit Dashboard.widgetStyle- You can apply CSS rules to modify / tune the position of the widget launcher.floatWidget- Set true if the widget is a Float widget.embedWidget- Set true if the widget is a Embed widget.boosters- In case you don't want to boosters appear on the page the widget is placed.lang- Language selectoruser- User properties (for user tracking)data- Segmentation datalabels- In case you want to filter and display posts under a specific label or tag.user_token- JWT setup: https://announcekit.app/docs/jwtonWidgetOpen- Called when the widget is opened.onWidgetClose- Called when the widget is closed.onWidgetResize- Called when the widget is resized.onWidgetUnread- Called when unread post count of widget has been updated.
You can use ref property to access the widget instance and call control functions
open()close()unread()instance()
function App() {
const ref = React.createRef<AnnounceKit>();
React.useEffect(() => {
ref.current.unread().then(an => console.log("unread", an));
});
return (
<div>
<button onClick={async() => await ref.current.open()}>
Click to open widget
</button>
<AnnounceKit ref={ref} widget="https://announcekit.co/widgets/v2/3xdhio">
<span>Whats new</span>
</AnnounceKit>
</div>
)
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent