Página HTML: código de Kajabi o una web

El bloque Página HTML (familia Medios del editor de bloques) sirve para dos cosas. Arriba del bloque eliges "Qué vas a pegar": Pegar código o Pegar dirección. En los dos modos puedes poner un rótulo opcional, que sale encima del contenido. Debajo tienes una vista previa en vivo: lo que ves ahí es exactamente lo que verá el alumno, sin guardar ni abrir la lección como alumna.

Solo se usa en lecciones: no está en el Anclaje de la semana ni en la guía «Cómo funciona».

Cambiar de modo empieza en blanco

Si pasas de "Pegar código" a "Pegar dirección" (o al revés), se borra lo que habías pegado en el otro modo. Solo se conserva el rótulo.

Pegar el código de una lección de Kajabi

1. En Kajabi, abre la lección y copia el código entero del bloque de código (normalmente empieza por <script> y lleva dentro su estilo y su texto).
2. En el Campus, añade un bloque Página HTML con Pegar código y pégalo en el cuadro "Código" sin tocarlo.
3. Mira la vista previa: tiene que verse igual que en Kajabi, con sus pestañas, botones y audios funcionando. Las fuentes, imágenes y audios pueden seguir en lp.charlysway.com o en cualquier otra web.
4. Guarda.

Cómo lo ve el alumno:

• Sin marco y a todo el ancho de la lección, como si fuera parte de ella.
• Con la altura justa de lo que muestra: no hay una caja con su propio scroll, tampoco en el móvil.
• Mientras carga ve "Cargando el contenido…". Si el código está roto y no llega a cargar, a los 10 segundos ve "No se ha podido cargar este contenido".
• Los enlaces del contenido se abren en una pestaña nueva: el alumno no sale del Campus.
• Si pasa a otra lección con un audio del contenido sonando, el audio se para. Al volver, el contenido se carga otra vez entero.

Límites y avisos:

• Máximo 500 KB. Debajo del cuadro ves cuánto ocupa ("N KB de 500 KB"). Si te pasas, lo normal es que haya imágenes metidas dentro del código: súbelas a una web y enlázalas.
• El bloque te lo recuerda en ámbar: el código se ejecuta para todos los alumnos que abran la lección. Pega solo código de tu equipo.
• El código corre aislado del Campus: no puede ver la cuenta del alumno ni cambiar nada de la página, aunque tenga un error. Por eso no puede marcar la lección como completada ni saber el nombre del alumno.
• Este bloque nunca sale en las grabaciones de la repetición de sesión.

Dos ajustes que suelen hacer falta al pasar de Kajabi

Kajabi disimula dos cosas del código que en el Campus se notan. Revísalas en la vista previa:

• Texto pegado a los bordes. En el ejemplo de «Antes de empezar» (Programa PRO), el estilo de las secciones (.sec, .hero__in) quita el margen lateral, y el texto toca los bordes, sobre todo en el móvil. Arréglalo en el estilo del propio código, por ejemplo añadiendo al final .sec, .hero__in { padding-left: 20px; padding-right: 20px; }.
• "El botón de arriba". Si el texto dice algo como "Marcar como Completado en el botón de arriba", cámbialo: en el Campus es la barra «Marcar como completada». Mejor nombrarla que decir dónde está.

Pegar la dirección de una web

Con Pegar dirección metes una web dentro de la lección: un formulario, una agenda, una página del equipo…

1. Pega el enlace en "Dirección". Tiene que empezar por https://. No vale una dirección del propio Campus.
2. Elige el Tamaño del marco: Compacto (420 px en ordenador / 480 en móvil), Medio (640 / 680, el que viene marcado) o Alto (900 / 900).
3. Comprueba en la vista previa que la web se ve dentro del marco y guarda.

El alumno ve la web dentro de un marco con borde suave y, siempre debajo, el botón "Pincha aquí para abrirlo en una pestaña nueva".

Algunas webs no se dejan mostrar dentro de otra

Muchas webs (Google, bancos, redes sociales…) no se dejan meter dentro de una página ajena: el marco sale vacío. Si te pasa en la vista previa, busca el enlace "para insertar" de esa web (en un Google Form, el de Enviar → < >, que lleva ?embedded=true). Aunque falle, el alumno siempre tiene el botón para abrirla aparte.