Most of the time apps and widgets will be represented by an icon that may have a badge count associated with it.

What is a badge count?

A badge count is a number displayed next the icon of an app or widget. This number could represent anything you like and it's meant as a signal to the user that the app or widget contains this number of "things". For example, the badge count could represent the number of pending items in a to-do list.

Looking at the following screenshot of the ticket sidebar, you can see that some of the icons have numbers next to them. These are the badge counts.

Setting the badge count

We provide a client method that allows you to set the badge count from within one of the event hooks. In the following example, we'll set the badge count to "42" when the user clicks on the widget icon.

Create a new widget and set the title, description and apply the widget to the "Ticket" target under the Settings tab.

Next, under the "Code" tab and in the "body" section, add the following code:

<script>
	Deskpro.client.onShow(function () {
		Deskpro.client.setBadgeCount(42);
	});
</script>
 copy

Save you new app and head over to the Deskpro agent interface and select any ticket. Click on our new widget in the ticket sidebar and when you click, the number "42" should appear next to the widget icon like this:

This example isn't very exciting, so let's increment the badge count every time you click on our widget icon. To do this, change the widget body code to the following:

<script>
	let count = 0;

	Deskpro.client.onShow(function () {
		Deskpro.client.setBadgeCount(++ count);
	});
</script>
 copy

Now, every time you click the widget icon in the ticket sidebar, the badge count will increment by one.

A more practical example would be to load a set of data from an API and then set the badge count when the widget is READY but not necessarily shown to the user. This will prompt the user to click on the widget item if things are available for them to see.

Change the widget body code to the following:

<script>
	Deskpro.client.onReady(function () {
		fetch("https://dinoipsum.com/api/?format=json").then(function (response) {
			response.json().then(function (data) {
				Deskpro.client.setBadgeCount(data.length);
			});
		});
	});
</script>
 copy

Now, take reload Deskpro agent and open a ticket. You should now see a count of the data we fetched from the API before we actually click on the widget icon in the ticket sidebar.