In this recipe we’re going to create a widget that will fetch some JSON content from the Google Places API configured 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 special permissions, but do need to define the following:

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

• API Key Setting - Under the "Settings" tab, create a backend only setting named "api_key"

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

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

<div class="container" data-type="deskpro-template" id="places">
	{{#each candidates}}
		<ul>
			<li><strong>Name:</strong> {{ this.name }}</li>
			<li><strong>Rating:</strong> {{ this.rating }}</li>
		</ul>
		<hr />
  {{/each}}
</div>

<script>
	Deskpro.client.onShow(function () {
		
		var url = "https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=__api_key__&input=Science%20Museum%20London&inputtype=textquery&fields=name%2Crating";
		
		Deskpro.utils.fetch(url).then(function (response) {
			response.json().then(function (data) {
				
				Deskpro.utils.renderTemplate("places", data);
				
				Deskpro.client.resize();
			});
		});
	});
</script>
 copy

In this example we're firstly defining a template into which we can pass the response from the API call. Secondly, we use the apps proxy via the utility Deskpro.utils.fetch() and pass a URL for the API endpoint containing a placeholder for the api_key backend setting, "__api_key__". This will get repalced with the actual value of the api_key setting so that the API request is properly authenticated. You'll need to generate a Google Places API key in order to test this widget.

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: