> ## Documentation Index
> Fetch the complete documentation index at: https://ayuda.pxsol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ¿Cómo crear un Pop-Up en tu sitio web en el Editor Web?

> Aprende a crear, configurar y publicar pop-ups o toast en tu sitio web para mejorar la conversión y comunicación con tus usuarios.

## Introducción

En esta guía aprenderás a **crear y configurar pop-ups** dentro del Editor Web Modular. Esta funcionalidad te permite:

* Promocionar ofertas o mensajes clave.
* Aumentar la conversión (por ejemplo, reservas directas).
* Comunicar información importante al usuario en momentos estratégicos.

<Info>
  **Antes de comenzar**

  Antes de continuar, asegúrate de tener acceso al **Editor Web Modular** y contar con permisos para **editar el sitio web**.
</Info>

## ¿Dónde se encuentra esta función?

Puedes acceder a esta funcionalidad desde el menú principal de la siguiente manera:

**Menú principal → Mis sitios → Editar un Sitio Web**

Luego, selecciona la página donde deseas trabajar, por ejemplo, "Inicio".

## Cómo crear un pop-up

Sigue estos pasos para configurar tu primer pop-up.

<Steps>
  <Step title="1. Accede al gestor de pop-ups">
    Dentro del editor de la página seleccionada, haz clic en el botón de **Pop-ups**. Es el anteúltimo icono en la barra de herramientas del editor.

    Al hacer clic, se abrirá un panel de gestión que muestra:

    * El total de pop-ups creados.
    * Cuántos están activos e inactivos.
    * Las impresiones del mes en curso.
    * Un listado completo con filtros y buscador.

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/2132986276861d70397ee9ad2d48635d84633d9a638.png" alt="Imagen" />
    </Frame>
  </Step>

  <Step title="2. Crea un nuevo pop-up">
    Haz clic en el botón **Nuevo pop-up**. El sistema te pedirá que selecciones el tipo de elemento que deseas crear:

    * **Pop-up**: Un modal centrado que captura la atención del usuario.
    * **Toast**: Un mensaje más discreto que aparece generalmente en una esquina.

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/5332466295edada58ee23fe2139835ef44f752f326.png" alt="Imagen" />
    </Frame>
  </Step>

  <Step title="3. Completa la información">
    Rellena los campos del formulario para definir el contenido de tu pop-up:

    * **Nombre**: Identificador interno (no visible para el usuario).
    * **Título**: El encabezado principal del pop-up.
    * **Texto descriptivo**: El cuerpo del mensaje.
    * **Imagen**: Un elemento visual para acompañar el texto.
    * **Botón**: La llamada a la acción principal.

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/710995442002c0c7941c7542cc95551140564a8f2c.png" alt="Imagen" />
    </Frame>
  </Step>

  <Step title="4. Configura el botón">
    Define la acción y apariencia del botón de llamada a la acción:

    * **Texto**: El texto que se mostrará en el botón (ej: "Reservá ahora").
    * **URL de destino**: La dirección a la que se redirigirá al usuario.
    * **Abrir en nueva pestaña**: Opción para que el enlace se abra en una pestaña nueva.

    <Warning>
      **Formato de URL Requerido**

      La URL de destino debe comenzar obligatoriamente con `https://`. Si no se cumple este formato, el sistema no te permitirá guardar y continuar.
    </Warning>
  </Step>

  <Step title="5. Define dónde se mostrará">
    Selecciona en qué páginas de tu sitio web quieres que aparezca el pop-up. Puedes elegir una o varias páginas de la lista.

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/195523766463b57bc4aa8267e9b083a85dfd2eec0e9.png" alt="Imagen" />
    </Frame>
  </Step>

  <Step title="6. Configura el comportamiento">
    Define las reglas de activación del pop-up para controlar cuándo y cómo lo verán tus usuarios:

    * **Tiempo de aparición**: Muestra el pop-up después de `X` segundos.
    * **Activación por scroll**: Muestra el pop-up cuando el usuario se desplaza un porcentaje de la página.
    * **Activación por clic**: Activa el pop-up al hacer clic en un elemento específico.
    * **Dispositivo**: Elige si se mostrará en `desktop`, `mobile` o `ambos`.
    * **Frecuencia**:
      * **Una vez por sesión**: Se muestra solo una vez hasta que el usuario cierra el navegador.
      * **Siempre**: Se muestra cada vez que se cumplen las condiciones, en cada visita.

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/17774887970c7454ed5d485cdf494512c7d03b3d93f.png" alt="Imagen" />
    </Frame>
  </Step>

  <Step title="7. Publica el pop-up">
    Una vez que hayas configurado todos los detalles, haz clic en **Publicar**. El pop-up se activará inmediatamente y aparecerá en tu listado con el estado "Activo".

    <Frame>
      <img src="https://files-public-web.s3.us-west-2.amazonaws.com/1978/company/library/user/710995474437a476a4403820aea4ccb3be677ec768.png" alt="Imagen" />
    </Frame>
  </Step>
