Widgets have a title that can be seen when a widget is shown to the user. By default the title is set to what you defined when creating the widget - it's the value of the "Title" field under the description tab. We can actually override this in Javascript to be whatever we want when the widget is running.

Setting the title

We provide a client method that allows you to set the title from within one of the event hooks. In the following example, we'll set the title to "Title Changed" 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.setTitle("Title Changed");
	});
</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 widget should have a title of "Title Changed", like this:

In the following example, instead of changing the title to static text, let's change it to the primary ticket user's name instead.

Change the widget's body code to the following:

<script>
	Deskpro.client.onShow(function (context) {
		Deskpro.client.setTitle(context.ticket.primaryUser.displayName);
	});
</script>
 copy

Refresh Deskpro agent, open a ticket and click on the widget icon again. This time you should see the primary ticket user's name set as the widget titlelike this: