1. Home
  2. Ducalis Voting SDK
  3. Embedding & Customizing Changelog Widget

Embedding & Customizing Changelog Widget

Changelog widget

With the Ducalis Changelog widget, you can significantly increase your users’ engagement in your voting board in two ways.

🚨 Changelog widget and notifications

After embedding the widget, users will be notified in-product about your new features. After you move any of your ideas at the voting board into Done status, the widget will show updates with a noticeable red notification bubble. So your users won’t miss your brand new feature.

👀 Live demo: Go to https://hello.ducalis.io/ and click on What’s New in the header menu.

🌍 Embed anywhere

You can embed it anywhere you wish. If your users were identified, they would see personal notifications at any sub-domain. For example, if a user reads a new feature announcement and goes to another page—a new red bubble notification won’t appear until the next feature release.

We at Ducalis embed it into:

📢 Add changelog widget into install (~5 minutes)

The changelog widget contains two parts:

  • Base widget JS-code that loads widget itself
  • A button to open the widget itself.

⚠️ If your voting board is 🔒 private and you have some restrictions on who can access it, you must pass users’ identities to the widget. Otherwise, it won’t be available to anyone.

1. Open Voting Board Settings

Go to the voting boarding Admin Panel you want to embed the widget. Scroll down and find Base JS-code.

2. Install Base Widget Code

You need to add that code to the bottom of the pages you’d like to show the widget.

<!-- Ducalis.io Changelog Widget -->
<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
  });
</script>
<!-- End Ducalis.io Changelog Widget -->

3. Create An Open Widget Button

To create a button for opening widget and showing notifications add a CSS class to any element:

<div class="ducalis-changelog-widget">What's new</div>

Here is an example from our landing page:

4. Widget Features in Base Configuration

That is enough to show changelog and attract your visitors’ attention to your new features.

  • Show the widget with your latest voting board ideas in Done status sorted by the release date.
  • Show notification for newly released features (ideas moved to done)
  • Visitors can read up to 20 released ideas.
  • Go to your voting board to check your roadmap, add new ideas, upvote, and comment.
  • Captures emails for sending your roadmap weekly digest updates.
    • You can find your voting board subscribers at Admin’s Panel

🎨 Customize Widget Look (~15 minutes)

After embedding Ducalis Changelog Widget, you may want to customize it to match your product.

We have plenty of taking options. Just add the needed parameters to your code.

Example:

<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    selector: "_YOUR_SELECTOR", // optional - default .ducalis-changelog-widget
    width: "376px", // optional, Widget width
    debug: true, // optional - Always show Notification bubble and logs for events

    bubble: {
      selector: '#embedBoardBuble', // optional - use it for bubble without widget, default ".ducalis-changelog-widget"
      className: 'some-class-name', // optional - clear initial styles. Usage for custom styles by className ONLY. Default undefined
      style: { // optional, customization initial styles. Default undefined
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
       }
     },
   });
 </script>

If you’ve already embedded the widget before, use the new parameter

NOTE! Parameters top, right, backgroundColor, color are still working, but will be Deprecated and aren’t used. Use the parameter bubble.style instead.

You need to add the code with the new parameter bubble.style.

bubble: {
    ...
    // optional, default state is undefined
    // customization initial styles
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...   
}

Debug Widget Notification

debug: true,

Whenever you open a widget, it counts as if you read all updates, and the red bubble disappears. For better layout testing, use a debug mode.

You can close and open the widget at any time, and it will always show a red notification circle near the selected class. In addition, it can help you tweak the correct position.

Attach Notification Bubble to Any Element

selector: "_YOUR_SELECTOR"

Select or create an element to trigger the Ducalis widget. Use that element’s id or unique class for the selector parameter. (Important: If the selector is a class and not an id, you have to write it starting with a dot. e.g. for class openWidget, your selector would be .openWidget )

For your widget selector you can use:

  • id: #DucalisChangelogNotification , #someID, …
  • class: .DucalisChangelogNotification, .someClass, .some-class, …
  • attribute [data-bubble="1"], [data-whats-new], …
  • mix div.someClass[data-show-bubble="true"], a[href^="<https://feedback.ducalis.io>"] , …

Notification colors

Match colors of your product. These are default colors:

backgroundColor: "#f04438", // Notification bubble Background color

color: "#fee4e2", // Notification bubble text color

Notification Red Bubble Position

This is the default. It is positioned to the element you’ve attached to the selector.

If you don’t like the notification bubble position: tweak it in the browser dev tool and add it to the widget settings.

top: "-10px", // Notification bubble position by top

right: "-10px", // Notification bubble position by right

Widget Width

By default widget width 376px you can change:

width: "376px", // optional, Widget width

Your additional custom CSS class

For advanced use only! Аdd’s custom class name to the notification bubble without styles from our side. You can customize the Notification bubble with your CSS.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // optional - clear initial styles. 
    // Usage for custom styles by className ONLY. Default undefined
    className: 'some-class-name', 
    ...   
}

NOTE! The parameters bubbleClassName is still working, but will be Deprecated. Use the parameter bubble.className instead.

Updated on May 23, 2023

Was this article helpful?

Related Articles

Leave a Comment