</Steps>

## Resultado esperado

<Check>
  Una vez completado el proceso, el pop-up estará activo en tu sitio web. Se mostrará a los usuarios según la configuración de comportamiento que definiste, y podrás monitorear su estado e impresiones desde el gestor de pop-ups.
</Check>

## Consideraciones importantes

<Warning>
  * **Evita la saturación**: No configures demasiados pop-ups en la misma página para no abrumar al usuario.
  * **Relevancia del mensaje**: Asegúrate de que el contenido del pop-up sea claro, relevante y aporte valor.
  * **Verificación de enlaces**: Comprueba siempre que los enlaces del botón funcionen correctamente antes de publicar.
</Warning>

## Buenas prácticas

<Tip>
  * **Llamadas a la acción claras**: Usa verbos y mensajes orientados a la acción en tus botones (ej: "Obtener descuento", "Ver más").
  * **Ofrece valor**: Utiliza los pop-ups para comunicar beneficios claros como descuentos, contenido exclusivo o información útil.
  * **Timing estratégico**: Configura el tiempo de aparición para que no interrumpa la experiencia del usuario en un momento crítico de su navegación.
</Tip>

## Solución de problemas comunes

<AccordionGroup>
  <Accordion title="El pop-up no aparece en mi sitio web">
    **Posibles causas:**

    * El pop-up no está publicado (su estado es "Inactivo").
    * No está asignado a la página correcta.
    * La configuración de frecuencia ("Una vez por sesión") impide que se muestre de nuevo si ya lo viste.

    **Solución:**

    1. Revisa que el pop-up tenga el estado "Activo" en el gestor.
    2. Abre la configuración del pop-up y verifica que la página donde esperas verlo esté seleccionada.
    3. Intenta abrir tu sitio en una ventana de incógnito para simular una nueva sesión.
  </Accordion>

  <Accordion title="No puedo avanzar al siguiente paso al crear el pop-up">
    **Posible causa:**

    * La URL del botón no tiene un formato válido.

    **Solución:**

    * Asegúrate de que la URL que ingresaste en la configuración del botón comience con `https://`.
  </Accordion>
</AccordionGroup>

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Puedo editar un pop-up después de crearlo?">
    Sí. Desde el listado en el gestor de pop-ups, puedes hacer clic en el menú de opciones de cualquier pop-up para **editarlo** o **eliminarlo** en cualquier momento.
  </Accordion>

  <Accordion title="¿Cuál es la diferencia entre un pop-up y un toast?">
    El **pop-up** es un elemento modal, más grande y centrado, diseñado para capturar la atención de inmediato. Es ideal para anuncios importantes. El **toast** es una notificación más pequeña y sutil, generalmente mostrada en una esquina de la pantalla, que es menos invasiva.
  </Accordion>
</AccordionGroup>

***

### Preguntas que responde esta guía

* ¿Cómo crear un pop-up en mi sitio?
* ¿Dónde se gestionan los pop-ups?
* ¿Qué diferencia hay entre pop-up y toast?
* ¿Cómo configurar cuándo se muestra un pop-up?
* ¿Cómo editar o eliminar un pop-up existente?