> ## 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 Popups en la página Web?

> En esta guía explicaremos cómo crear Popups para que se visualicen en la página Web de su establecimiento.

## Crear Popups para tu Página Web

En esta guía, te explicaremos paso a paso cómo crear y configurar popups para que se visualicen en la página web de tu establecimiento.

### Acceso a la aplicación de Popups

1. Accede desde el menú lateral a la aplicación **Marketing - Popups Web**.

   <Frame>
     <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Aug-13-2024-01-10-26-3329-PM.png" alt="Menú lateral Marketing - Popups Web" />
   </Frame>

   También puedes acceder directamente desde el buscador **Omnibox**.

   <Frame>
     <img src="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/image-png-Aug-13-2024-01-11-13-4749-PM.png" alt="Buscador Omnibox" />
   </Frame>

2. Selecciona **Nuevo Popup**.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-01-54-57-46-PM.png" alt="Botón Nuevo Popup" />
   </Frame>

3. Se abrirá una nueva ventana donde podrás visualizar distintas opciones de configuración. Marca el checkbox de **Nuevo Popup en blanco**.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-01-55-48-64-PM.png" alt="Seleccionar Nuevo Popup en blanco" />
   </Frame>

4. Una vez seleccionado, a la derecha podrás observar la explicación del mismo. Selecciona **Comenzar**.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-01-56-16-80-PM.png" alt="Botón Comenzar" />
   </Frame>

5. Se abrirá una ventana con un asistente que te guiará paso a paso para configurar el Popup.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-01-57-19-02-PM.png" alt="Asistente de configuración de Popup" />
   </Frame>

### Configuración del Popup

#### 1) Tipo de Popup

Define el tipo de popup que deseas configurar:

* **Popup:** Ventana emergente personalizable que se puede configurar vertical u horizontalmente. Puedes vincularlo a una promoción existente (seleccionando cuál de las creadas) o usarlo como Newsletter.
* **Toast:** Diálogo emergente más pequeño que aparece en la periferia de la pantalla.

  <Frame>
    <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-01-11-94-PM.png" alt="Selección de Tipo de Popup" />
  </Frame>

Una vez seleccionadas las opciones, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

#### 2) Configuración básica

Define los elementos principales de tu popup:

* **Título:** El encabezado principal del popup.
* **Texto principal:** El texto que aparecerá justo debajo del título.
* **Imagen:** Opcional. La imagen se optimizará automáticamente y se mostrará ocupando el espacio disponible según el dispositivo.

  <Frame>
    <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-04-44-38-PM.png" alt="Configuración básica del Popup" />
  </Frame>

Una vez configurada la información, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

<Note>
  **RECOMENDACIONES DE TAMAÑO PARA IMÁGENES:**

  La imagen que subas al popup siempre se recortará para adaptarse, pero los tamaños recomendados (donde se recorta lo menos posible) son:

  * **Popup Estándar Vertical:** 500px ancho x 350px alto
  * **Popup Estándar Horizontal:** 400px ancho x 500px alto

  Si vas a incluir texto en la imagen (no recomendado), colócalo en los 2/3 superiores de la imagen.

  <a href="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/template-popup.jpg" target="_blank" rel="noopener">
    Descargar plantilla para popup estándar vertical
  </a>

  <a href="https://7398646.fs1.hubspotusercontent-na1.net/hubfs/7398646/template-popup-horizontal.jpg" target="_blank" rel="noopener">Descargar plantilla para popup estándar horizontal</a>
</Note>

#### 3) Posición del Popup

Elige en qué parte de la pantalla quieres que aparezca la ventana emergente.

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-08-11-79-PM.png" alt="Selección de Posición del Popup" />
</Frame>

Una vez seleccionado, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

#### 4) Interacción del Popup

Configura el funcionamiento y el botón de acción de la ventana emergente.

Activa **CTA** *(Call To Action - botón de acción)* y define los siguientes campos:

* **Texto del botón:** El texto que aparecerá en el botón.
* **URL del botón:** La dirección a la que dirigirá al presionarlo.
* **Abrir enlace en:** Selecciona si el enlace debe abrirse en una nueva ventana o en la misma.

  <Frame>
    <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-12-03-35-PM.png" alt="Configuración de Interacción del Popup" />
  </Frame>

Una vez completados los campos, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

#### 5) Configuración Avanzada

Ajusta detalles de funcionamiento avanzado de la ventana emergente:

* **Tiempo hasta mostrar el popup:** Define la demora en segundos hasta que el popup se muestra en la página.
* **Popup de Abandono:** Muestra el popup antes de que el usuario cierre la ventana o pestaña del navegador. Este modo detecta cuando el usuario dirige el cursor hacia el botón de cierre, funciona solo en escritorio y no se activa si el usuario hace clic en algún enlace dentro de la página.

  <Frame>
    <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-15-14-40-PM.png" alt="Configuración Avanzada del Popup" />
  </Frame>

Una vez definidos los campos, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

#### 6) Páginas de Visualización

Define en qué páginas de tu sitio deseas mostrar la ventana emergente:

* Motor de reservas - Escritorio.
* Motor de reservas - Móvil.
* Index - Escritorio (página principal de la web).
* Index - Móvil (página principal de la web).

Puedes seleccionar todas o deseleccionarlas según tus necesidades.

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-17-03-66-PM.png" alt="Selección de Páginas para mostrar Popup" />
</Frame>

Una vez seleccionadas las opciones, presiona:

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-05-12-05-PM.png" alt="Botón Continuar" />
</Frame>

<Note>
  Si seleccionas el "Motor de reservas", el popup se mostrará en la página de inicio del motor cuando no haya búsquedas realizadas.

  **No es posible** mostrar popups en el motor de reservas una vez que un visitante ha realizado una búsqueda en la web.
</Note>

### Revisión y Finalización

1. **Revisar y confirmar.** Verifica que tu popup se vea tal como lo esperabas.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-33-01-83-PM.png" alt="Vista previa del Popup" />
   </Frame>

2. Presiona **Finalizar y Guardar**.

   <Frame>
     <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-May-12-2021-02-33-21-76-PM.png" alt="Botón Finalizar y Guardar" />
   </Frame>

### Gestión de Popups

**NOTA:** Si deseas desactivar temporalmente un popup para que no se muestre, puedes hacerlo desde el interruptor (switch) en la columna **Estado**. Desde allí podrás controlar la visualización del mismo.

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-Jul-07-2021-10-25-19-51-PM.png" alt="Control de Estado del Popup" />
</Frame>

También podrás eliminar popups desde **Acciones > Borrar**.

<Frame>
  <img src="https://f.hubspotusercontent40.net/hubfs/7398646/image-png-Jul-07-2021-10-26-12-59-PM.png" alt="Opción Borrar Popup" />
</Frame>