In this recipe we’re going to create a widget that will fetch some HTML content from a remote server 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

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

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

<script>
	Deskpro.client.onShow(function () {
		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 in a raw format. 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: