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:
Choose a Widget Type
Select from various widget options.
Customize Content and Visuals
Tailor the widget's appearance and information.
Select a Launcher Type
Pick the ideal launcher style.
Customize Launcher Content and Visuals
Personalize the launcher's appearance and content.
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:
Sidebar: Compact and space-efficient.
Popup: Non-intrusive, focused display.
Modal: Centered overlay for attention-grabbing content.
Embed: Seamless integration of external content.
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
Badge: Text with circle badge on top
Float: Customizable icon with a badge on top
Drawer: Customizable drawer icon attached to the right side of your screen.
Line: Launcher with only the tag and title of the post.
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!