HQ - Widget Builder

Device(s): 

• Editing is available on Web only.
• Mobile users can view widgets on published pages but cannot edit them

Roles / Permissions: 

• Admin - Full access to create, edit, publish, and delete all widgets.
• Spotlight Manager - Can create and manage widgets for teams they belong to.
• General Access Employee - View-only access based on audience targeting.

Availability: 

Widget Builder is available as a standard product feature to all Workvivo customers following being made generally available at end-July 2026. Please reach out to your Workvivo point-of-contact to avail of the feature.

Key Features

• Drag-and-drop editing - Add, move, and resize widgets directly on the page.
• Two placement zones - Header zone for high-impact content (up to 10 widgets in the header) and a dashboard grid zone for flexible layouts.
• Widget catalogue - A growing list of over 20 widgets across categories such as Media, Productivity, Stay Informed, Connect, Utilities, Integrations, SEER.
• Audience targeting - Show specific widgets to Everyone or selected team(s). 
• Preview and publish - Review your layout before making it live.
• Analytics - Track engagement and performance for each widget.
• Hide widget title - Toggle widget titles on or off to create cleaner layouts
• Widget title translations - Add translated versions of widget titles in 55+ languages so every employee sees content in their preferred language.
• Tab title translations - Translate tab titles into multiple languages for global workforces.
• Widget archive date - Schedule a date and time after which a widget is automatically hidden from end users, reducing manual maintenance for time-sensitive content.
• Extended tab icon set - Choose from over 40 icons when customizing tabs for richer visual navigation.
• Custom tab banner image - Upload a custom banner image to any tab to create a more branded, engaging experience.

Widget Categories

How to Search Widgets

1. Enter Edit Mode on your Custom Landing Page.
2. Select “Add Widget” in either the header or dashboard grid zone.
3. Enter Search text in the Search bar and filter results by Full-width content and Grid widgets

                                                                      Widget Builder Search

How to Add and Configure Widgets

1. Enter Edit Mode on your Custom Landing Page.
2. Select “Add Widget” in either the header or dashboard grid zone.
3. Browse the catalogue by "Category" including "All Widgets"
4. Choose a widget.
5. Configure the widget and "Save":
   • Set audience targeting
   • Choose display style (if relevant) - list or carousel
6. Once saved successfully drag and drop the widget to position it where you want on the page.
7. Preview and publish when you’re happy with the layout.

How to Hide a Widget Title

1. You can hide the title of any widget for a cleaner visual layout - particularly useful for billboard-style designs.
2. Enter Edit Mode and select the widget you want to edit.
3. In the widget edit modal, locate the Hide widget title toggle.
4. Toggle it on to hide the title from the published page.
5. Click Save.
6. The title is hidden on the published web page but remains visible in edit mode for reference.

Note: The "Hide widget title" toggle does not currently apply to mobile views. The widget title will remain visible on mobile devices regardless of the toggle state.

How to Add Translations to a Widget Title

You can provide translated versions of a widget title so employees see content in their preferred language. Translations are available in 55+ languages.

1. Enter Edit Mode and select the widget you want to edit.
2. In the widget edit modal, enter or update the title in the Edit Title field.
3. Click Add Translations below the title field.
4. In the translation modal, the default language title is pre-populated.
5. Click + Add a Language to add a new translation row.
6. Select the target language from the dropdown.
7. Enter the translated title text.
8. Repeat steps 5–7 for additional languages as needed.
9. Click Submit to save the translations.
10. Click Save on the widget edit modal to apply changes.

Note: Translations require you to manually enter each translated string. There is no auto-translation capability.

How to Set an Archive Date on a Widget

You can schedule a widget to be automatically hidden from end users after a specific date and time - ideal for time-sensitive content like campaigns, events, or announcements.

1. Enter Edit Mode and select the widget you want to edit.
2. In the widget edit modal, locate the Archive Date/Time field.
3. Set the date and time after which the widget should be hidden.
4. Click Save.

Once the archive date passes, the widget is automatically hidden from end users on both web and mobile. The widget remains visible in edit mode and continues to count toward the 20-widget limit per tab.

How to Add Translations to a Tab Title

Tab title translations work the same way as widget title translations, ensuring your tab navigation is accessible to a global workforce.

1. Navigate to tab settings by creating or editing a tab.
2. Click Add Translations below the tab title field.
3. In the translation modal, select a language from the dropdown and enter the translated title.
4. Repeat for additional languages as needed.
5. Click Submit to save the translations.

How to Change a Tab Icon

Tabs now support an expanded set of over 40 icons, giving you significantly more choice for visual navigation cues.

1. Navigate to tab settings by creating or editing a tab.
2. In the tab edit modal, open the icon selector dropdown.
3. Browse and select from the available icons.
4. Click Save.

How to Upload a Custom Tab Banner Image

You can upload a custom banner image to any tab to create a more branded, engaging navigation experience.

1. Navigate to tab settings by creating or editing a tab.
2. In the tab edit modal, locate the Banner Image section.
3. Drag and drop or browse to upload your banner image.
4. Click Save.

Supported file types are GIF, PNG, JPG, JPEG, and JFIF. The recommended dimensions are 1440x300px for optimal display. If no custom banner is uploaded, the existing hero banner is used by default.

Note: Images outside the recommended 1440 x 300px dimensions may be scaled or cropped.

Widget Placement Zones

Header Zone:

• Appears at the top of the page.
• Ideal for high‑impact content such as Billboards or Featured News.
• Supports up to two stacked widgets.

Dashboard Grid Zone:

• Appears below the header.
• Layout determines the number of columns (1, 2, or 3).
• Widgets can be resized and rearranged freely.

Drag-and-drop Behaviour

• Widgets can be dragged between the header zone and the grid, and between grid columns
• Dragging a widget into the header zone promotes it to full-width
• Dragging a header widget down places it into the grid

Things to Know

• There is a widget limit per tab. A message is displayed when the limit is reached.

• Each Billboard widget supports up to 5 billboard items

• Integration widgets are grid-only and require OAuth authentication.
• SEER widgets require a SEER license. The HQ Agent widget requires the HQ Agent add-on

Related Articles

• HQ - Widget Catalogue, Use Cases & Best Practices
• HQ - Custom Landing Pages
• HQ - Persistent Top Navigation