Use AnnounceKit widgets in your React App

Usage no npm install needed!

<script type="module">
  import announcekitReact from '';


The easiest way to use AnnounceKit widgets in your React App.

Visit to get started with AnnounceKit.

CodeSandBox Demo



yarn add announcekit-react


import React from "react";
import AnnounceKit from "announcekit-react";

class App extends React.Component {
  render() {
    return (
              <a href="#">Home</a>
              <AnnounceKit widget="">
                <span>Whats new</span>


  • 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 selector
  • user - User properties (for user tracking)
  • data - Segmentation data
  • onWidgetOpen - 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 (
        <button onClick={async() => await}>
            Click to open widget
        <AnnounceKit ref={ref} widget="">
            <span>Whats new</span>