Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

Custom Code Case Examples

In this article, you will find various case examples of custom code which you can utilize in our custom code editor. It's a piece of cake process, essentially, the following snippets of code are ready to use. You need to simply copy and paste the code in the matching slots.


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 %}

Note: Make sure to replace section_1605027934373_3 with the id of the specific section. In order to find the section id, you need to click on section→ choose the edit HTML icon→ detect the section id within the custom code editor.

Add a javascript snippet, such as a chatbot, 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 %}

Add a chatbot 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 %}

Note: 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.


If a user has 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.

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 to 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 with Liquid

Change the inbox text color to red

body.slug-inbox * {
    /* Make the text in inbox page red */
    color: red;
}

On the 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 favorite 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 behavior of your website accordingly


Relevant Articles

Read more

Did you find it helpful? Yes No

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