In this recipe we’re going to create a widget that shows a link in the ticket sidebar, with the link containg details of the ticket being viewed.

Firstly, create a new widget and under the “Description” tab, give the widget a title and description.

We don’t to define any settings, special permissions or proxy parameters. The only think we need to check is the "Ticket" target under the "Settings" tab.

Under the “Code” tab, in the “body” section add the following code:

<div class="container">
	<div data-type="deskpro-template" id="link_template">
		<a href="https://example.com/users/{{ data.ticket.primaryUser.email }}/view" target="_blank">
		  Example Email Link
		</a>
	</div>
</div>

<script>
	Deskpro.client.onShow(function (context) {
		Deskpro.utils.renderTemplate("link_template", context);
	});
</script>
 copy

This example is slightly more complicated than the last. Here we need define a template which contains our link. Templates allow us to define placeholders for data that we may want to use in our HTML. In this case, we want to inject the primary ticket user's email address into the URL.

We natively support Handlebars templates, and we provide a utility that allows us to pass data to a handlebars template and render it to the page. Using the SHOW event, we pass the ticket context data to the template rendering utility like this:

Deskpro.client.onShow(function (context) {
  Deskpro.utils.renderTemplate("link_template", context);
});
 copy

Where link_template is the id of the template we'd like to render.

Ok, let's take a look at the widget in the Deskpro agent interface. Select any ticket and click on our newly created widget in the ticket sidebar and you should see the following:

Clicking or hovering over the link should reveal that the primary ticket user's email has been included in the link URL.

https://example.com/users/example.user@example.org/view
 copy