嵌入组件

Ducalis 组件可以直接在你的产品中向用户通知新功能。嵌入该组件可以提高用户对投票看板的参与度。

更新日志组件和通知

嵌入组件后，用户将收到关于新功能的产品内通知。当你将想法移至完成状态时，组件会显示更新，并带有一个红色通知气泡。

**在线演示：**访问 https://hi.ducalis.io/，点击顶部菜单中的 What's New。

在任何地方嵌入

可以在任何页面嵌入该组件。如果用户已识别身份，他们将在所有子域中看到个人通知。例如，当用户阅读公告并导航到另一个页面时，红色气泡不会再次出现，直到下一次发布。

在 Ducalis，我们在以下位置嵌入了该组件：

• 营销网站：https://hi.ducalis.io/
• 帮助中心：/knowledge-base/
• 产品：hi.ducalis.io

设置组件

更新日志组件包含两部分：

• 加载组件的基础组件 JavaScript 代码
• 用于打开组件的按钮

注意

如果你的投票看板是私密的，有访问限制，你必须向组件传递用户身份。否则，无人可以访问它。

1. 打开投票看板设置

1. 前往投票看板设置。

   

2. 找到 Embed (嵌入) 部分。

3. 点击 Add 'What's New' Widget (添加"新动态"组件)。

2. 安装基础组件代码

将此代码添加到你想要显示组件的页面底部。

<!-- hi.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://hi.ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
  });
</script>
<!-- End hi.ducalis.io Changelog Widget -->

3. 创建组件按钮

为任何元素添加 CSS 类，创建一个可以打开组件并显示通知的按钮：

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

来自我们落地页的示例：

4. 基础配置中的组件功能

此基础设置提供：

• 组件显示处于完成状态的最新想法，按发布日期排序
• 新发布功能（移至完成状态的想法）的通知气泡
• 访问者可以阅读最多 20 个已发布的想法
• 链接到投票看板，以查看路线图、添加想法、投票和评论
• 电子邮件收集，用于路线图每周摘要更新

在投票看板设置下找到投票看板订阅者。

配置组件选项

默认页面

选择在组件中首先打开路线图页面还是更新日志页面。

要指定页面，在代码中配置 defaultView。使用 roadmap 或 changelog：

dclsPxl("initWidget", {
  ...
    // optional, default state is undefined
    // Use 'roadmap' or 'changelog' to open specific page
    defaultView: undefined,
  ...
});

对于更新日志和路线图页面，你可以选择打开特定筛选或操作（仅限已授权用户）：

dclsPxl("initWidget", {
   ...

   // optional,
   // use it to open a specific filter (only for authorized users)
   openNewIdea: true,
   myIdeas: true,
   myVotes: true,

   ...
});

身份验证方法

选择使用 Ducalis 身份验证或你自己的身份验证方法。

选项 1：使用 Ducalis 身份验证（默认）

默认情况下，当客户想要投票、添加想法或评论时，会使用 Ducalis 身份验证。

选项 2：使用你自己的身份验证

如果你使用自己的身份验证，在代码中指定：onAuth: showUserAuth

dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    ...
    onAuth: showUserAuth
    ...
});

指定此函数后，它将替换 Ducalis 身份验证。你需要处理整个身份验证过程，但必须传递已认证的组件用户：必须提供 user.email + user.hash。

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

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
     },
     onAuth: showUserAuth
    ...
});

自定义组件外观

嵌入 Ducalis 更新日志组件后，可以自定义它以匹配你的产品。

将以下参数添加到你的代码中：

<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://hi.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: "400", // optional, Widget width (minimal width 400px)
    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>

迁移到新的气泡参数

信息

参数 top、right、backgroundColor 和 color 已弃用。请改用 bubble.style。

添加新参数 bubble.style：

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

调试模式

debug: true,

当你打开组件时，它会将所有更新标记为已读，红色气泡会消失。为了更好地测试布局，请使用调试模式。

当你关闭并重新打开组件时，它将始终显示红色通知圆圈。这可以帮助你测试正确的位置。

将通知气泡附加到任何元素

selector: "_YOUR_SELECTOR"

选择或创建一个元素来触发 Ducalis 组件。使用该元素的 ID 或唯一类作为选择器参数。

提示

如果选择器是类（而不是 ID），请以点开头。对于类 openWidget，你的选择器是 .openWidget。

对于你的组件 selector，你可以使用：

• 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"]、……

通知颜色

使颜色与你的产品匹配。默认颜色：

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

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

通知气泡位置

默认情况下，通知气泡相对于附加到选择器的元素定位。

如果你不喜欢通知气泡的位置，在浏览器开发工具中调整它，并将其添加到组件设置中：

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

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

组件宽度

默认情况下，组件宽度为 376px。你可以更改它：

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

自定义 CSS 类

**仅供高级使用。**向通知气泡添加自定义类名，不使用我们这边的样式。你可以使用自己的 CSS 自定义通知气泡。

bubble.className: "_SOME_CLASS_NAME"

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

信息

参数 bubbleClassName 已弃用。请改用 bubble.className。

为用户订阅发布说明

投票看板最有用的功能之一是自动发布说明。

由于投票看板是一个独立的应用程序，默认情况下启用发布说明的自动订阅，以避免不断导入新活跃用户列表。

在以下情况下，用户将自动订阅：

1. 你通过 Ducalis API 或组件向 Ducalis 发送用户数据（必须提供 user.email + user.hash）。

2. 用户打开组件或看板框架。

满足这些条件后，用户将自动订阅发布说明。

注意

为了让用户接收发布说明更新，设置自定义电子邮件域。

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

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
    },

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

如果你满足上述条件但不需要自动订阅用户，请更改为 autoSubscribe: false。

相关文章

• Ducalis API
• 单点登录（SSO）
• 从你自己的域发送发布说明