Select the "Property dependent" checkbox if the widget content depends on the user’s address. Please note that a property dependent integration widget cannot be added unless address setup for your city is completed. Contact us if you'd like to set up addresses for your city.
Add an Integration Widget
Citizen Portal provides the ability for our City Administrators to create their own integration widgets. Integration widgets can be used to create widgets that can integrate seamlessly with your systems to provide important information to your citizens through a secure data connection. Some examples include:
- Property taxes
- Utilities
- Programs and Recreation
- Job Opportunities
- Volunteer Opportunities
- Engagement Opportunities
The content of these widgets depends on what information the city sends back in the API for the dashboard view as well as the expanded view.
Set-up instructions
To add an integration widget, in the administrator side of Citizen Portal:
- Select the “Widgets” tab from the top menu
- Select the “Add widget +” button near the top right of the page
- Select ‘Integration’ from the page of available widgets
A new screen will appear for you to add the details of the Integration widget.
Integration widget details
Once you’ve added the integration widget, you can customize the way the widget will appear on Citizen Portal. This includes setting up the configuration, content, link accounts and notifications for the widget.
Configuration
To configure the Integration 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 integration widgets:
- HTML widget
- Formatted widget
The widget works like a Formatted widget by default.
In the “Widget name” field, enter a name for the integration 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.
Content
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 "Link accounts" from the side menu.
This is the connector between Citizen Portal and your application. Specify the API endpoint.
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 integration 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.
Add the text that you want to display to users who have not yet linked an account to the widget.
Add instructions to help users link their account to the widget.
Add instructions to help users un-link their account from the widget.
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.
Link accounts
Select "Link accounts" from the side menu to add or set up link accounts for an integration widget.
Select an existing link account
If you would like to link the widget to an existing link account, choose the "Select link account" dropdown menu. Then, choose the link account you'd like to add to the integration widget.
If you want to add a new link account, select the "Add new link account button." You can add a link account or external link account. Follow the instructions for how to add a link account.
Notifications
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.