Skip to main content
All CollectionsAnnouncements and ChangelogAnnouncements
Using widgets to show posts in mobile/web apps
Using widgets to show posts in mobile/web apps

Learn how to implement widgets to your applications to display posts in your apps

Updated over a year ago

One of the key features of AnnounceKit is its fully customizable widgets, which can be embedded on your website or app to display your announcements, collect feature requests and feedback, and show your progress with a roadmap.

AnnounceKit widgets allow you to choose from a variety of designs, fonts, and colors to match your branding. Additionally, you can add custom CSS to further customize the appearance. This means that the widget can be seamlessly integrated into any website or app, making it look like a natural part of it's interface.

In this article, we will go through the steps to create widgets for your project.

Streamlining the Creation Cycle:

  1. Choose a Widget Type

    • Select from various widget options.

  2. Customize Content and Visuals

    • Tailor the widget's appearance and information.

  3. Select a Launcher Type

    • Pick the ideal launcher style.

  4. Customize Launcher Content and Visuals

    • Personalize the launcher's appearance and content.

  5. Name & Implement

    • Give it a name and seamlessly integrate it!

1) How to create a widget?

To create a widget, simply go to Settings > Widgets and click on the Create New Widget button.

Or you can click here to be redirected to your widgets!

On the page, you'll have multiple options for widget types to choose from.

You can select from the following widget styles:

  1. Sidebar: Compact and space-efficient.

  2. Popup: Non-intrusive, focused display.

  3. Modal: Centered overlay for attention-grabbing content.

  4. Embed: Seamless integration of external content.

  5. Direct Link: Easy access to specific information.

and choose specific customizations for them:

Widget Type

Placement

Width

Content Type

Sidebar

Left or Right

Narrow, Regular, Wide

Summaries or Full Posts

Popup

-

-

Summaries or Full Posts

Modal

-

-

Summaries or Full Posts

Embed

-

Full Height

Summaries or Full Posts

Direct Link

-

-

as well as change its widget landing page!

You can also change the widget's content:

  • Accent Color: Changes the accent color (mostly the header color)

  • Override Title: The widget title Is automatically populated from your feed name, but you can change the title of your widget.

  • Hide options: You can hide the search box, the feature request button, the subscription button, the reactions below the posts (aka emojis) and the feedback box (the box for your users to submit feedback about posts).

  • Auto reload timer: Setup a timer for your widget to be automatically reloaded (in seconds)

  • Roadmap settings: Enable/disable the toggle for the roadmap or keep it collapsed

  • Google Analytics settings: If you are using Google Analytics for your project, you can also choose to send cookies from your widget.


2) Choosing a widget launcher

The widget includes an attention-grabbing element called Launcher that increases the visibility of your widget.

They are small elements displayed on your page that will launch your widget upon clicking on them.

You can select from the following launchers

  1. Badge: Text with circle badge on top

  2. Float: Customizable icon with a badge on top

  3. Drawer: Customizable drawer icon attached to the right side of your screen.

  4. Line: Launcher with only the tag and title of the post.

  5. Custom Implementation: Use custom CSS and HTML to create your own launcher.

For all launcher settings (except for Line Launcher), you'll have a small, customizable circle that displays the number of posts the user has not read.
​

Badge Launcher

Float Launcher

Drawer Launcher

You can customize your launcher & badge and change the following:

  • The badge is a smaller badge without an unread number indicator

  • The color of the badge

  • The visibility of the badge after all

  • The position of your badges

  • The icon of your badges

3) How to Implement a Widget

You are just one step away from implementing your widget!
​
After selecting your widget and launcher type, you'll be given an HTML and JavaScript code to implement it in your applications.

Below the widget, you'll find necessary documentation for your widgets, such as adding different code functionalities (for example, labeling a widget to show posts from specific labels), styling via CSS (though you can style your widget on our dashboard as well), User Tracking and Segmentation setup codes (which is necessary if you want to track users via widgets and send targeted posts to them)

You'll also find different SDKs and libraries for you to use to implement your widgets, just click on them to get started!

Did this answer your question?