Saltar al contenido principal

Subir landing personalizados

Otra adición a nuestro tablero es la capacidad de subir landings personalizados. Al proporcionar el código HTML de tu sitio web, puedes asociarlo perfectamente con cualquier ruta dentro del tablero y obtener una vista del contenido y diseño de tu sitio web estático.

Para utilizar esta funcionalidad, simplemente sigue estos pasos:

Subir un landing personalizado

Primero, prepara el código HTML y CSS de tu página web y comprímelo en un archivo ZIP. Después de esto, dirígete a la página de Gestión de landings dentro del tablero.

Una vez que estés en la página de Gestión de landings, localiza y haz click en el botón de subir. En la nueva página, completa la información requerida relacionada con tu landing.

Screenshot Select Name Page in Dashboard

  1. Título: Especifica el título de tu landing.

  2. Descripción: Opcionalmente, proporciona una descripción del landing.

  3. Ruta: Determina la ubicación de la página dentro del tablero al especificar la información que seguirá a esta URL: https:/dash.onland.io/

  4. Mostrar Navbar por defecto: Muestra el navbar por defecto del dashboard en el nuevo landing.

  5. Cargar eventos: Si tu página va a cargar los eventos desde el Tablero en alguna sección usando las clases especificadas para los eventos, activa esta opción.

  6. Usa meta tags personalizadas: Cambia la información SEO de la página, puedes agregar un título, descripción y una imagen que aparecerán cuando compartas el landing en redes sociales.

Guardar y previsualizar

Una vez que hayas ingresado todos los detalles necesarios, guarda tus cambios. Serás redirigido a la página de Gestión de landings, donde podrás previsualizar tu página de web en una ruta de prueba designada.

Aprovecha esta previsualización para evaluar la apariencia y funcionalidad de tu página web antes de publicarla.

Publicación

Cuando estés satisfecho con la previsualización, haz click en el botón junto al menú de opciones para publicar tu landing. Luego, simplemente selecciona la opción "ver" para ir a la ruta elegida dentro del tablero.

Cambiar la página de Inicio con landings personalizados

Puedes cambiar la página de inicio de tu tablero siguiendo los pasos anteriores y simplemente determinando una ruta específica para tu nueva página de inicio.

Raíz del tablero

En este caso, deseas colocar la página en la raíz de tu sitio, por lo que la ruta será '/'.

Actualiza el campo para reflejar la nueva ruta:

Captura de pantalla de la pestaña de Gestión de landings

Al hacer esto, después de publicar, tu nueva página se convertirá en la página de inicio de tu tablero.

Habilitar Tarjetas de Eventos Públicos en Páginas de Aterrizaje Personalizadas

Si deseas mostrar los eventos públicos actuales de tu panel en la página principal, puedes seguir estas instrucciones:

Al crear la sección donde aparecerán los eventos personalizados en tu página de aterrizaje, agrega las clases requeridas a cada elemento en tu HTML. Estas clases ayudarán al sistema a reconocer dónde debe colocarse cada texto de manera dinámica.

Asegúrate de que las clases se añadan de manera ordenada.

Clases requeridas:

  • Tarjeta de Evento: .event-card

  • Hora de la Tarjeta de Evento: .event-card-time

  • Nombre de la Tarjeta de Evento: .event-card-name

  • Descripción de la Tarjeta de Evento: .event-card-description

  • Imagen de la Tarjeta de Evento: .event-card-image

  • Recurrencia de la Tarjeta de Evento: .event-card-recurrence

  • Botón de la Tarjeta de Evento (si necesitas un botón personalizado en las tarjetas, usa esta clase): .event-card-button

  1. Estructura de Clases:

Captura de pantalla de la página de selección de nombre en el panel de control

  1. Cómo deberían aparecer los elementos de las tarjetas: Esta es la estructura que debería tener la sección antes de publicar, puedes usar textos de relleno para donde aparecerá el texto dinámico (.event-card-time, .event-card-recurrence, .event-card-name, .event-card-description, .event-card-image)

Captura de pantalla de la página de selección de nombre en el panel de control

¡Listo! Ahora los eventos en el panel aparecerán en tu página de aterrizaje personalizada:

Captura de pantalla de la página de selección de nombre en el panel de control

Captura de pantalla de la página de selección de nombre en el panel de control

Añadiendo Páginas de Aterrizaje Personalizadas para Eventos

Al proporcionar el código HTML de tu sitio web, puedes asociarlo con cualquier ruta de un evento dentro del panel y obtener una vista del contenido y diseño de tu sitio web.

