# コンポーネントライブラリの説明

コンポーネントは、ヒーロー画像やタスクカードのような個々の構成要素で、ウィジェットやマイクロサイトを構成します。現在のテンプレートはすべて、MintおよびBedrockのコンポーネントライブラリによって動作しています。

<details>

<summary>Mintコンポーネント</summary>

Mintコンポーネントで構築されたウィジェットやマイクロサイトは、カスタマーアドボケイトに最新のアドボケイト体験を提供します。現在のほとんどのテンプレートはMintコンポーネントを使用しています。現在使用しているコンポーネントライブラリが最新かどうかわからない場合は、手動で確認して必要に応じてライブラリを更新できます。

あなたの **プログラムウィジェット**:

1. 左側のナビゲーションメニューから選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content**.
2. を選択します **ウィジェットを編集** を *ウィジェット* カードで。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーのメニューで選択します **パッケージ**.
5. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **パッケージを追加**.
6. を選択します **追加** を *Mintコンポーネント* カードで。

あなたの **マイクロサイト**:

1. 左側のナビゲーションメニューから選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content。**
2. を選択します **設定を編集** ボタンを *マイクロサイト* カードで。
3. の下で、 *サイトホスティング* 見出しの下の *パッケージ* セクションに移動します。
4. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **パッケージを追加**.
5. を選択します **追加** を *Mintコンポーネント* カードで。
6. を選択します **保存**.

</details>

<details>

<summary>Bedrockコンポーネント</summary>

Mintコンポーネントで動作するすべてのテンプレートには、Bedrockコンポーネントパッケージもインストールされています。Bedrockコンポーネントは参加者からは見えませんが、デザインに高度なロジックを追加する機能を提供します。他のコンポーネントを条件付きで表示したり、どのプログラムからコンポーネントがデータを取得するかを定義したりできます。Bedrockコンポーネントパッケージは、以下にあります *高度なコンポーネント* セクションは *追加* ウィジェットまたはマイクロサイトエディタのタブ内にあります。

Bedrockコンポーネントパッケージには2つのコンポーネントがあります：

**条件付きセクション**

この *条件付きセクション* コンポーネントでは、参加者のメール、国、セグメント、またはカスタムフィールドに基づいて条件付きコンテンツを含めることができます。表示条件を設定するには、 *条件* ボックスにJSONata式を挿入します。次に、特定の参加者グループに表示したいコンテンツを条件付きセクション内の該当グループに移動します。

**プログラムセクション**

この *プログラムセクション* コンポーネントを使用すると、その子コンポーネントのプログラムIDを上書きできます。特定のプログラムにリンクされていないコンテンツを表示するために使用します。多くのウィジェットおよびマイクロサイトのテンプレートには、デフォルトでこの *プログラムセクション* コンポーネントが含まれています。

</details>

<details>

<summary>カスタムコンポーネントライブラリ</summary>

独自のコンポーネントパッケージを構築して使用し、アドボケイト体験をさらにカスタマイズできます。これらのコンポーネントは任意のテンプレートに追加でき、提供されているアドボケイトコンポーネントと一緒に使用できます。

アドボケイトのウィジェットは標準的なHTMLと [Webコンポーネント](https://www.webcomponents.org/) を使用します。ウィジェットエディタで独自のコンポーネントを使用するには、それらがWebコンポーネントとして記述されている必要があります。

カスタムコンポーネントでウィジェットの構築を開始するには、カスタムパッケージをインストールします：

1. 左側のナビゲーションメニューから選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content**.
2. を選択します **ウィジェットを編集** ウィジェットカードで。
3. 編集したいウィジェットの名前を選択します。
4. 左側のサイドバーのメニューで選択します **パッケージ**.
5. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **パッケージを追加**.
6. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **NPMから追加**.
7. パッケージを入力 *名前*, *バージョン* および *ファイルパス*.
8. を選択します **追加**.

</details>
