Embed a Voting board into your product

Learn how you can embed Ducalis voting boards using an embed code.

To enhance user experience, it is important to integrate a voting board within your product seamlessly. This will allow users to access the voting board directly from their account and make it appear as a single application.

Below is an example of a Ducalis board embedded into the page and opened in a frame.

How to embed a board as a frame

Follow these steps:

1. Choose the board and make sure it is published.

2. Install Base Widget Code and add “// Required for Voting board embedding” to the widget code.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******", 
    boardId: "78aef2c7c0********",
	 
    user: {
        // required
        email: "Your user Email",
        hash: "User hash (read instruction)",
        
        // optional
        userID: "Your user ID",
        name: "Your user Name",
        avatar: "https://you-user-avatar-domain/avatar.png",
        company: {
            id: 123,
            name: "Your user Company name",
            created_at: "2019-06-02 17:10:00",
            spend: 123000,
            customFields: {
                mrr: 100,
		plan: "pro",
		prop: value,
            }
        }
    },

    // required for Voting board embedding 
    embedBoard: {
	 selector: "#selector-where-show-iframe", // css-selector where to render voting board
	 style: undefined, // optional, iframe styles object, e.g. "style: {position: 'absolute', top: 0}"
    },
});

How to get the integration keys: appID and boardID

To install the widget code, you must get appID and boardID parameters.

Follow these steps:

1. Open the Organization Settings.
2. Find the “Signup mode on voting boards” section in the menu.
3. Click Reveal Secret.
4. Copy the appID and boardID from the corresponding fields.

Attach Notification Bubble

Show notification signs to your customers so they not miss important updates and releases.

Add the bubble object to the widget code above.

dclsPxl("initWidget", {
   ...

   bubble: {
      // optional, default state is ".ducalis-changelog-widget"
      // use it for bubble without widget
      selector: '#embedBoardBuble',

      // optional, default state is undefined
      // clear initial styles. Use it for custom styles by className ONLY.
      className: 'some-class-name', 
	
      // optional, default state is undefined
      // customization initial styles.
      style: { 
	 right: '7px',
	 top: '7px',
	 backgroundColor: '#db3737',
         borderRadius: '4px',
	 fontSize: '13px',
      }
   },
   ...
});

Customize board background

To match the board your interface and brand there is an option to add transparent background.

embedBoard: {
     ...
     // optional, Default: false
     // iframe and board with transparent background
     transparent: true,
     ... 
}

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.

[Recommended] Subscribe customers to release notes automatically

One of the most useful features of voting boards is the automation of release notes. It’s an auto-digest of submitted requests, what is currently being worked on, and what has received the most votes. This allows engaging loyal product users in the development process, suggesting improvements, tracking the status of their own requests, and voting for others.

Since the voting board is a separate application, and to avoid constantly importing lists of new active users of your product, you can enable auto-subscription to release notes to ensure a seamless experience for your users.

Add “// Auto subscribe current user on current board (needed user.email + user.hash)” settings to the widget call code.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******", 
    boardId: "78aef2c7c0********",
	 ...

   // Auto subscribe current user on current board (needed user.email + user.hash)
    autoSubscribe: true,  // optional, default: false
});

Useful links:

• Single Sign-On (SSO) for authorizing users on Voting Boards
• Embedding & Customizing Changelog Widget