# Personalizar widgets del programa

#### Accede al editor de widgets

1. En el menú de navegación izquierdo, selecciona ![](https://3147719151-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. En el *Widgets* tarjeta, selecciona **Editar widgets.**
3. En el menú deslizable izquierdo, selecciona el nombre del widget que deseas editar.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-54ffcf92fdcf6527acb6390b421de09f83d5a8f4%2F5d8a0b7afd11abc5f0db04be64b30635a1b0d697f529ce21338b6c8af1fa32df.jpg?alt=media" alt="" width="513"><figcaption></figcaption></figure></div>

#### Personaliza tus widgets

{% stepper %}
{% step %}

#### **Paso 1: Elige una plantilla**

1. En el menú deslizable izquierdo, debajo de *Widget actual*, selecciona **Plantillas**.
2. Seleccionar **Aplicar plantilla** junto a la plantilla con la que deseas comenzar.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-23c217eaab5f3d3a6ab40f1fe4282bd44c6ee667%2F225f0149361a6b987d2a69f1c8f8d6e006b237c6fc37f35bb439f5bac468c88a.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Nota:** Si deseas ver cómo se ve la plantilla sin comprometerte con el cambio, selecciona ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vista previa]** antes de guardar. Solo selecciona el **Guardar** botón cuando estés listo para confirmar los cambios realizados.
{% endhint %}
{% endstep %}

{% step %}

#### **Paso 2: Ajustar el contenido del widget**

Puedes agregar, editar, mover o eliminar componentes para modificar el contenido que tus defensores clientes ven en el widget.

{% hint style="info" %}
**Nota:** Para una explicación de los diferentes elementos del editor de widgets, consulta [Descripción general del editor de widgets](https://help.impact.com/brand/es/que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview).
{% endhint %}

{% tabs %}
{% tab title="Agregar" %}

1. En el lado derecho de la página, en el *Componente* menú **Agregar** pestaña, selecciona un grupo de componentes.
   * Obtén más información sobre los [componentes disponibles](https://help.impact.com/brand/es/que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) y cómo están agrupados.
2. Selecciona el componente apropiado.
3. Selecciona el azul **Agregar a** botón donde quieres que el componente aparezca en el lienzo.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Editar" %}
Las propiedades que puedes editar dependerán del tipo de componente que seleccionaste. Por ejemplo, si seleccionas el *Componente de imagen principal* , podrás seleccionar una nueva imagen y cambiar el color de fondo. Si seleccionas un elemento solo de texto como un encabezado, entonces puedes modificar la fuente, el color del texto y el contenido del texto.

1. Selecciona el componente que deseas editar.
2. Usa las opciones en la *Componente* menú **Editar** pestaña para cambiar sus propiedades.

   * Si deseas insertar un enlace en un componente de texto, puedes [hacerlo editando el HTML del widget](https://help.impact.com/brand/es/que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate).

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Mover" %}

1. Dentro del lienzo, selecciona el componente que deseas mover.
2. Seleccionar ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Mover]**.
   * Algunos componentes no se pueden mover. La ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Mover]** opción solo aparecerá si hay otra ubicación válida en el lienzo a la que el componente pueda moverse.
3. Selecciona el azul **Mover a** botón donde quieres que vaya el componente.

   * En lugar de un enfoque de arrastrar y soltar, necesitarás seleccionar el botón y luego seleccionar el destino.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Eliminar" %}

1. Selecciona el componente que deseas eliminar en el lienzo.
2. Seleccionar ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Eliminar]**.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### **Paso 3: Personalizar la apariencia y el tema del widget**

**Agregar imágenes o logotipos**

1. A la derecha, desde la *Componente* menú **Agregar** pestaña, selecciona la **categoría Componentes comunes** .
2. Selecciona cualquiera de:
   * **Imagen principal con superposición** (una imagen con texto editable superpuesto)
   * **Imagen** (una imagen simple sin texto encima)
3. Agrega la imagen al lienzo.
4. Desde el *Menú de componentes* **Editar** pestaña, selecciona la **Elegir archivo** botón debajo del *Imagen* encabezado.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-564558169dbd2a3efe25c902610d7278c257626b%2F47c2ef7ef4780763f8648b19a1a580e43f68104b6205f5de72c51bf8ae9d8a1c.jpg?alt=media" alt="" width="353"><figcaption></figcaption></figure></div>

