Widgets guidance
The widget builder can be accessed here:
What data can be selected?
The widget builder allows you to select any data published using the 360Giving Data Standard using the filters available in GrantNav. This includes funder, programme, amounts, dates, geography (Country, Region, Local Authority), keywords in the text and recipients, plus it’s also possible to filter by recency i.e. relative to today’s date: for the last 3, 6 or 12 months.
How to select the data
Any search that can be created in GrantNav can be set up in the widget builder – you simply need to reproduce your selection using the identical filters and search bar.
The recency filter is in a new Settings area below the search bar – see guidance below on other settings.
What views can be displayed?
Once you’ve selected what data you want to display, you can then choose from one of three views:
- Grants table – one row per grant with columns including amount, date and a choice of title, funder, recipient and description – some of these columns will be collapsed responsively based on the width available
- Amount awarded chart – bar chart showing the distribution of amounts within the data selected
- Date awarded chart – bar chart showing the distribution of dates within the data selected
These views are selected within the Settings area below the search bar – see guidance below on other settings. There is a preview of how your widget will look below the settings.
Grants table view
Amount awarded chart
Date awarded chart
Other settings to configure
Once you’ve decided what data to display and selected the view type for your widget, you can configure other settings to improve the usefulness and appearance of your widget.
Height and width
It’s possible to amend the width of the widget within the widget builder interface, or by editing it directly in the HTML code generated by the widget builder. It is also possible to edit the height by editing it directly in the HTML.
Sort order
If you have chosen the table view, you can select the default sort order for the data. We recommend selecting Award Date – Latest First rather than Best Match, which is the default setting.
Users accessing the widget can also modify the sort order within the widget once displayed on your website.
Column choice
If you have chosen the table view, the columns shown by default will be Title, Amount, Date, Funder, Recipient and Description. The order of the columns cannot be amended, and the columns furthest to the right are collapsed responsively based on screen size.
If you would like to hide any of these columns, you can select which columns to show in the Selected columns picker. Amount and Date are always shown, but you may wish to hide Title or Description, for example if your data uses generic or similar information, or Funder, if all grants in the widget are from the same funder.
Number of rows
If you have chosen the table view, it’s possible to limit the number of rows that will be displayed to reduce the amount of scrolling or the need to click through pages of results within the widget on your website. Users can still click a link in the widget to open the full search in GrantNav.
If you limit the number of rows, consider the sort order you have selected as this will determine which grants are now displayed after the row limit is reached.
Settings area:
How to embed the data into your website or intranet
Getting the widget into your website
Once you’re done with the set up, simply copy the HTML code provided and paste it into the appropriate page on your website.
Different website Content Management Systems (CMS) will have different approaches to handling custom code – some will need you to add an HTML block or container before you can paste in code for instance. Unfortunately, the 360Giving Helpdesk is unable to help you with queries related to your particular website CMS. Please refer to the guidance for your CMS for how to do this.
Code and preview areas:
Improving the experience of users of the widget
The widget itself does not display which filters are selected so you should include some text surrounding the widget which clearly explains which data is selected. This context will help users to understand what data they are being presented with.
If visitors want to narrow down the selection further, they will need to open the search in GrantNav by using the link provided within the widget and then use the filters in GrantNav to amend the search. You may wish to instruct them to do this, particularly if you expect they will want to narrow down or sort the data further, for example by Recipients, by Programme or by Geography.