プログラムウィジェットをカスタマイズする

ウィジェットエディターにアクセスする

1. 左側のナビゲーションメニューから、 [Engage] → コンテンツ.

2. の ウィジェット カードで、 ウィジェットを編集する。

3. 左側のスライドアウトメニューで、編集したいウィジェットの名前を選択します。

   

ウィジェットをカスタマイズする

1

ステップ1：テンプレートを選択する

1. 左側のスライドアウトメニューで、 現在のウィジェットの下で、 テンプレート.

2. を選択します テンプレートを適用 開始したいテンプレートの横にあるものを選択します。

   

注： 変更を確定せずにテンプレートの見た目をプレビューしたい場合は、 [プレビュー] を選択してから保存してください。変更を確定する準備ができたら、 保存 ボタンのみを選択します。

2

ステップ2：ウィジェットの内容を調整する

コンポーネントを追加、編集、移動、または削除して、顧客アドボケートがウィジェットで目にするコンテンツを変更できます。

注： ウィジェットエディターの各要素については、 ウィジェットエディターの概要.

追加

1. ページ右側の コンポーネント メニューの 追加 タブで、コンポーネントグループを選択します。

   • 利用可能なコンポーネント と、それらがどのようにグループ化されているかについて詳しく学びます。 。

2. 適切なコンポーネントを選択します。

3. 青い 追加先 ボタンを、キャンバス上でコンポーネントを表示したい場所に選択します。

   

編集

移動

削除

3

ステップ3：ウィジェットの外観とテーマをカスタマイズする

画像やロゴを追加する

1. 右側の コンポーネント メニューの 追加 タブから、 共通コンポーネント カテゴリを選択します。

2. 次のいずれかを選択します。

   • オーバーレイヒーロー画像 （テキストが重ねて表示され、編集可能な画像）

   • 画像 （上にテキストのない通常の画像）

3. 画像をキャンバスに追加します。

4. の コンポーネントメニューの 編集 タブから、 ファイルを選択 ボタンを、 画像 見出しの下にある

   

画像やロゴを置き換える

1. キャンバス内で、変更したい写真を選択します。

2. の 編集 メニューで、 [削除] を選択し、次に ファイルを選択 を選択して新しい画像を再アップロードします。

   
3. 次のいずれかの方法で画像をアップロードします。

   • 画像をドラッグ＆ドロップする

   • コンピューター上のファイルを参照する

   • の ウェブアドレス タブで、ファイルの公開URLを貼り付けます

4. を選択します 完了.

表示する共有ボタンを調整する

既存の共有ボタンは 編集 メニューを使って編集できます。

1. キャンバス上で、編集したい共有ボタンを選択します。

2. の 編集 タブで、下のサイトまたはサービス名を選択します 共有メディア 見出しの下にある

   

新しい共有ボタンを追加するには、 追加 メニューを使って編集できます。

1. の 追加 タブで、 共有.

   
2. 適切なカードを選択します。

3. 青い 追加先 ボタンを使って、コンポーネントをキャンバスに配置します。

4

ステップ4：プレビューして保存する

1. 上部メニューバーから [プレビュー] を選択して、参加者にウィジェットがどのように表示されるかをプレビューします。

   • 次の体験のプレビューを切り替えられます。 [デスクトップ], [タブレット]、または [モバイル] それぞれのデバイスアイコンを選択することで、ユーザー向けの表示に切り替えられます。

2. 編集画面に戻るには、 [編集] を選択して、参加者にウィジェットがどのように表示されるかをプレビューします。

   
3. 保存 変更します。

   警告： ウィジェットエディターは変更を自動保存しません。作業を失わないよう、 保存 を頻繁にクリックしてください。

を選択すると、変更は 保存プログラムの下書き に追加されます.

高度なカスタマイズオプション

高度なコンポーネントを使用すると、参加者の メールアドレス, セグメント、または カスタムフィールドに基づく条件付きコンテンツを含めることができます。たとえば、ゴールドレベルの購読者にのみリーダーボードを表示したい場合は、 セグメントの条件付きセクション コンポーネントで実現できます。

高度なコンポーネントは 追加 タブから追加できます。設定には少し手間がかかり、 JSONata式 を 条件 ボックスに入力して、条件が満たされるときのロジックを定義する必要があります。必要であれば、 サポートチーム までご連絡ください。

さらに詳しく

• Advocate 用のウィジェットまたはマイクロサイトのHTMLを編集する

• Advocate にカスタムNPMパッケージをインストールする