Custom Coding Guidelines

Overview

Our editor is very flexible in that you can extend the functionality of your site by adding any custom script or code, though the custom code has a tendency to break or disable the editor or require other steps to be done to work. Because of that, we have some guidelines that you should follow whenever testing custom code.

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

1. Create a duplicate of the page, then add in your custom code.
   

2. If it fails, you can actually navigate to the page's HTML/CSS by going to another page and accessing developer mode from there
   

3. You can also delete the page and start again by creating a duplicate.
   

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

1. Duplicate the page with your scripts

2. Change the URL to "testing_scripts"

3. 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 going to right-clicking your navigation element in your editor > edit > turn off animated navigation.

Notes and considerations

If custom code broke your site, be sure to file a report here.

Troubleshooting

Help! Custom coding broke my site!

A site is broken by coding normally loads a blank page in the editor (or breaks your editing features). If custom code broke your site, there are several options available to you.

• If you have a backup, restore it from site settings > backup versions > restore to backup.

• If you're unable to access that in your editor by loading it, you might be able to workaround it by loading a new page.
  
  To fix this issue, try accessing your editor on a new page. You can do this by entering a different URL in your editor link.

Policy on custom coding

Due to the unpredictable nature the f custom code, we are unable to troubleshoot why a custom coded element might not be working on a site.

Do you have anyone who can troubleshoot my code?

We currently don't don't have any developers available to troubleshoot custom code, so please follow the guidelines above when experimenting with custom code on your site.