# Bibliotecas de Componentes Explicadas

Componentes são os blocos de construção individuais, como imagens de destaque e cartões de tarefa, que compõem seu widget ou microsite. Todos os nossos modelos atuais são alimentados por nossas bibliotecas de componentes Mint e Bedrock.

<details>

<summary>Componentes Mint</summary>

Widgets e microsites construídos com componentes Mint fornecem aos defensores do cliente as experiências mais recentes do Advocate. A maioria dos modelos atuais usa componentes Mint. Se você não tem certeza se está usando a biblioteca de componentes atual, pode verificar manualmente e atualizar sua biblioteca, se necessário.

Para atualizar para componentes Mint do seu **widget do programa**:

1. No menu de navegação à esquerda, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Conteúdo**.
2. Selecione **Editar widgets** no *cartão de widgets* cartão.
3. Selecione o nome do widget que você deseja editar.
4. No menu da barra lateral esquerda, selecione **Pacotes**.
5. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Adicionar pacote**.
6. Selecione **Adicionar** no *Componentes Mint* cartão.

Para atualizar para componentes Mint do seu **microsite**:

1. No menu de navegação à esquerda, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Conteúdo.**
2. Selecione o **Editar configurações** botão no *microsite* cartão.
3. Sob o *Hospedagem do Site* título, navegue até a *Pacotes* seção.
4. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Adicionar pacote**.
5. Selecione **Adicionar** no *Componentes Mint* cartão.
6. Selecione **Salvar**.

</details>

<details>

<summary>Componentes Bedrock</summary>

Todos os modelos alimentados por componentes Mint também têm o pacote de componentes Bedrock instalado. Componentes Bedrock não podem ser vistos pelos participantes, mas oferecem a capacidade de adicionar lógica avançada ao seu design. Eles podem mostrar condicionalmente outros componentes e definir de qual programa um componente obtém dados. Você pode encontrar o pacote de componentes Bedrock na *Componentes avançados* seção dentro da *Adicionar* aba no Editor de Widget ou Microsite.

Existem dois componentes no pacote de componentes Bedrock:

**Seção condicional**

O *componente de seção condicional* permite incluir conteúdo condicional com base no e-mail, país, segmento ou campo personalizado de um participante. Insira uma expressão JSONata na *Condição* caixa para definir as condições de exibição. Em seguida, mova qualquer conteúdo que você queira exibir para um grupo específico de participantes dentro da seção condicional.

**Seção do programa**

O *componente de seção do programa* permite que você substitua o ID do programa dos seus componentes filhos. Use-o para exibir conteúdo que não está vinculado a um programa específico. O *Seção do programa* componente está incluído na maioria dos modelos de widget e microsite por padrão.

</details>

<details>

<summary>Bibliotecas de componentes personalizadas</summary>

Você pode criar e usar seus próprios pacotes de componentes para personalizar ainda mais sua experiência Advocate. Esses componentes podem ser adicionados a qualquer modelo e usados junto com componentes fornecidos pelo Advocate.

Widgets do Advocate usam HTML padrão e [web components](https://www.webcomponents.org/) . Para usar seus próprios componentes em nosso editor de widgets, eles devem ser escritos como web components.

Para começar a criar seu widget com componentes personalizados, instale seu pacote personalizado:

1. No menu de navegação à esquerda, selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Conteúdo**.
2. Selecione **Editar widgets** no cartão de widgets.
3. Selecione o nome do widget que você deseja editar.
4. No menu da barra lateral esquerda, selecione **Pacotes**.
5. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Adicionar pacote**.
6. Selecione ![](https://526234278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **Adicionar do NPM**.
7. Insira o *nome do pacote*, *versão* e *caminho do arquivo*.
8. Selecione **Adicionar**.

</details>
