Hoy vamos a ver como en Webinar jam mostrar fecha y hora en wordpress mediante url, basicamente se usa una landing de wordpress y con webinarjam se integran los webinar online, luego en wordpress se muestra el formulario del webinar lo que nos lleva a la thank you page o página de confirmación del webinar. Es aquí donde mostraremos la fecha y hora del webinar en wordpress cogiendo los datos de webinarjam mediante la url. En resumen copia y pega el código en un bloque de código de wordpress para que los datos que nos manda webinarjam se muestre en pantalla al usuario.
- Que es webinarjam
- Webinarjam crear pagina de confirmación personalizada
- Configurar parametros de webinarjam en wordpress
- webinar jam mostrar fecha y hora en wordpress mediante url
Qué es WebinarJam
Webinarjam es una de las plataformas más potentes del mundo para organizar webinar online, esta es su web webinarjam.com. El proceso de creación y gestión de webinar online se realiza en la propia plataforma de webinarjam pero si queremos podemos integrarlo en nuestra web de wordpress y que al terminar el registro del webinar vuelvan a nuestra página de wordpress, esta página se suele llamar página de confirmación personalizada.
WebinarJam crear página de confirmación personalizada
Dentro de la plataforma de webinarjam tenemos un apartado que dice:
Webinarjam create custom confirmation page
Os dejo una captura de pantalla de donde está esta opción:
Si nos fijamos en la parte inferior tenemos la opción en webinarjam crear página de confirmación personalizada, esto es como una thank you page o página de agradecimiento al que podemos dirigir a los usuarios una vez que se han registrado para el webinar de webinarjam.
Tenemos que indicar la url de nuestra página de agradecimiento de wordpress para webinarjam si es que queremos usar webinarjam en wordpress como es nuestro caso.
Configurar parametros de webinarjam en wordpress
Hasta aquí en realidad no tenemos que hacer nada especialmente complicado , el usuario se registra al webinar mediante webinarjam y luego nosotros le mandamos a una página de agradecimiento de wordpress. El tema es que queremos en webinarjam mostrar fecha y hora en wordpress mediante url, si te preguntas qué es esto pues es que los datos del webinar se mandan por url. Puedes ver todos los datos que manda webinarjam en su apartado de documentación de webinarjam.
Para configurar parámetros de webinarjam en wordpress debemos saber cuales incluye, os dejo un listado de los parámetros más habituales de webinarjam que podemos usar en wordpress:
- wj_lead_first_name
- wj_lead_last_name
- wj_lead_email
- wj_lead_phone_country_code
- wj_lead_phone_number
- wj_lead_unique_link_live_room
- wj_room_contraseña
- wj_next_event_date
- wj_next_event_time
- wj_next_event_timezone
- wj_event_ts
- wj_event_tz
WebinarJam mostrar fecha y hora en wordpress mediante Url
Mediante un script vamos a pasar los parámetros de webinarjam a wordpress, esto es a lo que me refería al decir que íbamos a ver en webinar jam mostrar fecha y hora en wordpress mediante url. Los parámetros están en la url que llega a la página de confirmación personalizada de webinarjam pero tenemos que capturarlos y ordenarlos mediante html/CSS.
En primer lugar quiero agradecer a Jono Bacon su video explicativo de como hacer todo esto de usar webinarjam en wordpress, en su video puedes ver como crear pagina de confirmación en DIVI para wordpress.
Para este voy a usar un constructor diferente en mi casi como crear página de confirmación en thrive para webinarjam mediante el modulo código, os dejo una captura a continuación:
// Este es el codigo que tenéis que meter dentro del modulo codigo
<script>
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
document.write(“<h2>How To Connect</h2>”);
document.write(“<p>Your training slot is reserved at:<br />”
+ “<strong>”
+ urlParams.get(‘wj_next_event_date’)
+ “</strong>”
+ ” at “
+ “<strong>”
+ urlParams.get(‘wj_next_event_time’)
+ “</strong>”
+ “</p>”);
document.write(“<p>At that time, click below to enter the training:</p><p></p>”);
document.write(“<p><a href='”
+ urlParams.get(‘wj_lead_unique_link_live_room’)
+ “‘style='”
+ “padding: 10px;”
+ “font-size: 18px;”
+ “color:#33348e;”
+ “background-color: rgb(155,250,155);”
+ “border: thick rgb(43,107,19) solid;”
+ “‘>Join The Session</a></p>”);
document.write(“<p></p><p style=’color: red;’>Be sure click the button above at the scheduled time: this page will NOT automatically redirect.</p>”);
</script>
Este sería el resultado que aparecería en vuestra página de agradecimiento al usar webinarjam en wordpress:
Como puedes ver dentro del script que hemos introducido en el modulo código tiene incluidos los estilos CSS inline, para poder personalizarlo hay que usar css, para saber más de como usar CSS visita W3SCHOOL.
En mi caso y supongo que en el de la mayoría de la gente es necesario adaptar el diseño de este modulo al estilo de la página por lo que tuve que personalizarlo un poco, os dejo aquí el ejemplo de como quedaría y el código script:
<script>
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
document.write(“<h2 style=’text-align:center; text-decoration: underline; color: var(–tcb-skin-color-0);font-size: 40px;’>Your registration for the masterclass is confirmed for:</h2>”);
document.write(“<p style=’color: var(–tcb-skin-color-4); font-family: Raleway; text-align:center;font-size: 22px;’>”
+ “<strong>”
+ urlParams.get(‘wj_next_event_date’)
+ “</strong>”
+ ” at “
+ “<strong>”
+ urlParams.get(‘wj_next_event_time’)
+ “</strong>”
+ ” , timezone: “
+ “<strong>”
+ urlParams.get(‘wj_next_event_timezone’)
+ “</strong>”
+ “</p>”);
document.write(“<p style=’color: var(–tcb-skin-color-4); font-family: Raleway; text-align:center;font-size: 22px;’>Here is the link to access the live session:<a href='”
+ urlParams.get(‘wj_lead_unique_link_live_room’)
+ “‘>Join The Session</a></p>”);
</script>
.Para configurar parámetros de webinarjam en wordpress he usado estos datos:
+ urlParams.get(‘wj_next_event_date’) Muestra la fecha del evento
+ urlParams.get(‘wj_next_event_time’) Muestra la hora del evento.
+ urlParams.get(‘wj_next_event_timezone’) Esto es la zona horaria del evento, muy útil para eventos internacionales.
+ urlParams.get(‘wj_lead_unique_link_live_room’) Este es el enlace para la sesión del webinar.
En la captura superior aparecen como nulos porque no tienen datos pero si haces el proceso completo de registro con webinarjam verás esos datos rellenos en la página de agradecimiento de wordpress.
Con esto terminamos por hoy, hemos aprendido, en concreto yo he aprendido en webinar jam mostrar fecha y hora en wordpress mediante url. Me ha costado bastante encontrar un sitio donde apareciera esta información de manera clara y fácil para el común de los mortales que usamos webinar muy de vez en cuando y quería compartir esta información con cualquiera que pudiera necesitar lo mismo. Si estás leyendo esto gracias por llegar hasta el final y si tienes cualquier duda indícamelo en los comentarios.