How to use custom code correctly on Learnybox

This article explains how to add custom code to Learnybox pages while reducing the risk of conflicts with your page content or the editor.
​

Learnybox allows you to add custom code to adapt certain behaviors or customize the appearance of your pages. To avoid the most common errors, it is important to place each type of code in the correct location and follow a few basic precautions when adding it.
​

Even if you do not develop code regularly, a few simple principles can help reduce the risk of conflicts with your pages or with the editor.

Each type of code must be added to its dedicated location.

To access the CSS and JavaScript code areas, 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.
​

The CSS section should contain CSS only.

The JavaScript section should contain JavaScript only. It can be placed at the top or bottom of the page.
​

JavaScript inserted at the top of the page loads before most of the page content. JavaScript inserted at the bottom of the page loads after the page content, which is usually better if the script needs to interact with elements already visible on the page.

Search for HTML in the left panel's search bar to locate the HTML element, then drag & drop it onto your desired page section.
​

The HTML block should contain HTML code only.

⚠️ Avoid adding CSS or JavaScript directly into this block, unless it is an integral part of an HTML component that you fully understand and control.

When adding HTML, CSS, or JavaScript, the selectors you use must be chosen carefully.

Learnybox already uses many IDs, classes, and elements to make pages and the page editor work properly.

If your code targets a selector already used by Learnybox, you may:

Whenever possible, use classes or IDs that are specific to your own customization in order to reduce the risk of conflicts.

It is generally better to use a class created specifically for your customization rather than a very generic selector that may already be used elsewhere on the page.

For both HTML and JavaScript, always make sure that all required tags are correctly opened and closed.

A missing or incorrectly closed tag may cause:

Before saving your changes, take the time to review your code and check its structure.

Some extensions installed on your visitors’ browsers may block the execution of certain JavaScript scripts.

In this case, a behavior that works correctly during your tests may not work for some users.

If you use custom JavaScript, keep in mind that its execution may depend on each visitor’s browsing environment.

Learnybox provides the areas that allow you to add custom code.

However, we do not provide support for analyzing, debugging, correcting, or rewriting the custom content you add to your account.

If a problem comes from your custom code, you will need to check how it works or contact a developer who can analyze it.

However, we can remove code if it prevents the editor from loading.

After adding or modifying custom code:

If unexpected behavior appears after adding custom code, temporarily remove the modification to determine whether it is causing the issue.

If unexpected behavior appears after adding custom code:

If the editor no longer loads after adding custom code, contact support. We can remove code when it prevents the editor from loading.

At this stage, you know the main best practices for adding custom code to your pages while reducing the risk of conflicts and display errors.