# Create a Q\&A Widget using Data Templates
{% hint style="warning" %}
You are reading the **Classic Widget Documentation**
Classic widgets are a previous widget version for onsite widgets created before September 23rd.
From September 23rd 2025, all new widgets created will be NextGen.
Please check your widget version on the **Widget List page** to see if it is **Classic** or **NextGen** widget.
You can read the [Nextgen widget documentation here](https://docs.nosto.com/ugc/guides/widgets-nextgen).
**Note: This feature is unique to Classic widgets**
{% endhint %}
* [Introduction](#introduction)
* [Build the Data Template](#build-the-template)
* [Setup In-Line Tile](#setup-inline-tile)
* [Setup Expanded Tile](#setup-expanded-tile)
* [Next Steps](#conclusion)
## Introduction
Nosto's UGC offers the ability for clients to append their own Custom Data to any Tile or Tag on the Platform, allowing for clients to enrich the content on their Stack with additional data.
This custom data, which is then appended to the Tile or Tag, can be used through Nosto's UGC outputs including Widgets, Event Screens and the Nosto's UGC API.
In this guide we are going to create a simple Question & Answer (Q\&A) Widget, allowing Moderators to add, using Data Templates, answers to questions which have been submitted.
[Back to Top](#top)
## Build the Data Template
First step in the process is to build a Data Template. For the purpose of this guide, we are going to create a simple, one field template for Tiles, where we can add an 'answer' to a question we've aggregated into our Stack.
To find out how to create a Data Template for Tiles, we recommend following this [guide](https://docs.nosto.com/ugc/guides/data-templates/creating-data-template) first.
For this example, our **Schema** and **Options** will be similar to the below:
**Schema:**
```
{
"type":"object",
"properties": {
"response": {
"type":"string"
}
}
}
```
**Options:**
```
{
"fields": {
"response": {
"type":"textarea",
"label": "Answer"
}
}
}
```
Once we have built out the template, we can start populating our template via the Curate Content section of your Stack. To do this, simply pick a Tile within your Curate Content screen, click on the Action Button and from the overflow menu your Data Template should be available.
*Note: It is recommended that you provide an answer for at least one tile before customising your Widget*
[Back to Top](#top)
## Setup In-Line Tile
Once we've setup our template, we can now start to customise our Widgets so that the answers will render on both the In-Line and Expanded Tile.
For this guide we are going to customise a Waterfall Widget.
To begin, we will need to append the below Custom Javascript to the Widget. This will add both an 'Answer' title to the base of the Tile, plus the relevant response we specified in the data template. It will also only render a Tile, if it has a Data Template response in it, meaning if this information is empty, the Tile won't appear on the Widget, even if it is published.
**Custom Javascript:**
```
onCompleteJsonToHtml: function ($tile, tileData) {
$tile.find('.tile-caption').append("
Answer:");
if (tileData && tileData.custom_fields.response) {
var response = tileData.custom_fields.response;
$tile.find('.tile-caption').append('
'+response+'
');
}
console.log('[onCompleteJsonToHtml]', $tile, tileData);
return $tile;
},
```
Once added and saved, it should render similar to the below on the In-Line Tile:
[Back to Top](#top)
## Setup Expanded Tile
Next step is adding these responses to the Expanded Tile. Again, like on the In-Line tile, we are going to append an 'Answer' value to the base of the Expanded Tile, and then add the relevant response from the Data Template below.
**Custom Javascript:**
```
.on('expandedTileOpen', function (e, data) {
var response = data.tileData.custom_fields.response;
var $p = $tackla('').html(response.replace(/docs/(\r|\n)/g, '
'));
console.log('response', $p, $tackla('.stacklapopup-caption').length);
$tackla('.stacklapopup-caption').append("
Answer:");
$tackla('.stacklapopup-caption').append($p);
})
```
Once added and saved, it should render similar to the below on the Expanded Tile:
[Back to Top](#top)
## Next Steps
From here, we can look to either style our data template content to make it stand out from the ingested Social Content, or we can look to include more values / insights.
[Back to Top](#top)