This article explains where to add custom code on a Learnybox page and which rules to follow when using HTML, CSS, or JavaScript in the editor.
Follow the golden rules for custom code
When adding custom code in Learnybox, make sure you follow these best practices.
Separate HTML, CSS, and JavaScript
Each type of code should be placed in the dedicated area provided in the editor.
Avoid mixing HTML, CSS, and JavaScript in the same HTML block, especially if your code contains JavaScript functions or complex styles.
Adding custom CSS or JavaScript code
When you are customizing a page in the page editor, click Advanced settings at the top left of the page, then select CSS and JavaScript code.
You will then see two separate sections where you can add the corresponding CSS or JavaScript code.
Adding custom HTML code
Search for HTML in the left panel's search bar to locate the HTML element, then drag & drop it onto your desired page section.
Check CSS and JavaScript selectors
Before adding your code, make sure your selectors are not likely to conflict with Learnybox’s native code.
A selector that is too broad may modify elements that were not intended to be affected on the page, or disrupt the page display.
Do not include two DOCTYPE declarations in an HTML block
Do not add two <!DOCTYPE html> declarations in an HTML block in the editor.
This declaration may affect your code and prevent it from working properly.
Understand Learnybox support limitations
Learnybox allows you to add custom code, but does not provide support for debugging custom HTML, CSS, or JavaScript code.
This includes, in particular, AI-generated code, external scripts, selector conflicts, or errors related to the code structure.
If your code does not work as expected, first check its structure, make sure each type of code is placed in the correct section, and verify that there are no conflicts with Learnybox’s native elements.