Skip to main content Skip to footer

Learning Centre

Location Widget

Citizen Portal provides the ability for your City Administrators to create their own location based widgets. Location based widgets can be used to display information to users based on their profile address. The content of these widgets depends on what information you send back in the API for the dashboard view as well as the expanded view.

You can only add locations widgets if the address setup for your city has been completed. Contact our product team if you'd like to set up addresses for your city.

Set-up instructions

To add an location widget, in the administrator side of Citizen Portal:

  1. Select the “Widgets” tab from the top menu
  2. Select the “Add widget +” button near the top right of the page
  3. Select “Location” from the page of available widgets

A new screen will appear for you to add the details of the Location widget.

Location widget details

Once you’ve added the location widget, you can customize the way the widget will appear on Citizen Portal. This includes setting up the configuration, content and notifications for the widget. 


To configure the Location widget, select "Configuration" from the side menu. Then complete each of the necessary fields. Once you've completed all necessary fields, select the "Next" button at the bottom of the screen to take you to the "Content" screen. Alternatively, you can select "Content" from the side menu.

There are two types of location widgets:

  • HTML widget
  • Formatted widget

The widget works like a Formatted widget by default.

In the “Widget name” field, enter a name for the location widget.

If you would like this widget to be fixed on the user’s portal, select the “Set as fixed widget” checkbox. If you select this option, a user will not be able to remove the widget.

In the “Widget Colour” field, enter the hex code for the background icon colour. You may type the hex code into this field using the format of #XXXXXX. You may also select this colour from the colour grid that appears when you click into the widget colour field.

You can select a widget icon from our library or upload your own widget icon. If you'd like to choose an icon from the library:

  • Choose the "Select icon from library" option
  • Then, select the "Select icon" button to view the library
  • Choose the icon you'd like from the library 

If you'd like to upload your own icon:

  • Choose the "Upload icon" option
  • Then, select the  “Add icon”
  • From the pop-up box, choose the widget icon file from your documents

Please note that this must be a .svg file that is less than 5KB.


Once you've completed the "Configuration" set-up, you can add content to the widget. Select "Content" from the side menu and complete all necessary fields. Once you've added content, you can select the "Next" button at the bottom of the screen or select "Notifications" from the side menu.

This is the connector between Citizen Portal and your application. Specify the API endpoint. Please note that the API documentation will be different for HTML widget and key-value pair widget.

You may select the "Help" icon located in the top right corner of Citizen Portal to find the latest API documentation.

Test API

You can select the "Test API" button next to the "API endpoint" text field if you'd like to test before publishing. Learn more about API testing for location widgets.

You can select one of three dashboard templates:

  • Form view
  • Row view
  • Table view

The data in the widget will be formatted based on the template you choose. If you select table view, you can adjust the width of the key and value columns.

Select the number of items that you’d like to appear in the dashboard view of the widget.

You can add a table or chart to the widget. Follow the instructions for adding a chart and adding a table.

If you want to add additional text above the items in the widget, you can add text in the corresponding text areas. 

If you would like the text in expanded view to mirror the dashboard view, select the checkbox next to “Use dashboard text for expanded view”.

If you would like to add additional text in the expanded view, add text within the “Expanded View” textbox.


If you would like Citizen Portal to notify users that have subscribed to updates, select the “Widget Notifications” toggle to turn on notifications.

Saving and publishing the widget settings

Once you’ve added all the widget details, select the “Save” button to add the widget to Citizen Portal.

Don't have this widget?

If you don't have access to this widget or would like to buy another widget for Citizen Portal, please reach out our sales team or your project manager and they can work with you to get it added.