Adding Custom Code
RevasOS templates come with a lot of configurations and settings to enhance the look and feel of your website. However, if you want to expand the functionality of your website, RevasOS templates offer a lot of flexibility to achieve your web goal.
By adding code, you can change the look and feel of your website to suit your needs using HTML, CSS and Javascript. You can do this in the following ways:
- By placing code inside the
<head />tag of your website (affects the entire website), - By placing code inside the
<body />tag of your website (affects the entire website), - By placing code at a specific point on a specific page (affects only the page where it is placed).
‼️‼️ Check the safety of a script ‼️‼️
Scripts execute arbitrary code on your website. If you are writing a script or injecting external packages, you should ALWAYS ensure before publishing that they are not executing malicious code and that the external links are safe. Read the code injection security best practices guide
Impact on loading
Adding custom code can impact loading performance, especially if the code needs to perform a lot of calculations or relies on external libraries or packages.
Insert code into the HEAD tag
- Open the Websites application in RevasOS;
- Click Settings;
- Click Custom code injection;
- Insert the code in the Custom code <\head> tag field. If you need to enlarge the editor, click the gray icon inside it in the top right corner;
- When you're done, make sure you know where the code comes from and how it works to ensure its safety. Once checked, select the Code is safe checkbox and then the Update custom code button to apply the code.
The code is always added at the bottom of the tag to avoid impacting the site's loading performance too much.
Insert code in the BODY tag
- Open the Websites application in RevasOS;
- Click Settings;
- Click Custom code injection;
- Insert the code in the Custom code <\body> tag field. If you need to enlarge the editor, click the gray icon inside it in the top right corner;
- When you're done, make sure you know where the code comes from and how it works to ensure it's safe. Once you've checked it, select the Code is safe checkbox and then the Update custom code button to apply the code.
The code is always added at the end of the tag so as not to impact the site's loading performance too much.
Insert code in a specific point on a page
- Open the Websites application in RevasOS;
- Find the website where you want to insert the code and click Edit;
- Click the page where you want to insert the code;
- Choose where to insert the code in the block list, then click the + button and then Code block
- Insert the code in the editor and click Save;
- To publish the changes online, click Publish and publish the page.
The code is always added exactly where you inserted the section