# 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 |
| **Facebook** | **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** |
| **Whatsapp** | **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

1. Abre **Configuraciones > Código personalizado**.
2. Haz clic en **Nuevo bloque**.
3. Completa el **Nombre**.
4. Elige la **Visualización**.
5. Elige el **Tipo**.
6. 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.
7. Deja el **Estado** en **Publicado**.
8. Haz clic en **Crear bloque**.

### Código propio

1. Haz clic en **Nuevo bloque**.
2. Completa el **Nombre**.
3. Elige el **Tipo** **Custom**.
4. Deja el **Estado** en **Borrador** mientras pruebas.
5. Pega el código en la pestaña **Header** o en la pestaña **Body** (mira abajo).
6. Haz clic en **Crear bloque**.
7. Abre el área como administrador y revisa el efecto.
8. 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:

1. El **Estado**: en **Borrador**, solo tú ves el bloque.
2. La **Visualización**: un bloque **Solo en el login** no aparece dentro del área.
3. Recarga la página sin caché.
4. 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.