Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Add Custom Code in your LearnWorlds School

Οur custom code editor has various slots that can host your custom code. These slots are divided into two categories, global slots, where you insert code to be injected in all pages of a site template, and local slots, where you add code that is injected on a specific page. 

For instance, there is a site template-wide slot for you to add custom HTML code in the <head> of all pages of a site template, for logged-in users only.

Site Template Slots

The following table shows all the available slots for the Site Template.

Wrapper

User Status

Language

Liquid Snippets

<head>

logged in

html

variables, tags

<head >

logged out

html

variables, tags

<body>

logged in

html

variables, tags

<body>

logged out

html

variables, tags

<style>

Dynamic

css

-

<body>

after purchase

html

variables

<style>

for built in pages

css

-

<body>

after registration

html

variables, tags

Page Slots

The following table shows all the available slots for a specific page.

Wrapper

User Status

Language

Liquid Snippets

<head>

logged in

html

variables, tags

<head>

logged out

html

variables, tags

<body>

logged in

html

variables, tags

<body>

logged out

html

variables, tags

<style>

logged in

css

-

<style>

logged out

css

-

Selected Element

Apart from available slots, the user can also edit the HTML of the selected element. On the Selected element tab, the user can edit the HTML code of the currently selected element. Additionally, they can make use of liquid templating language variables. The changes will only affect the selected element on the current page and will persist once you save the page.


Click on the element you wish and click on Edit HTML:

The HTML of dynamic components like course cards cannot be edited directly - relevant indications can be found as comments inside the HTML code of these elements.


Built-in Pages

Built-in pages are pages that are built into your website, such as the Social, Profile, Workpad, Account, Daily News, People, Inbox, and Course player pages. 


These pages always adapt to your site template theme but you can further customize them using custom code. Specifically, code inserted in the following slots will be injected into built-in pages:

  • <head> logged in (html)

  • <style> (css) for built in pages (i.e social, profile, workpad, my account)

  • <body> logged in (HTML)

One exception is the course player in which the head slot will not be injected.


To customize only some of these pages you could use the following snippets: 

  • When Page slug

  • Unless Page slug is

  • In Course Player

  • Unless In Course Player

You can find more information about the code snippets (liquid) in the relevant section below.


Additionally, you could take advantage of an extra class we add to the body of each page. The class is in the form of slug-{slug} where {slug} should be replaced with the slug URL of each webpage. For instance, if you want to add styling code to the account page only, you will start your CSS selector with “body.slug-account”.


For example:

body.slug-account p { 
    color: red; 
}

The slugs of all the built-in pages that can be modified separately in the mentioned way are: 

  • social 

  • profile 

  • workpad 

  • account 

  • dailynews 

  • people 

  • inbox

Code Snippets (liquid)

You can add code snippets by clicking the + icon on the bottom left of the custom code editor and then by clicking on the snippet you want to add. These are variables and tags based on the Liquid template language.

Variables

Variables can be snippets like {{SCHOOL.COMPANY_NAME}} or {{USER.NAME}} and they are replaced with the appropriate values when code is run; for instance, if a user logs in to your school and her username is "Dora", the {{USER.NAME}} variable will have a value equal to "Dora". 


The following variables are available for you to use in your custom code editor. Most of them (for instance, "company name" or "phone") are also functional when typed inside your actual pages. 

  • School (the values of these variables come from the values you have added under Settings→ School Settings→ School Info

    • name 

    • description

    • company name

    • contact email

    • support email

    • sales email

  • User (variables for logged in users)

    • name, email, id (the unique ID of each user), registration date

    • sign up fields (when creating a custom sign up field, the list of variables is dynamically updated)

    • Subscription information (subscribed, plan, sign up, renew, expires, expiration date, canceled, stripe plan).

  • Request

    • type

    • slug

    • path

    • URL

    • params


So, if you want to write your school name on your page or in your code you should write {{SCHOOL}} or click on the corresponding button on the Add snippet dialog

You can also add variables on your pages from the text editor on the right sideform:

List of Variables

Variable CategoryVariable NameVariable Name
SchoolName{{SCHOOL.NAME}}
URL{{SCHOOL.URL}}
Address{{SCHOOL.ADRESS}}
Description{{SCHOOL.DESCRIPTION}}
Company_Name{{SCHOOL.COMPANY_NAME}}
Contact_Email{{SCHOOL.CONTACT_EMAIL}}
Support_Email{{SCHOOL.SUPPORT_EMAIL}}
Sales Email{{SCHOOL.SALES_EMAIL}}
UserId{{USER.ID}}
Name{{USER.NAME}}
Email{{USER.EMAIL}}
Register_Date{{USER.REGISTER_DATE}}
Subscribed{{USER.SUBSCRIBED}}
Subscription_Plan{{USER.SUBSCRIPTION_PLAN}}
Subscription_Signup_Date{{USER.SUBSCRIPTION_SIGNUP_DATE}}
Subscription_Renew_Date{{USER.SUBSCRIPTION_RENEW_DATE}}
User.Subscription_Cancelled{{USER.SUBSCRIPTION_CANCELLED}}
Subscription_Expires_Date{{USER.SUBSCRIPTION_EXPIRES_DATE}}
Stripe_Plan{{USER.STRIPE_PLAN}}
User.CF_Company{{USER.USER.CF_COMPANY}}
RequestType{{REQUEST.TYPE}}
Slug{{REQUEST.SLUG}}
Path{{REQUEST.PATH}}
URL{{REQUEST.URL}}
Params{{REQUEST.PARAMS}}

Conditionals

Conditionals are code snippets in liquid template language, that will help you apply code based on different conditions. Liquid tags used in conditionals (code wrapped in {% %} ) are available on the Learning Center plan:

  • When user name is

  • Unless user name is

  • When user email is

  • Unless user email is

  • User Birthday

  • User registered Before

  • User registered After

  • User registered Between

  • When user has tag

  • Unless user has tag

  • When url contains

  • Unless url contains

  • When Page slug is

  • Unless Page slug is

  • When request param equals

  • When request param contains

  • When request param exists

  • In Course Player (under <body> logged in)

  • Unless In Course Player (under <body> logged in)

Relevant Articles

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.