Widget Setup

When you create a widget, you will be provided with an HTML snippet on the right side of the widget config page.

Please insert the snippet into your web pages, right above the </body> tag.

The widget code requires a container element in your page, the container will be populated with the badge or link widget according to your configuration.

For example, if you wish to add the Announcekit badge in some place in your page, simply add an html element such as:

  <div class="announcekit-widget"></div>

This element can be a div, span or whatever you wish basically.

Having this element in place, insert the Announcekit widget code provided to you in your Widget configuration page.
Note that the widget code contains a placeholder: YOUR_ELEMENT_SELECTOR. You need to set this selector to target the element you created before.

For example, given the div above, the widget code should be inserted like this:

  <!-- Announcekit widget -->
  <script>
    window.announcekit = (window.announcekit || { queue: [], push: function(x) { window.announcekit.queue.push(x); } });

    window.announcekit.push({
      "widget": "https://announcekit.app/widget/Bt3aw",
      "selector": ".announcekit-widget"
    })
  </script>
  <script async src="https://cdn.announcekit.app/widget.js"></script>

The "selector": ".announcekit-widget" ensures that this code will find the element with announcekit-widget class and insert the badge into that element.

Widget API

The Announcekit widget code creates a global valiable named announcekit. This variable allows you to interact with the widgets on your website.

The most basic function is announcekit.push(widget_config). This call is provided to you in the widget embed code. The basic structure is as follows:

announcekit.push({
  // The widget URL, this is provided by our widget code and should not be changed
  widget: "https://announcekit.app/widget/Bt3aw",
  // Target element selector for the widget interactive part.
  // For badge based widgets this is where the badge is placed.
  // For line and embed based widgets this is where the widget content gets injected.
  // Not needed when you want to control the widget yourself
  selector: ".announcekit-widget",
  // Optional: Only applicible for the embed type widget. This must be provided for embeds to work correctly.
  embed: true,
  // Optional: If you wish to access the widget object yourself, you can provide a name for the widget
  // After loading completes, you can access the widget using `announcekit.widget$somename`
  name: "somename"
})

Each push call creates a widget and handles the setup. If you access the widget object, using announcekit.widget$somename you can call open and close methods to manually control the widget;

// Open the widget manually
announcekit.widget$somename.open();

// Close it manually
announcekit.widget$somename.close();

Events:

The global announcekit object provides several events in order to listen to changes.

announcekit.on("init", function() {
  // Called when the announcekit code loads. Before the widgets are loaded.
})

announcekit.on("widget-init", function(widget) {
  // Called for each widget after the widget has been successfully loaded.
  // Widget  object is passed to the handler.

  widget.open();
  widget.close();
})

announcekit.on("widget-open", function({ widget }) {
  // Called when the specified widget is opened
})

announcekit.on("widget-close", function({ widget }) {
  // Called when the specified widget is closed
})

announcekit.on("widget-resize", function({ widget, size }) {
  // Called when the specified widget is resized
})

announcekit.on("widget-unread", function({ widget, unread }) {
  // Called when unread post count of specified widget has been updated
})