All Collections
Widgets
Widgets
How to create widgets with AnnounceKit
How to create widgets with AnnounceKit

Create, setup and customize your Widgets

Updated over a week ago

AnnounceKit Widgets and Features


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 and gather feedback.

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.

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 it.

In addition to tracking user interactions, AnnounceKit widgets can also be customized with specific API codes.

How to create and set up a widget?



1) Creating a Widget with AnnounceKit is super easy!

Go to Settings, then Widgets, and click on 'Create New'


2) You'll be greeted with a page where you'll have multiple stylings of Widgets to create from, as well as many customization options.

You can select from:

  • Sidebar

  • Popup

  • Modal

  • Embed

  • Direct Link

For all of the Widgets, you can change the following;

  • Content Type to include Full Posts or Post Summaries inside of widgets

  • Accent Color

  • Collapse Long Posts

  • Override Title

  • Hide Search Input, Subscriptions, Reactions and Feedback from widgets

  • Set up the Auto Reload time for the widgets.


Furthermore, you have two options regarding Roadmap, but these are covered more in our Roadmap article.

3) Scroll down to Launchers to choose an element to launch your widgets

These highly customizable small elements will launch Widgets upon clicking.



You can select from:

  • Badge

  • Float

  • Drawer

  • Line

  • Custom Implementation

You can also customize your launchers as you wish. You can change:

  • The badge animation to none, pulse or shake.

  • The badge to smaller badge without an unread number indicator

  • The color of the badge

  • The visibility of the badge after all read

  • The position of your float badge

  • The icon of your float badge

4) Implement your Widget

After creating your Widget, you'll be given an HTML and JavaScript code for you to implement them to your app or web-page.

For further (more technical) setup instructions, please follow our article here

Widget Customization



Pretty much everything is customizable inside of your Widgets.

Click on the headlines below to see what our customizable widgets are capable of!

Theme & Header inside of the Widgets

Customization options for Theme and Header include:

  • Light, Light Boxed version, and Dark versions

  • The background color of the widget page

  • Font Family of the texts inside of the widget

  • Option to hide the header & link icon and change the background & text color of header

Posts inside of the Widgets

Customization options for Posts include:

  • The ability to change the background, text, title, date and seperator color of the posts displayed inside of widgets, as well as the font size.

  • The option to hide the Cover Image, Title, Dates and the "No More Dot"

  • Sliders for the opacity of the labels, shadowing behind the posts window, border radius of the posts window and spacing between the posts.

Roadmap inside of your Widget

Customization options for Roadmap include:

  • The ability to change the text, background, title background, title, border, and line color of your roadmap displayed inside of widgets.

  • Border radius slider

  • Font size for the font of your roadmap.

Feedback & Subscription Banner

Customization options for Feedback and Subscription Banner include:

  • The option to change the input background, border, and text color as well as emoji background, foreground and decoration color of your feedback section inside of your widgets

  • The ability to change the background, text, input background, border and text color of your subscription banner inside of your widgets.

  • Sliders for Border Radius and Shadowing of your Subscription Banner window.

Did this answer your question?