Custom Code Guidelines

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.

IN THIS ARTICLE:

• HTTP vs HTTPS
• Custom Header Code
• Custom Page Code
• Page Speed Optimization
• Disable Animated Navigation
• Troubleshooting

HTTP vs HTTPS

If you are working with custom code, it is 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 are using an HTTP script in the editor, it will not be visible in the editor since it is loaded over a secure connection, but will be visible on the live site since it is loading in an unsecured connection.

To fix this, it is always better to load your resources over a secure connection.

Custom Header Code

When adding custom code to a header, create a duplicate of the site, and 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.

Custom Page Code

When adding custom code to 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

Page speed optimization affects how certain scripts are run. We run PageSpeed optimization on most pages in SiteBuilder, which can cause issues with your custom code. When troubleshooting code, you can see if it is a PageSpeed issue by:

1. Duplicating the page with your scripts.
2. Changing the URL to “testing_scripts.”
3. Publishing and checking the page on your live site.

If your code works on that page, contact support to turn off PageSpeed optimization for your site.

If you are using a script, you can also try making sure your script runs asynchronously—it is not guaranteed, but it sometimes can solve the issue with scripts not executing properly in the browser.

To enable async on scripts, alter your code using the following:

• Old code: <script src=”https://example.com/script.js”></script>
• New code: <script src=”https://example.com/script.js” async defer></script>

Disable Animated Navigation

SiteBuilder‘s animated navigation feature often interferes with the way the custom code is loaded. You can disable animated navigation in responsive sites by right-clicking your navigation element in your editor, click “Edit”, and click “Turn off animated navigation”.

Troubleshooting

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

• If you have a backup, in the left panel, click “Settings”, click “Backup Site”, and restore to a backup.
• Log in to http://my.Website Builder.co?nossl which is a more code friendly version of our platform.
• If you are 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. This is a link accessing the “About Us” page of a site, for example; https://my.Website Builder.co/home/site/XXXXXXX/about
• If the editor is broken, try to force open the editor by using the keyboard shortcut for the element inspector
  • Mac. Command+Option+C
  • PC. Ctrl+Alt+C
• If custom code is not running correctly, try disabling “AJAX Page Changing” (Quick Navigation) in the Header HTML.