Skip to main content Skip to footer

Learning Centre

Engagement Widget

With an engagement widget, you can integrate Citizen Portal with the third party engagement platform - Bang the Table. This will allow citizens to follow specific projects all in one place. Here are some of the benefits of engagement widgets:

  • You can display all ongoing projects that appear on your engagement website's homepage in Citizen Portal
  • Citizens can view an image, a short description and the lifecycle stage of each project
  • Citizens can select one of the projects to view more information on your engagement website

Set-up instructions

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 “Engagement” from the page of available widgets

This will take you to the new engagement widget details page.

Engagement widget details

Once you’ve added the engagement 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 engagement 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.

In the "Engagement platform" field, Bang the Table will be selected by default. This is the only engagement platform Citizen Portal supports at this time. To set up the link to your Bang the Table website, you need to:

  1. Select the "Manage account" button
  2. Complete the "Bang the Table Configuration" fields

This will link Citizen Portal with your engagement platform

In the “Widget name” field, enter a name for the engagement widget. For example, you can name the widget to align with the project in Bang the Table. The widget name will appear at the top of the widget on the public-facing side of the portal.

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 can also select this colour from the colour grid that appears when you click into this 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 
  • Select the "Save and close" button to complete the process 

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.

In the "Dashboard text" field, enter any text you would like to appear above the content from Bang the Table in the dashboard widget view.

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 content above the content within 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 the widget settings

To save these settings and add the engagement widget, select the "Save" button. 

Don't have this widget?

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