In this article, you will find various case examples of custom code which you can utilize in our custom code editor, since the following snippets of code are ready to use. You will need to 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 %}
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 %}
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.
Redirect users who have a specific tag to another page
{% if USER.TAGS contains 'tester' %}
<script>
window.location.replace("https://yourschool.learnworlds.com/start");
</script>
{% endif %}Make sure to replace "https://yourschool.learnworlds.com" with your LearnWorlds school URL and 'tester' with your created tag. If you wish to add it to a specific page then add it under Page Custom Code → Body logged in, if you wish to add it for the entire website, navigate to Site Custom Code → Body logged in.
Here are some more examples to help you with syntax and provide concepts you could use the custom code editor.
HTML
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
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;
}Make the "Create account" and "Forgot password" text in the sign in/up form bigger (Add in Dynamic CSS)
.-form-create-forgot .learnworlds-main-text-very-small{
font-size:1.6rem;
}
.-form-create-forgot .-login-small-but{
padding-right:10px;
}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
<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>
Disable right click
<script>
// Disable right-click context menu
window.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
</script>- For logged our users: Add in <head> logged out (html)
- For logged-in users (pages and course player): Add in <body> logged in (HTML)