**Reemplazar imágenes o logotipos**

1. Dentro del lienzo, selecciona la foto que deseas cambiar.
2. En el **Editar** menú, selecciona ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Eliminar]** y luego selecciona **Elegir archivo** para volver a subir una nueva imagen.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-30ee95734c8150b1983dea767f0e729e157df91e%2F65602249ec03ef7f267348ae795f32755c8ca109ed253d98bab523b584b27f3e.jpg?alt=media" alt="" width="351"><figcaption></figcaption></figure></div>
3. Sube la imagen usando uno de estos métodos:
   * Arrastra y suelta la imagen
   * Busca un archivo en tu computadora
   * En el *Pestaña de dirección web* pega la URL pública del archivo
4. Seleccionar **Listo**.

**Ajustar qué botones de compartir se muestran**

Puedes editar los botones de compartir existentes usando el **Editar** menú.

1. Selecciona el botón de compartir que deseas editar en el lienzo.
2. En el **Editar** pestaña, selecciona el nombre del sitio o servicio debajo de *Medio de compartición* encabezado.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-329fb56148698f747349956ce5d6d95859a7bc3a%2Fcb6384644531cbcceed4a4f72bac70c0883e383f8619f6e03f304e4e281919b2.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

Agrega un nuevo botón de compartir usando la **Agregar** menú.

1. Desde el **Agregar** pestaña, selecciona **Compartir**.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e8ffcffaec4bcabee098c5811ceca22f74c38e9e%2F349cee3ff230764af0891ae493ab5b8af34a592711ec5a7b027a3fc5b77a02ef.jpg?alt=media" alt="" width="339"><figcaption></figcaption></figure></div>
2. Selecciona la tarjeta correspondiente.
3. Selecciona el azul **Agregar a** botón para colocar el componente en el lienzo.
   {% endstep %}

{% step %}

#### **Paso 4: Vista previa y guardar**

1. Previsualiza cómo aparecerá el widget a tus participantes seleccionando ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Vista previa]** desde la barra de menú superior.
   * Puedes alternar entre una vista previa de la experiencia para ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Escritorio]**, ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tableta]**, o ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Móvil]** usuarios seleccionando el icono del dispositivo correspondiente.
2. Para volver a la interfaz de edición, selecciona ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Editar]** desde la barra de menú superior.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-cebcc495d7dcfd7f7e3a77ab7061913c92b9dcf2%2F0138d6f68eff457694e6f8a5120f0165ae55112510f8928f35fc9771e5a97646.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. **Guardar** tus cambios.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Advertencia:</strong> El editor de widgets no guarda automáticamente tus cambios. Haz clic <strong>Guardar</strong> con frecuencia para asegurarte de no perder tu trabajo.</p></div>

Cuando seleccionas **Guardar**, los cambios se añadirán a tu [borrador del programa](https://help.impact.com/brand/es/que-te-gustaria-aprender/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate).
{% endstep %}
{% endstepper %}

#### Opciones avanzadas de personalización

Los componentes avanzados te permiten incluir contenido condicional que se basa en el *correo electrónico*, *segmento*, o *campo personalizado*. Por ejemplo, si deseas mostrar una tabla de clasificación solo para participantes que son suscriptores de nivel oro, la **sección condicional en el componente de segmento** te permitirá hacerlo.

Puedes agregar componentes avanzados desde la **Agregar** pestaña. Configurarlos requiere un poco más de trabajo ya que necesitarás ingresar una [expresión JSONata](http://docs.jsonata.org/overview.html) en el *cuadro Condición* que define la lógica para cuando se cumple la condición. Contacta a nuestro [equipo de soporte](mailto:saasquatch-support@impact.com) si necesitas ayuda.

#### Más información

* [Edita el HTML de tu widget o micrositio para Advocate](#access-the-widget-editor-0-0)
* [Instala paquetes NPM personalizados para Advocate](https://help.impact.com/brand/es/que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate)