Creación de Eventos y Carga de Páginas de Aterrizaje Personalizadas

  1. Crear un Evento:
  • Sigue el procedimiento estándar para crear un evento.
  1. Preparar HTML para el Sitio Personalizado:
  • Desarrolla el código HTML para tu página web.

  • Si deseas añadir un botón de RSVP, aplica la clase .rsvp-button al botón.

  • Comprime los archivos HTML en un archivo ZIP.

  1. Subir la Página de Aterrizaje Personalizada:
  • Navega a la página de Gestión de Aterrizajes dentro del panel.
  • Haz clic en el botón de Subida y llena la información requerida:

    • Título: Especifica el título de tu aterrizaje.

    • Descripción: Opcionalmente, proporciona una descripción.

    • Ruta: Determina la URL del evento que ya creaste, solo la información después de la raíz de la URL que menciona el evento. Por ejemplo, si la URL es ‘https://onland.io/events/xr-art-tech-makers-camp’, concéntrate en ‘/events/test-route-event-q4vS’.”

Captura de pantalla de la página de selección de nombre en el panel de control

  1. Guardar y Previsualizar:
  • Guarda tus cambios.

  • Serás redirigido a la página de Gestión de Aterrizajes para previsualizar tu página de aterrizaje en una ruta de prueba.

  • Usa la previsualización para evaluar la apariencia y funcionalidad antes de publicar.

  1. Publicar:
  • Una vez satisfecho con la previsualización, publica tu aterrizaje.

  • Haz clic en la opción "ver" para hacer que tu página de aterrizaje sea accesible a través de la ruta elegida dentro del panel.

  • Estos pasos te permiten integrar tu sitio web

    personalizado dentro del panel, permitiendo un fácil acceso y control sobre su contenido y presentación. El evento será accesible desde la pestaña de eventos del panel.

Integración de Páginas de Aterrizaje Personalizadas con Typeform y Stripe para Eventos y Talleres Pagados

  1. Crear Encuesta en Typeform:

    • Desarrolla un flujo en Typeform y añade un botón al final para redirección (a usar más tarde para añadir el enlace de pago).

    • Publica el formulario.

  2. Generar Fragmento en Typeform:

    • Haz clic en "Compartir" y luego en "Ver Código" para copiar el fragmento.

    Captura de pantalla de la página de selección de nombre en el panel de control

  1. Incorporar en Webflow:

    • Utiliza el fragmento en Webflow para incorporar el aterrizaje de Typeform.

    • Exporta esto como un archivo zip.

  2. Preparar Pasos del Evento: Completa la configuración del evento hasta este paso.

    Captura de pantalla de la página de selección de nombre en el panel de control

    • Define el enlace de pago a ser, puede ser cualquier URL personalizada que desees que sea el aterrizaje de pago (por ejemplo, /payment-link/xr-test).

    • Obtén el productID de Stripe (asegúrate de estar en Modo Prueba si es necesario).

      Captura de pantalla de la página de selección de nombre en el panel de control

    • Este sería el resultado en la sección de Registro de Usuario:

      Captura de pantalla de la página de selección de nombre en el panel de control

  1. Crear y Subir Páginas de Aterrizaje Personalizadas para Eventos:
  • Página de Aterrizaje de Información del Evento: Crea una página de aterrizaje donde los usuarios puedan ver detalles del evento.

  • Sube Typeform para el Aterrizaje de Pago:

    • Usa la URL de Registro del paso 4 (por ejemplo, /payment-link/xr-test) para el Typeform embebido zip.

      Captura de pantalla de la página de selección de nombre en el panel de control

    • Selecciona las opciones "Esta es una Página de Aterrizaje Privada" y "Esta es una Página de Aterrizaje de Registro de Evento de Pago".

    • Embebe Typeform Zip: Crea una página de aterrizaje con el zip de Typeform embebido.

      Captura de pantalla de la página de selección de nombre en el panel de control

  1. Recuperar Enlace de Pago:

    Captura de pantalla de la página de selección de nombre en el panel de control

  1. Insertar Enlace de Pago en Typeform:

    • Pega este Enlace de Pago en el botón de Typeform en los finales como "Enlace de Botón" para redirigir a los usuarios al pago después de completar el formulario. Captura de pantalla de la página de selección de nombre en el panel de control
Finalizando el Evento
  • Al acceder al evento desde una nueva cuenta, la configuración debería ser completamente funcional.

  • Nota: Si es accedido por

    el organizador, ya pueden acceder al evento, por lo que el enlace de pago no se mostrará a ellos.