You can extend the functionality by adding custom code to your site. This allows you complete flexibility when creating additional functionality. Adding custom code isn't something that should be done on any production website without previous experience, as it can be problematic. Here are some guidelines that are important to follow and some troubleshooting options if you've added custom code to your site and it’s impacting site performance.
HTTP vs HTTPS
If you're working with custom code, it's good to know that scripts and resources can only be loaded in the same HTTP or HTTPS.
The editor by default is always loaded in HTTPS. If you're using an HTTP script in the editor, it will not be visible in the editor since it's loaded over a secure connection but will be visible on the live site since it's loading in an unsecured connection.
To fix this, it's always better to load your resources over a secure connection.
For code that needs to be placed in the header
Create a duplicate of the site, then test your code on the duplicate site. If it fails, you can simply delete the site.
Alternatively, you can test the header code on a separate, blank page on the same site. If the page crashes, simply delete the page or access the code via developer mode.
For code that needs to be placed on a page
- Create a duplicate of the page, then add in your custom code.
- If it fails, you can actually navigate to the page's HTML/CSS by going to another page and accessing developer mode from there
- You can also delete the page and start again by creating a duplicate.
If custom code is on your homepage, you can try accessing your editor by adding a /contact or some other URL to the end of your editor's link
Page speed optimization will affect how certain scripts are run.
PageSpeed optimization is run on most pages, which can cause issues with your custom code. When troubleshooting code, you can see if it's a PageSpeed issue by:
- Duplicate the page with your scripts
- Change the URL to "testing_scripts"
- Publish and check the page on your live site
If your code works on that page, you must contact support to turn off PageSpeed optimization for your site.
If you're using a script, you can also try making sure your script runs asynchronously - it isn't guaranteed, but it sometimes can solve the issue with scripts not executing properly in the browser.
To enable async on scripts, you need to alter it like this:
Old code: <script src=”https://example.com/script.js”></script>
New async: <script src=”https://example.com/script.js” async defer></script>
Always disable animated navigation
The animated navigation feature often interferes with the way the custom code is loaded. You can disable animated navigation in responsive websites by right-clicking your navigation element in your editor >>> edit >>> turn off animated navigation.
A site that is broken by coding will load a blank page in the editor (or break the editing features). If custom code broke your site, there are several options available to you.
Restore to a backup
If you created a backup of your site, then this is the best method of restoring your site to a point before the custom code was added.
Even if you haven't created a backup, the editor creates one for you when you publish or enter developer mode. See this article for more information.
Access a different part of the page
You can access the editor in a new page by entering a different URL in your editor link. This is a link accessing the "about us" of a site, for example;
Once there, delete and re-add the page.
Try loading the non-secured version of the editor
Try logging into http://my.website-editor.net?nossl which will allow you to load scripts that were not embedded via a secure connection.
Access developer mode to fix the issue manually
How do I get my custom code to work?
Custom code is very unpredictable. There are many, many factors on why your custom code may not be working, so it isn't possible to say exactly which part of your custom code isn't working with our site builder.