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 |
| 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 |
| 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
- Open Settings → Custom code.
- Click New block.
- Fill in the Name.
- Choose the Display.
- Choose the Type.
- 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.
- Leave the Status at Published.
- Click Create block.
Your own code
- Click New block.
- Fill in the Name.
- Choose the Custom Type.
- Leave the Status at Draft while you test.
- Paste the code into the Header tab or into the Body tab (see below).
- Click Create block.
- Open the area as an administrator and check the effect.
- 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:
- The Status: in Draft, only you see the block.
- The Display: a Login page only block does not appear inside the area.
- Reload the page without cache.
- 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.
Webhooks
Automatic notices to your system when something happens on the platform: events, filters, personal data, delivery history and what to do when it fails.
Zoom
Zoom meetings inside the lesson, without leaving the platform: the app in your Zoom account, the Client ID, the Client Secret and what Zoom receives.