Configuring your Widget

Configuring your Widget

What is the Widget?

The Updates Widget is a stream of your latest update posts which can be embedded within your website in the form of a pop-out side bar. Here you can see ours in action:



Customisation options

The Widget and its content can be configured in a number of different ways.

Display

By default, the Widget will display as a Bell icon in the bottom-right can corner of your website. The Bell icon can be configured to sit on the left or right of your screen, and for those you wish to trigger the Widget from a custom HTML element, this can also be done. In the following example, we have configured a custom HTML element of "#selector" to be the trigger point. 



When a custom selector is provided (the the toggle option is on), the bell icon will not display, and instead, the widget and the notification icon will attach itself to the custom selector.

The Updates Widget can include up to 5 custom quick links that appear at the top of the widget. Here's our example, which currently has 4 added:



Quick links can be configured by navigating to your Embed Code page and then scrolling to the quick links section within the settings:



The main 'Quick Links' toggle controls the display of the Quick Links card within the Widget. Each quick link has two components: a title (i.e. the label displayed within the widget), and then the actual URL you want to include.

To add your first quick link, select 'Add new quick link'.

Post settings

Each update post card can also be customised:


  1. Direct links: this will enable posts to be opened in a new tab within your browser
  2. Roadmap cards: this will enable a section at the bottom of your post to display linked completed roadmap cards (read how to here)
  3. Features: this will enable a section at the bottom of your post to display linked completed feature cards (read how to here)
  4. Reactions: this will enable a section at the bottom of your post to collect feedback from your customers in the form of emojis
  5. Show reaction counts to public: by default, public users do not see counts, but you can enable this if you wish

How to embed

It's extremely straight forward to add the widget to your website. Simply copy the code snippet at the bottom of your Embed Code settings page, and paste it before the end of the body tag in your HTML on every page you want the updates to display.


Most people add the code snippet within the head section of their websites but it can also be added via tools such as Google Tag Manager. For any support with installation, jump on our Intercom chat and we'd be happy to help!

    • Related Articles

    • Widget JavaScript Options

      Configuration Options The following options can be added to your Widget settings in order to identify users and segment posts.  Option Type Required Description workspace_id String Required The id of the Workspace that the widget belongs to. name  ...
    • Adding Quick Links to your Widget

      What are quick links? The Updates Widget can include up to 5 custom quick links that appear at the top of the widget. Here's our example, which currently has 4 added: All quick links open the link within a new tab, rather than within the embedded ...
    • How do I add completed Cards to Updates?

      Roadmap cards can be added to releases in the same way as features are added to releases.  Navigate to your Updates page and ensure that your completed column is switched on: From your 'Recently completed' column within the 'Updates' page; filter ...
    • Adding a custom selector to trigger the widget

      Overview The Productstash widget can be configured to display in a number of different ways. The following display scenarios are supported: Default floating icon only Default floating icon only, but with a custom icon Default floating icon + Custom ...
    • How do I add completed Features to Updates?

      Features can be added to updates in the same way as roadmap cards are added to updates. From your 'Recently completed' column within the 'Updates' page; filter this column by selecting 'Features' to display all of your recently completed features. ...