Devcron Platform
DashboardHome
  • Welcome
  • Platform News
    • Recents
      • Devcron Sites Are Now More Accessible
      • This Global Colors Feature Cuts Color Picks by 80% and Ups Scalability
      • Jump Start Your Site Membership by Actively Inviting Members
  • Overview
    • Platform Overview
    • Dashboard and Account
      • Dashboard Overview
      • Site Overview
      • Account Setting
      • Site Comments
      • Statistics and Analytics
  • Professional Website Builder
    • Getting Started
      • Editor Overview
      • Launching Your Site Checklist
      • Row Editor
      • Global Design
      • Global Colors
      • Responsive Tablet
      • Customize Background
      • Edit by Device
      • Switch Views
      • Sidebar Layout for Desktop
      • Global Text
      • Image Picker
      • Manage and Import Content
      • Add Sections
      • Arrange Content
      • Copy and Paste
      • Quick Access
      • Show Hidden Elements
      • Keyboard Shortcuts
      • System Requirements
    • Publishing Site
      • Go Live, Publish, and Set Up Your Domain
      • Purchase a Custom Domain
      • Configure Alternate Domains
      • Unpublish a Site
    • Pages and Popups
      • Pages and Popups
      • Configure a Multi-Language Site
      • Add a Navigation Folder
      • Change Home Page
      • Password Protected Pages
      • Publish a Single Page
    • Membership (New)
      • Add Membership Pages
      • Membership Plans
      • Bulk Invite Members to Membership Sites
    • Header and Footer
      • Headers
      • Header and Expandable Menu
      • Shrinking Headers
      • Footer
    • Content
      • Local Business Schema
      • Image Terms and Licensing
      • Image Size Guidelines
      • Image Editor
      • Add Premium Images (Shutterstock Images)
      • Video Backgrounds
      • Use the Color Picker
    • Connected Data and Dynamic Pages
      • Connected Data
      • Dynamic Pages
      • Collections
      • Internal Collections
      • Airtable Collections
      • Google Sheets Collections
      • External Collections
      • Create Dynamic Pages
      • Connect Your Dynamic Page Widgets
      • Add Lists to Display Dynamic Pages
    • Flex Editor
      • Flex Overview
      • Flex Breakpoints
      • Flex Design Panel
      • Add and Edit Flex Sections
      • Create Overlapping Elements in Flex
      • Flex Alignment and Spacing
    • Personalization Rules
      • Personalization Rules
    • Blog
      • About Blogs
      • Updating an Old Blog to the New Blog Platform
      • Blog Settings
      • Add and Edit Blog Posts
      • Manage Post Settings
      • Import Blog Posts from RSS Feeds
    • Custom Code
      • Custom Code Guidelines
      • Using HTML and Custom Code
      • How Can I Troubleshoot Custom Code?
      • Developer Mode
      • Google Analytics Integration
    • Site Settings
      • Site Settings
      • Site Icons
      • Backup Sites
      • Add SSL or HTTPS
      • Load Site in an iframe
      • Header HTML
      • Set a Default Site Language
      • Facebook Tracking Pixels
      • How to Add Schema Markup to Your Site
      • URL Redirects
      • Privacy Settings
      • Site SEO Settings
      • Introduction to SEO
      • Examples of SEO Keywords and Descriptions
      • IndexNow
      • Fonts Library
      • Security Measures
      • General Data Protection Regulation (GDPR) Compliance Information and Resources
      • The California Consumer Privacy Act of 2018 (CCPA) Compliance Information and Resources
      • Introduction to Core Web Vitals
      • Optimize Your Site for Core Web Vitals
      • Core Web Vitals FAQs
      • Lighthouse and Core Web Vitals Comparison
      • Progressive Web App (PWA)
      • Google Tag Manager Tracking
    • Edit On Mobile
      • Edit On the Go
      • Site Stats on Mobile
      • Use the Dashboard on Mobile
      • Edit Image Widgets on Mobile
      • Edit Image Slider and Photo Gallery Widgets on Mobile
      • Edit Click-to-Call and Click-to-Email on Mobile
      • Select and Add Images on Mobile
      • Link Picker
      • Backup, Publish, Re-publish, and Unpublish on Mobile
      • Edit Sites on a Tablet
  • Widgets
    • Widget Overview
      • Add Widgets
      • Edit Widgets
      • Widget Design
      • Outer and Inner Spacing
      • Inline Editing
      • Add Animations
      • Blog Widgets
    • Basic Widgets
      • Text Editor
      • Title Widgets
      • Button Widget
      • Floating Buttons
      • Breadcrumbs Widget
      • Icon Widgets
      • Table Widget
      • Navigation and Sub-Navigation Links
      • Anchor Tags and Links
      • Text & Image Widget
      • List Widget
      • Accordion Widget
      • Tabs Widget
      • Countdown Widget
      • Copyright Widget
      • Spacer Widget
      • Upload a File
    • Media Widgets
      • Image Widget
      • Photo Gallery Widget
      • Image Slider Widget
      • Video Widget
      • Troubleshooting Video Widget
      • Lottie Animation Widgets
      • Before & After Widget
      • Shape Widgets
      • Audio Widgets
    • Business Widgets
      • Contact Forms
      • Configure a GDPR-Friendly Contact Form
      • Contact Form Responses
      • Contact Form Integrations
      • Contact Form Troubleshooting
      • Zoom Widget
      • Map Widget
      • Google Calendar Widget
      • Click To Call
      • Click to Email
      • Business Hours
      • Multi Location Widget
      • Yelp Reviews
      • Online Scheduling
      • OpenTable Reservation Buttons
      • Restaurant Menus
      • Coupons
      • PayPal Button
    • Social Widgets
      • Instagram Feed
      • Reconnect Instagram Feed
      • Social Icons
      • WhatsApp Widgets
      • Social Share Widgets
      • Twitter Feeds
      • Facebook Feeds
      • Facebook Like Button
      • Facebook Comments
      • Disqus Comments
      • RSS Feeds
Powered by GitBook
On this page
  • HTTP vs HTTPS
  • Custom Header Code
  • Custom Page Code
  • Page Speed Optimization
  • Disable Animated Navigation
  • Troubleshooting
  • Website Builder's Custom Code Policy

Was this helpful?

  1. Professional Website Builder
  2. Custom Code

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.

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 Website Builder, 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

Website Builder'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 that 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

Website Builder's Custom Code Policy

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

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

PreviousCustom CodeNextUsing HTML and Custom Code

Last updated 2 years ago

Was this helpful?