In this recipe we’re going to create a widget that will fetch some HTML content from a remote server via the apps proxy and render it within the widget.

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

We don’t to define any settings or special permissions. We do need to define the following:

• Ticket Target - Under the "Settings" tab check "Ticket" under targets

• Proxy Whitelist - Under the "Proxy" tab add the following URL: https://dinoipsum.com/api.* Method: GET with a Timeout of 5 seconds.

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

<div class="container" id="content"></div>

<script>
	Deskpro.client.onShow(function () {
		Deskpro.utils.fetch("https://dinoipsum.com/api/?format=html").then(function (response) {
			response.text().then(function (content) {
				document.getElementById('content').innerHTML = content;
				Deskpro.client.resize();
			});
		});
	});
</script>
 copy

In this example we're requesting some HTML from a third party API and injecting it directly into the widget container element. Notice that we've set an id on the container div so that we can reference it once we have a successful response from the API. Also notice the call to Deskpro.client.resize(). This tells Deskpro to resize the app window as we've added content that may overflow.

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: