Our new Site Builder provides all the tools necessary to create your school's website. However, there comes a time when even a tool that offers so many different possibilities needs extra customizations. In some cases, the addition of custom code and the customization of the existing (generated) one could be necessary. In these situations, our custom code editor comes to the rescue! This article will provide you with all the knowledge you need to use this powerful tool.


With our custom code editor, you can easily add custom code in different slots (slot are places where you can inject your custom code) of your HTML page and edit the already existing code generated by our new pages builder. More specifically, you can add custom HTML, CSS, and Javascript.


You can find our Custom Code editor, by navigating to "Site Builder" - "Custom Code":

On top of this, we also support the liquid template language for our HTML slots. “What’s all this gibberish?”, I hear you say. I am glad you ask, we will explain everything you need to know below.


TABLE OF CONTENTS


Α web page consists of HTML, CSS, and javascript. The HTML code defines the content (what you read), CSS defines the style (fonts, colors, layout, etc) and javascript adds the functionality (for example what happens when you click on a button) of the webpage. HTML code could include CSS and javascript code in style and script tags respectively. Lastly, HTML code is divided into two main tags, head and body. The head tag is typically used to import CSS or javascript files and define attributes of your page that are not displayed, like metadata. The body tag is where you place the parts of your website that you want to be displayed. 


Liquid template language is a language that allows defining placeholders that should later be replaced to implement designs. Additionally, it has some more advanced features such as loops and conditions. This enables us to enhance our code editor even more by providing you with variables and ready-to-use code snippets that can be added with the click of a button and help bootstrap the development of your website.


Custom Code


Οur custom code editor has various slots that can host your custom code in. 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 a Site Template.



Wrapper

User Status

Language

Liquid Snippets

<head>

logged in

html

variables, conditionals

<head >

logged out

html

variables, conditionals

<body>

logged in

html

variables, conditionals

<body>

logged out

html

variables, conditionals

<style>

Dynamic

css

-

<body>

after purchase

html

variables

<style>

for built in pages

css

-

<body>

after registration

html

variables, conditionals



Page Slots

The following table shows all the available slots for single pages.


Wrapper

User Status

Language

Liquid Snippets

<head>

logged in

html

variables, conditionals

<head>

logged out

html

variables, conditionals

<body>

logged in

html

variables, conditionals

<body>

logged out

html

variables, conditionals

<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 the "Edit HTML" button:




Built-in Pages


Built-in pages are pages that are built into your website. These are 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 in 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 in the relevant section below.


Additionally, you could take advantage of an extra class we add on 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


You can add code snippets by clicking the + icon on the bottom left of the custom code editor and then by clicking to the snippet you want to add.




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 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)

    • phone 

    • address

    • country

    • birthday

    • company

    • website

    • registration date

    • regarding subscriptions:

      • subscribed

      • plan

      • sign up date

      • renew date

      • expires date

      • canceled

      • expiration date

      • stripe plan

    • dropfieldkey

  • request

    • type

    • slug

    • path

    • url

    • params


So, if you want to write your school name in your page or in your code you should simply write {{school.name}} 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: 




Conditionals


Conditionals are code snippets in liquid template language, that will help you apply code based on different conditions. The following conditionals are available for you to use in your custom code:

  • 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)




Case Examples


1. Wish them a happy birthday! 


One great advantage of using conditionals is that you can personalize the experience of your users. Why not start by wishing them a happy birthday? Keep in mind that you will need to have activated the Birthdate field from Site Builder --> Sign in/up: 


Add a section in a page your users visit quite often (for instance, the after login page) where you wish them happy birthday, like this one: 



Then, inside the page's or site custom code and under <body> logged in (html) add the following snippet: 


<!-- Wish user  happy -->

{% assign md_bday = USER.BIRTHDAY | date: "%m-%d" %}

{% assign md_now = "now" | date: "%m-%d" %}

{% if md_bday != md_now %}

    <style type="text/css">

        #section_1605027934373_3

            display: none!important;

        }

    </style>    

{% endif %}


Make sure to replace section_1605027934373_3 with the id of the specific section.



2. Hide an offer from users who registered before a certain date


<!-- Hide a section that contains an offer from users who registered before a certain date -->

{% assign reg_date = USER.REGISTER_DATE | date: "%Y-%m-%d" %}

{% if reg_date < '2020-11-27' %}

    <style type="text/css">

        #section_1605027934373_3 {

            display: none!important;

        }

    </style>    

{% endif %}


Make sure to replace section_1605027934373_3 with the id of the specific section.



3. Add a javascript snippet, such as a chat bot, on all pages except for the course player


<!-- Add a chat bot or any script on all pages except course player pages -->

{% unless REQUEST.IS_COURSE_PLAYER %}      

     <!-- Start of ChatBot code -->

    <script type="text/javascript">

        window.__be = window.__be || {};

        window.__be.id = "XXXXXXXXX";

        (function() {

            var be = document.createElement('script'); be.type = 'text/javascript'; be.async = true;

            be.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.chatbot.com/widget/plugin.js';

            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(be, s);

        })();

    </script>

    <!-- End of ChatBot code -->

{% endunless %}


Of course, the code between <script type="text/javascript"> and </script> will be the JavaScript snippet you want to add on all pages except for the course player.



4. Add a chat bot on all pages except during checkout


<!-- Add your chat bot on all pages except during checkout -->

{% if REQUEST.SLUG != "payment" %}

    <!-- Start of ChatBot code -->

    <script type="text/javascript">

        window.__be = window.__be || {};

        window.__be.id = "XXXXXXXXX";

        (function() {

            var be = document.createElement('script'); be.type = 'text/javascript'; be.async = true;

            be.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.chatbot.com/widget/plugin.js';

            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(be, s);

        })();

    </script>

    <!-- End of ChatBot code -->

{% endif %}


Of course, the code between <script type="text/javascript"> and </script> will be the JavaScript snippet you want to add on all pages except for the course player.


5. If a user is not subscribed to any subscription plan, /social redirects to another page


<!-- If user is not subscribed to any plan, /social redirects to another page -->

{% if REQUEST.SLUG == "social" and USER.SUBSCRIBED != false %}

    <script type="text/javascript">

        window.location.href = '/subscription-plans'

    </script>

{% endif %}


This is great if you are looking to create a membership school, where the community is available only to users subscribed to a plan.



More Examples

Here are some more examples to help you with syntax and provide with concepts you could use the custom code editor for.


HTML with Liquid


Include a custom stylesheet in all pages except for the social page

{% if REQUEST.SLUG != "social" %}

    <!--include custom stylescheet in all pages except for social-->

    <link rel="stylesheet" href="https://www.mycdn.com/mystyle.css">

{% endif %}


Import a custom script in the /social page

{% if REQUEST.SLUG == "social" %}

    <!--Import custom script in social page-->

    <script type="text/javascript" src="https://www.mycdn.com/myscript.js"></script>

{% endif %}


CSS


Change the inbox text color to red

body.slug-inbox * {

    /* Make the text in inbox page red */

    color: red;

}


In profile page make the text bold 

body.slug-profile * {

    /* Make the font weight of all colors in profile page red */

    font-weight: bold;

}


Modify workpad page to span the entire width of the page

body.slug-workpad #workpadWrapper {

    /* Make workpad view wide */

    width: 100% !important;

}


Remove the profile avatar from the people page and adjust the card height to 150px

body.slug-people .profile-avatar {

    /* remove profile avatar and make card shorter in people page */

    display: none !important;

}

body.slug-people .profile-card {

    height: 150px;

}


Javascript in HTML slot with Liquid


Redirect new users to your favourite youtube video

<script type="text/javascript">

    // Redirect new users to another page

    {% assign reg_date = USER.REGISTER_DATE | date: "%Y-%m-%d" %}

    {% if reg_date > '2020-03-25' %}

        window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

    {% endif %}

</script>


Show a popup to all users tagged as premium

<script type="text/javascript">

    // Show a popup to all users tagged as premium

    {% if USER.TAGS contains 'premium'  %}

        alert("You are awesome!")

    {% endif %}

</script>


Wish happy birthday to your students with an alert instead of a section

<script type="text/javascript">

    // Wish happy birthday to a user

    {% assign md_bday = USER.BIRTHDAY | date: "%m-%d" %}

    {% assign md_now = "now" | date: "%m-%d" %}

    {% if md_bday == md_now %}

        alert("Happy birthday!")

    {% endif %}

</script>   


Read custom URL params and change the behaviour of your website accordingly

<script type="text/javascript">

    // Add custom url params to your external links

       // and handle referred users differently

        {% if REQUEST.PARAMS.example == 'example'  %}

            alert("Welcome!")

        {% endif %}

</script>


Read more