announcekit-react

Use AnnounceKit widgets in your React App

Usage no npm install needed!

<script type="module">
  import announcekitReact from 'https://cdn.skypack.dev/announcekit-react';
</script>

README

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

Visit https://announcekit.app to get started with AnnounceKit.

CodeSandBox Demo

Documentation

Installation

yarn add announcekit-react

Usage

import 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>
    );
  }
}

Props

  • 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
  • labels - In case you want to filter and display posts under a specific label or tag.
  • user_token - JWT setup: https://announcekit.app/docs/jwt
  • 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.

API

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>
    )
}