# Custom code

> Code blocks in the student area and on login: Google Analytics, Tag Manager, Pixel, Active Campaign, WhatsApp, Push Alert and your own CSS or JavaScript.

Custom code puts a code of yours on the student area pages and the access screens. For example: a pixel, an analytics script, a WhatsApp button or your own CSS and JavaScript. You add these blocks in **Settings > Custom code**.

## How it works

Each code block has a type, a place where it goes and a status. Cademí injects the block into the pages you choose.

**The most important rule:** the code runs for every student. An error in your code can break the whole student area. Always test in **Draft** before publishing.

The list shows **ID**, **Name**, **Type**, **Display** and **Status**. The **Status** is **Published** or **Draft**, and you switch it on the row itself.

The **New block** button opens the **New code block** panel. It has these fields:

- **Name**: identifies the block in the list. Students don't see this name.
- **Status**: in **Draft**, the code is not injected for students.
- **Display**: which pages the code goes into (see the table below).
- **Type**: a ready-made integration, which only asks for the identifier, or **Custom**, free code.
- The **Header** and **Body** tabs: the code injected in the page header and the code injected before the end of the page. In the **Custom** type, you write here. In the other types, the code comes ready.

| Display | Where the code goes |
|---|---|
| **Always** | On the student area pages and the access screens (login, sign-up, password recovery) |
| **After login** | Only on the student area pages |
| **Login page only** | Only on the access screens |
| **Admin area only** | Reserved for the administrator dashboard. The block does not go into the student area or the login |

### The types

The type names are shown as they are below, in any interface language.

| Type | What it asks for | What it does |
|---|---|---|
| **Google Analytics** | **Google Analytics ID** (UA-123456789-1 or G-XXXXXXXXXX) | Inserts the Analytics tag on the pages |
| **Google Tag Manager** | **Tag Manager ID** (GTM-A1BCDEF) | Inserts the Tag Manager container |
| **Facebook** | **Pixel ID** | Inserts the pixel and records each page view |
| **Active Campaign** | **Account ID (Active Campaign)** | Inserts site tracking. It identifies the visitor by the student's email. Use it with **After login** |
| **Whatsapp** | **Number (with country/area code)** and **Message** | Shows a fixed WhatsApp button in the bottom right corner of the pages. The **Message** comes prefilled when the student opens the chat |
| **Push Alert** | **manifest.json** and **sw.js**, provided by PushAlert | Installs PushAlert notifications |
| **Custom** | **Header** and **Body** | Injects whatever you write: `<script>`, `<style>`, HTML, chat and support widgets |

### Student variables

In any block, Cademí replaces these tags with the data of the student viewing the page:

| Tag | Becomes |
|---|---|
| `{nome}` | The first name |
| `{nome_completo}` | The full name |
| `{email}` | The email |
| `{celular}` | The mobile phone |
| `{uid}` | The student's code on the platform |
| `{is_gratis}` | 1 if the student has the free sign-up mark; 0 otherwise. A later purchase does not clear the mark. Only an administrator clears it, in the student profile |
| `{avatar}` | The address of the photo |

On the access screens there is no signed-in student. So, there, the tags are empty.

## Step by step

### A ready-made integration

1. Open **Settings > Custom code**.
2. Click **New block**.
3. Fill in the **Name**.
4. Choose the **Display**.
5. Choose the **Type**.
6. Fill in the identifier the type asks for. For example: the Analytics, Tag Manager or Pixel ID, the Active Campaign account ID, or the WhatsApp number and message.
7. Leave the **Status** at **Published**.
8. Click **Create block**.

### Your own code

1. Click **New block**.
2. Fill in the **Name**.
3. Choose the **Custom** **Type**.
4. Leave the **Status** at **Draft** while you test.
5. Paste the code into the **Header** tab or into the **Body** tab (see below).
6. Click **Create block**.
7. Open the area as an administrator and check the effect.
8. When it is right, switch the **Status** to **Published**, on the row or in the edit panel.

Where to paste the code:

- **Header**: what needs to load before the page, such as CSS and third-party scripts.
- **Body**: what can load at the end, such as chat widgets.

A block in **Draft** is not injected for students, but it is injected for you. This way, you check the effect without exposing anyone.

To edit, click the row. To delete, use the trash icon and confirm in **Delete block**. The deleted block goes to the **Trash**. From there, you can restore the block.

## Good to know

- **The code runs for every student.** A script with an error can break the whole student area: buttons that don't respond, a player that doesn't open. Test in **Draft** before publishing. If something odd appears in the area, the first step is to set recent blocks back to **Draft**.
- **Third-party code is the responsibility of whoever inserts it.** The platform injects what you paste, without checking it. Don't paste code from unknown sources. Remember: a script reads what the student sees and types.
- **Targeted CSS.** To change the look with CSS, aim at specific elements. Generic rules apply to the whole area and can get in the way of future platform updates.
- **Pages out of reach.** Two-step verification and the application consent page do not receive custom code.
- **Clone.** The source account's blocks reach clones with the **Inherited** badge. Deleting an inherited block in the clone removes the block only from that clone. The source stays intact.

## Frequently asked questions

**I added the code and nothing changed.** Check these points:

1. The **Status**: in **Draft**, only you see the block.
2. The **Display**: a **Login page only** block does not appear inside the area.
3. Reload the page without cache.
4. For a third-party script, check the identifier.

**Can I use Hotjar, Zendesk, Tawk.to or another chat?** Yes. Create a **Custom** block and paste the snippet the tool provides, usually in the **Body** tab.

**Can the WhatsApp button greet the student by name?** Yes. Write the **Message** with the variables. For example: "Hi, my name is {nome} and I need help".

**I published a code and the student area stopped working.** Set the block back to **Draft** on the row itself. Then fix the code and test again as an administrator.