iframe として埋め込む

iframe コードを使用して、投票ボードを製品に直接埋め込みます。ユーザーはアプリケーションを離れることなくボードにアクセスできます。

以下の例は、Ducalis の投票ボードをページに埋め込み、フレーム内で開いた状態を示しています。

ボードを埋め込む

投票ボードを選択し、公開されていることを確認します。
Voting settings (投票設定) → Embed (埋め込み) → Embed The Whole Board (ボード全体を埋め込む) セクションに移動します。
Widget Base Code をコピーします。
ウィジェットコードに embedBoard オブジェクトを追加します（埋め込みに必須）。

最終的なコードは次のようになります:

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

    user: {
        // Required
        email: "Your user Email",
        hash: "User hash",

        // 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",
            customFields: {
                created_at: "2019-06-02 17:10:00",
                spend: 123000,
                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}"
    },
});

デフォルトページを設定する

ユーザーがウィジェットを読み込んだときに、ロードマップページまたはチェンジログページのどちらを最初に開くかを選択します。

コード内で defaultView を設定します。roadmap または changelog に設定してください:

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

チェンジログページとロードマップページでは、オプションで特定のフィルタまたはアクションを開くことができます（認証済みユーザーのみ）:

dclsPxl("initWidget", {
    // Optional
    // Use to open a specific filter (only for authorized users)
    openNewIdea: true,
    myIdeas: true,
    myVotes: true,
});

通知バブルを追加する

通知バッジを表示して、新しいアップデートやリリースをユーザーに知らせます。

ウィジェットコードに bubble オブジェクトを追加します:

dclsPxl("initWidget", {
    bubble: {
        // Optional, default is ".Ducalis-changelog-widget"
        // Use for bubble without widget
        selector: '#embedBoardBuble',

        // Optional, default is undefined
        // Clears initial styles. Use for custom styles by className ONLY.
        className: 'some-class-name',

        // Optional, default is undefined
        // Customizes initial styles.
        style: {
            right: '7px',
            top: '7px',
            backgroundColor: '#db3737',
            borderRadius: '4px',
            fontSize: '13px',
        }
    },
});

背景をカスタマイズする

透明な背景を追加して、ボードをインターフェースやブランドに合わせます:

embedBoard: {
    // Optional, default is false
    // Makes iframe and board background transparent
    transparent: true,
}

カスタム CSS クラスを追加する

上級者向け

デフォルトスタイルなしで通知バブルにカスタムクラス名を追加します。独自の CSS で通知バブルをカスタマイズできます。

bubble.className を使用してクラスを指定します:

bubble: {
    // Optional, clears initial styles
    // Use for custom styles by className ONLY. Default is undefined
    className: 'some-class-name',
}

非推奨パラメータ

パラメータ bubbleClassName は引き続き動作しますが、非推奨になる予定です。代わりに bubble.className を使用してください。

リリースノートへの自動サブスクリプション

リリースノートへの自動サブスクリプションはデフォルトで有効になっています。これにより、新しいアクティブユーザーを常にインポートする必要がなくなります。

ユーザーは以下の条件で自動的にサブスクライブされます:

ウィジェット経由で Ducalis にユーザーデータを送信する（user.email と user.hash が必須）。
ユーザーがウィジェットまたはボードフレームを開く。

カスタムメールドメインを設定する

サブスクライブしたユーザーにリリースノートを送信するには、カスタムメールドメインを設定してください。

ボードを埋め込む​

デフォルトページを設定する​

通知バブルを追加する​

背景をカスタマイズする​

カスタム CSS クラスを追加する​

リリースノートへの自動サブスクリプション​

関連記事​