Código personalizado
Bloques de código en el área del alumno y el login: Google Analytics, Tag Manager, Pixel, Active Campaign, WhatsApp, Push Alert y CSS o JavaScript.
El código personalizado pone un código tuyo en las páginas del área del alumno y en las pantallas de acceso. Por ejemplo: un pixel, un script de analytics, un botón de WhatsApp o tu propio CSS y JavaScript. Agregas esos bloques en Configuraciones → Código personalizado.
Cómo funciona
Cada bloque de código tiene un tipo, un lugar donde entra y un estado. Cademí inyecta el bloque en las páginas que elijas.
La regla más importante: el código se ejecuta para todos los alumnos. Un error en tu código puede romper toda el área del alumno. Prueba siempre en Borrador antes de publicar.
La lista muestra ID, Nombre, Tipo, Visualización y Estado. El Estado es Publicado o Borrador, y lo cambias en la propia fila.
El botón Nuevo bloque abre el panel Nuevo bloque de código. Tiene estos campos:
- Nombre: identifica el bloque en la lista. Los alumnos no ven este nombre.
- Estado: en Borrador, el código no se inyecta para los alumnos.
- Visualización: en qué páginas entra el código (mira la tabla de abajo).
- Tipo: una integración lista, que solo pide el identificador, o Custom, el código libre.
- Las pestañas Header y Body: el código inyectado en el encabezado de la página y el código inyectado antes del final de ella. En el tipo Custom, escribes aquí. En los otros tipos, el código viene listo.
| Visualización | Dónde entra el código |
|---|---|
| Siempre | En las páginas del área del alumno y en las pantallas de acceso (login, registro, recuperación de contraseña) |
| Después del login | Solo en las páginas del área del alumno |
| Solo en el login | Solo en las pantallas de acceso |
| Solo en el administrador | Reservado al panel del administrador. El bloque no entra en el área del alumno ni en el login |
Los tipos
| Tipo | Lo que pide | Lo que hace |
|---|---|---|
| Google Analytics | ID de Google Analytics (UA-123456789-1 o G-XXXXXXXXXX) | Inserta la etiqueta de Analytics en las páginas |
| Google Tag Manager | ID de Tag Manager (GTM-A1BCDEF) | Inserta el contenedor de Tag Manager |
| ID del Pixel | Inserta el pixel y registra la visualización de cada página | |
| Active Campaign | ID de cuenta (Active Campaign) | Inserta el seguimiento del sitio. Identifica al visitante por el correo del alumno. Úsalo con Después del login |
| Número (con código de país/área) y Mensaje | Muestra un botón fijo de WhatsApp en la esquina inferior derecha de las páginas. El Mensaje llega completado cuando el alumno abre la conversación | |
| Push Alert | manifest.json y sw.js, proporcionados por PushAlert | Instala las notificaciones de PushAlert |
| Custom | Header y Body | Inyecta lo que escribas: <script>, <style>, HTML, widgets de chat y de atención |
Variables del alumno
En cualquier bloque, Cademí cambia estas marcas por los datos del alumno que está viendo la página:
| Marca | Se convierte en |
|---|---|
{nome} | El primer nombre |
{nome_completo} | El nombre completo |
{email} | El correo |
{celular} | El celular |
{uid} | El código del alumno en la plataforma |
{is_gratis} | 1 si el alumno tiene la marca de registro gratuito; 0 en los demás. Una compra posterior no borra la marca. Solo un administrador la borra, en el perfil del alumno |
{avatar} | La dirección de la foto |
En las pantallas de acceso no hay un alumno con la sesión iniciada. Por eso, ahí las marcas quedan vacías.
Paso a paso
Una integración lista
- Abre Configuraciones → Código personalizado.
- Haz clic en Nuevo bloque.
- Completa el Nombre.
- Elige la Visualización.
- Elige el Tipo.
- Completa el identificador que pide el tipo. Por ejemplo: el ID de Analytics, de Tag Manager o del Pixel. En Active Campaign, el ID de la cuenta. En WhatsApp, el número y el mensaje.
- Deja el Estado en Publicado.
- Haz clic en Crear bloque.
Código propio
- Haz clic en Nuevo bloque.
- Completa el Nombre.
- Elige el Tipo Custom.
- Deja el Estado en Borrador mientras pruebas.
- Pega el código en la pestaña Header o en la pestaña Body (mira abajo).
- Haz clic en Crear bloque.
- Abre el área como administrador y revisa el efecto.
- Cuando esté bien, cambia el Estado a Publicado, en la fila o en el panel de edición.
Dónde pegar el código:
- Header: lo que tiene que cargar antes de la página, como CSS y scripts de terceros.
- Body: lo que puede cargar al final, como widgets de chat.
Un bloque en Borrador no se inyecta para los alumnos, pero sí para ti. Así, revisas el efecto sin exponer a nadie.
Para editar, haz clic en la fila. Para eliminar, usa el icono de papelera y confirma en Eliminar bloque. El bloque eliminado va a la Papelera. Desde ahí, puedes restaurar el bloque.
Para tener en cuenta
El código se ejecuta para todos los alumnos.
Un script con error puede romper toda el área del alumno: botones que no responden, reproductor que no abre. Prueba en Borrador antes de publicar. Si algo extraño aparece en el área, el primer paso es volver los bloques recientes a Borrador.
El código de terceros es responsabilidad de quien lo inserta.
La plataforma inyecta lo que pegues, sin revisarlo. No pegues código de origen desconocido. Recuerda: un script lee lo que el alumno ve y escribe.
CSS preciso.
Para cambiar el diseño con CSS, apunta a elementos específicos. Las reglas genéricas valen para toda el área y pueden estorbar futuras actualizaciones de la plataforma.
Páginas fuera del alcance.
La verificación en dos pasos y la página de consentimiento de aplicaciones no reciben código personalizado.
Clon.
Los bloques de la cuenta de origen llegan a los clones con el sello Heredado. Eliminar un bloque heredado en el clon quita el bloque solo de ese clon. El origen queda intacto.
Preguntas frecuentes
Agregué el código y nada cambió.
Revisa estos puntos:
- El Estado: en Borrador, solo tú ves el bloque.
- La Visualización: un bloque Solo en el login no aparece dentro del área.
- Recarga la página sin caché.
- En un script de terceros, revisa el identificador.
¿Puedo usar Hotjar, Zendesk, Tawk.to u otro chat?
Sí. Crea un bloque Custom y pega el fragmento que te da la herramienta, en general en la pestaña Body.
¿El botón de WhatsApp puede saludar al alumno por su nombre?
Sí. Escribe el Mensaje con las variables. Por ejemplo: "Hola, mi nombre es {nome} y necesito ayuda".
Publiqué un código y el área del alumno dejó de funcionar.
Vuelve el bloque a Borrador en la propia fila. Después, corrige el código y prueba de nuevo como administrador.