# Instalar Pacotes NPM Personalizados para o Advocate

Você pode instalar pacotes NPM personalizados para uso no microsite ou nos widgets do seu programa Advocate.

#### Instale um pacote NPS personalizado

{% tabs %}
{% tab title="Instale pacotes NPM personalizados para um microsite" %}
Se você quiser usar componentes personalizados para criar seu microsite, então pode instalar um pacote personalizado.

1. No menu de navegação à esquerda, selecione ![](https://impact-1.gitbook.io/docs/emvxfLrwrlacc4y3y02Y/~gitbook/image?url=https%3A%2F%2F4048883401-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwMLlMoFBtKJa8ptd3zaw%252Fuploads%252Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%252Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=71dd50ef\&sv=2) **\[Engajar] → Conteúdo**.
2. Na *cartão do microsite*, selecione **Editar configurações**.
3. Na seção *Hospedagem do site* , selecione **+ Adicionar pacote** → **Adicionar do NPM**.
4. Digite o nome do pacote, *Versão*, e *Arquivo* .
5. Selecione **Adicionar**.

   * Volte ao [editor do microsite](/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md) para começar a adicionar seus componentes personalizados ao seu site.

   <div data-with-frame="true"><figure><img src="/files/2cc8b24ad069c65991e9f4ae02289e2525486952" alt="" width="375"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Instale pacotes NPM personalizados para widgets do programa" %}
Se o seu programa tiver um widget personalizado que não use nossos componentes, então você pode instalar um pacote personalizado.

1. No menu de navegação à esquerda, selecione ![](https://impact-1.gitbook.io/docs/emvxfLrwrlacc4y3y02Y/~gitbook/image?url=https%3A%2F%2F4048883401-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwMLlMoFBtKJa8ptd3zaw%252Fuploads%252Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%252Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=71dd50ef\&sv=2) **\[Engajar] → Conteúdo**.
2. No cartão do widget, selecione **Editar widgets**.
3. Em *Widgets do programa*, selecione um widget.

<div data-with-frame="true"><figure><img src="/files/45ee0b141e440694ba1cb0f7be3119729bae3067" alt="" width="563"><figcaption></figcaption></figure></div>

1. No menu de navegação à esquerda, selecione **Pacotes**.
2. Selecione ![](/files/5f8e2def01059c99d73da212d973e54243f4fc71) **Adicionar pacote**.
3. Selecione **Adicionar do NPM**.
4. Digite o nome do pacote, a versão e o caminho do arquivo.
5. Selecione **Adicionar**.
   {% endtab %}
   {% endtabs %}

Saiba mais sobre como [Personalizar widgets do programa](/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/pt-br/sobre-o-que-voce-gostaria-de-aprender/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.