Personalizar widgets del programa

Accede al editor de widgets

1. En el menú de navegación izquierdo, selecciona [Engage] → Content.

2. En el Widgets tarjeta, selecciona Editar widgets.

3. En el menú deslizable izquierdo, selecciona el nombre del widget que deseas editar.

   

Personaliza tus widgets

1

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.

   

Nota: Si deseas ver cómo se ve la plantilla sin comprometerte con el cambio, selecciona [Vista previa] antes de guardar. Solo selecciona el Guardar botón cuando estés listo para confirmar los cambios realizados.

2

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.

Nota: Para una explicación de los diferentes elementos del editor de widgets, consulta Descripción general del editor de widgets.

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 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.

   

Editar

Mover

Eliminar

3

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.

   

Reemplazar imágenes o logotipos

1. Dentro del lienzo, selecciona la foto que deseas cambiar.

2. En el Editar menú, selecciona [Eliminar] y luego selecciona Elegir archivo para volver a subir una nueva imagen.

   
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.

   

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

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

   
2. Selecciona la tarjeta correspondiente.

3. Selecciona el azul Agregar a botón para colocar el componente en el lienzo.

4

Paso 4: Vista previa y guardar

1. Previsualiza cómo aparecerá el widget a tus participantes seleccionando [Vista previa] desde la barra de menú superior.

   • Puedes alternar entre una vista previa de la experiencia para [Escritorio], [Tableta], o [Móvil] usuarios seleccionando el icono del dispositivo correspondiente.

2. Para volver a la interfaz de edición, selecciona [Editar] desde la barra de menú superior.

   
3. Guardar tus cambios.

   Advertencia: El editor de widgets no guarda automáticamente tus cambios. Haz clic Guardar con frecuencia para asegurarte de no perder tu trabajo.

Cuando seleccionas Guardar, los cambios se añadirán a tu borrador del programa.

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 en el cuadro Condición que define la lógica para cuando se cumple la condición. Contacta a nuestro equipo de soporte si necesitas ayuda.

Más información

• Edita el HTML de tu widget o micrositio para Advocate

• Instala paquetes NPM personalizados para Advocate