メインコンテンツへスキップ

ウィジェットを埋め込む

通知を表示するチェンジログウィジェット

Ducalis ウィジェットは、製品内で直接ユーザーに新機能を通知します。投票ボードへのエンゲージメントを高めるために埋め込みましょう。

チェンジログウィジェットと通知​

ウィジェットを埋め込むと、ユーザーは製品内で新機能の通知を受け取ります。アイデアを Done ステータスに移動すると、ウィジェットは赤い通知バブルとともに更新を表示します。

ライブデモ: https://hi.ducalis.io/ にアクセスし、ヘッダーメニューの What's New をクリックしてください。

どこにでも埋め込み可能​

ウィジェットはどのページにも埋め込めます。ユーザーが識別されている場合、すべてのサブドメインでパーソナライズされた通知が表示されます。たとえば、ユーザーがアナウンスを読んで別のページに移動すると、次のリリースまで赤いバブルは再度表示されません。

Ducalis では、以下にウィジェットを埋め込んでいます:

ウィジェットの設定​

チェンジログウィジェットには 2 つの部分があります:

  • ウィジェットを読み込むベースウィジェット JavaScript コード
  • ウィジェットを開くボタン
警告

投票ボードがアクセス制限のあるプライベートの場合、ウィジェットにユーザー ID を渡す必要があります。そうしないと、誰もアクセスできません。

1. 投票ボード設定を開く​

  1. 投票ボード設定に移動します。

    投票ボード設定ページ

  2. Embed (埋め込み) セクションを見つけます。

  3. Add 'What's New' Widget (「What's New」ウィジェットを追加) をクリックします。

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. 基本構成のウィジェット機能​

この基本設定では以下が提供されます:

  • ウィジェットは Done ステータスの最新のアイデアをリリース日順で表示
  • 新しくリリースされた機能(Done に移動したアイデア)の通知バブル
  • 訪問者は最大 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>

新しい bubble パラメータへの移行​

情報

パラメータ 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 またはユニークなクラスを selector パラメータに使用します。

ヒント

selector がクラス(ID ではない)の場合、ドットで始めます。クラス openWidget の場合、selector は .openWidget です。

ウィジェットの selector には以下を使用できます:

  • ID: #DucalisChangelogNotification, #someID, …
  • クラス: .DucalisChangelogNotification, .someClass, .some-class, …
  • 属性: [data-bubble="1"], [data-whats-new], …
  • 組み合わせ: div.someClass[data-show-bubble="true"], a[href^="https://feedback.ducalis.io"], …

通知カラー​

製品に合わせてカラーを変更します。デフォルトのカラー:

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

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

通知バブルの位置​

デフォルトでは、通知バブルは selector にアタッチされた要素に対して相対的に配置されます。

通知バブル位置のデモ

通知バブルの位置が気に入らない場合は、ブラウザの開発者ツールで調整し、ウィジェット設定に追加します:

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 つは、自動リリースノートです。

投票ボードは別アプリケーションのため、新しいアクティブユーザーのリストを常にインポートする手間を省くために、リリースノートの自動登録がデフォルトで有効になっています。

ユーザーは以下の場合に自動的に登録されます:

  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 に変更します。

更新日: 今日