The KPI widget allows you to add a circle or battery to display KPI progress which will fill up based on an individual data point.
This example shows how the widget can display KPI progress either on a circle or battery charge:
Here's what we'll cover in this guide:
1 Setting up the widget
So let's get you putting together the KPI widget...
1.1 KPI settings
- KPI type - click to select if you want the KPI progress displayed as a battery filling up, or showing a proportion of a circle.
- Show KPI values as percentage - by default this is toggled on, but you can toggle to turn off displaying as a percentage.
- KPI value - here's where you can choose where the data for the KPI widget should be taken from. You can either type in a number or click Variables to access the drop-down menu of variables which you can use. Variables take the data entered during the survey and display it in the chart.
- Maximum value - this is set at 100 by default as the KPI will usually be shown as a percentage. If you require a different maximum value, simply enter it here.
- Label - enter the text to be shown beneath the KPI circle or battery.
- Color - click the pencil icon to choose the color of the circle or fill-color of the battery.
Tip: To make advanced design changes to this widget, use custom CSS.
If you want to display a few KPI charts, just click Add KPI and add as many as you require. Follow the steps outlined above to set up each one as you wish.
1.2 Widget placement and size
Choose how you would like to align your KPI widget. You can choose to align it to one side and have explanatory text or another widget on the other side, or center it.
- Left - widget will be aligned to the left side of the page, in a column layout
- Center - widget will be presented centered across the entire page from the left to the right (full width)
- Right - widget will be aligned to the right side of the page, in a column layout
If you would like a widget to appear side-by-side the circle, make sure to set the widget aligned on one side of the page, and the circle on the other. For example, choose to align the text widget to the left, and align a circle widget to the right.
Take a look below at some different layout possibilities:
Use the arrows or enter a value to change the height and width of the widget. If you choose to place the KPI widget on either the left or the right side of the page, the widget will be automatically resized.
Now if you want to show the widget to all respondents, you're done! Just make sure to click save PDF and continue adding widgets. Check out section 3 to see all available widgets.
2 Widget logic rules
If you want to only show this widget under certain conditions, it's time to set the widget logic rules. Click add rule and now select which condition from the drop-down menu should be used to decide when to show the widget.
Once you've chosen the initial condition, you can specify exactly what conditions need to be met, for example the answer on question must be greater than a certain number. If you need a more complex condition, click on the white circle with a purple + sign to add criteria that will be in addition to the other criteria (AND), or instead of (OR).
Tip: If you have set up outcomes, you can choose an outcome as the criteria for showing the widget. Choose outcome from the drop-down menu and then select what the outcome should or should not equal so that the widget will be shown. You can set the outcome as the only criteria, or as an additional criteria as shown below. In this example, we clicked the purple + button and added that the widget should be shown if both the response on intro field criteria AND the outcome criteria is fulfilled.
Once you've saved your logic rules, don't forget to save your PDF and you're ready to add more widgets!
3 Other available widgets
Why not check out our other widget guides and learn how to add other types of content to your PDF?