Print
The Custom Code sections support the following types of code:
- HTML
- CSS
- JavaScript
When integrating custom codes, you cannot use server-side languages, such as Python, Perl, Node, PHP, Ruby, .NET, or Java.
Add custom HTML/CSS/JS code to your Learning Portal
You can add your own code to be loaded in every page of your Learning Portal, to tailor it to your specific needs.
You can use custom code to install Google Analytics, Messenger, or a specific widget in your pages. You can also customise the look & feel of your page by changing the styles and layout of the theme.
Please note that custom code is applied to all the pages in your Learning Portal, from the login page and dashboard, down to every course page.
Keep in mind that custom code is an advanced modification. As such, it may cause conflicts with Xen's functionality, resulting in unexpected behavior on your Learning portal and Courses.
The Custom Code sections support the following types of code:
- HTML
- CSS
- JavaScript
These are considered frontend codes, which are interpreted by the browser.
When integrating custom codes, you cannot use server-side languages, such as Python, Perl, Node, PHP, Ruby, .NET, or Java.
About CSS
Make sure to wrap your CSS code inside a <style>...</style> tag, or it will show to your visitors.
About Javascript
Adding custom JavaScript codes can add a lot of functionality to your website.
Xen is also equipped with a simpler version of JavaScript called jQuery.
You can use it together with JavaScript to make the writing process easier. There is no need to import jQuery as it is already loaded in every page.
Make sure to wrap your JS code inside a <script>...</script> tag, or it will show to your visitors.
Disclaimer
Custom code is an advanced modification that may conflict with Xen underlying functionality.
Xen does not verify or fix your code for you, therefore, there’s no guarantee that every custom code will be fully compatible or functional.
As such, Xen cannot guarantee the functionality or full compatibility of any custom code.
Additionally, our support team is unable to provide direct help with custom code setup or troubleshooting, as these topics fall outside the scope of our customer support policy.
If you run into issues with custom code, we recommend that you remove it, and practice in a separate environment until you are confident with your code.
How to add Custom Code
To access the Custom Code settings:
- Select the Admin section from the top navigation bar.
- Select the Settings option from the horizontal menu.
- Activate the Custom Code tab.
Location of your code
When adding a custom code to the theme, you can choose whether to place it in the page's <head> (header) tag or inside the page's <body> (footer) tag.
Head
Custom code entered in the Head code section appears before the closing </head> tag in your Learning Portal’s HTML markup and applies to your entire site. The Head code section allows you to link external resources, add metadata, and use custom styles.
You should always place HTML and CSS codes inside the <head> tag. Adding external <script> tags to the <head> of your site can slow page loads. Consider adding the “async” or “defer” attribute in the <script> tag to improve performance.
Footer
Code entered in the Footer code section appears before the closing </body> tag in your Learning Portal’s HTML markup and applies to your entire site.
JavaScript codes should go in the <body> tag section. Typically, this will improve the website’s performance.
Note: When writing a custom code, you shouldn’t include the <body>, <head>, or <html> tags. Otherwise, your website will break. However, don’t forget to include the opening and closing tags, if there are any.
Examples of supported code
Link tag: <link>
The <link> tag defines a link between a document and an external resource and should always go in the <head> code section.
Meta tag: <meta>
The <meta> tag provides metadata about your site and should always go in the <head> code section.
Style tags: <style></style>
The <style></style> tag defines additional CSS styles in your site and should always go in the <head> code section.
Script tags: <script></script>
The <script></script> tag allows you to embed JavaScript in your site and can be added to either the <head> code section or before the closing </body> tag (i.e., the Footer code section). However, adding your <script></script> tags just before the closing </body> tag ensures your site pages load all their content before the JavaScript is processed, which helps with page load speed and provides a better user experience.
The <link> tag defines a link between a document and an external resource and should always go in the <head> code section.
Meta tag: <meta>
The <meta> tag provides metadata about your site and should always go in the <head> code section.
Style tags: <style></style>
The <style></style> tag defines additional CSS styles in your site and should always go in the <head> code section.
Script tags: <script></script>
The <script></script> tag allows you to embed JavaScript in your site and can be added to either the <head> code section or before the closing </body> tag (i.e., the Footer code section). However, adding your <script></script> tags just before the closing </body> tag ensures your site pages load all their content before the JavaScript is processed, which helps with page load speed and provides a better user experience.
About Saving
As soon as you Save, the changes will immediately be published, instantly visible to all across the Learning Portal.
Support
Unfortunately, custom coding falls outside the scope of Xen's Support Policy, therefore the Xen Customer Success team will be unable to assist if your custom code isn’t working.
FROGED