Developer Tools

Although Sitely is a website builder that requires no knowledge of coding, we recognise that there may be situations where we have to delve under the hood from time to time in order to get things working correctly. Fortunately, Sitely handles the most common situations with ease, and without you having to do anything. A prime example is adding Google Analytics or AdSense code to your website. This would normally entail manually adding the code directly into the HTML of the web page. However, in Sitely, you can add this code through the various site settings options, leaving Sitely to insert them in the correct place in the HTML page.

The most likely scenario where you may need to manually add code yourself is usually when you’ve been given a piece of code by a third party service provider. Typically, third party form processors may give you some code to display a form in your web page. Such forms are normally created on remote servers and served up to your website via a piece of code. Other examples are third party scripts. These are web applications that provide additional functionality to your website, such as booking systems or membership scripts. When you need to incorporate this code into your webpage, it may require you to add different pieces of the code in different parts of the page. 

Typically, HTML pages will have a Head section, and a Body section. The head section of a page is usually used for things like Meta-Information, such as the page title, links to external stylesheets, or remotely hosted stylesheets or scripts. The body section is the part of the HTML that is seen visually by site visitors, such as text, images, graphics and other elements. 

When you acquire a piece of code, either from a third party provider of hosted services, or by a script that you install on your own server, there will often be a need to segregate the code into Head, and Body code. As a general rule, Head code will be used to call up remotely-hosted PHP or Javascript code or style sheets in order to correctly display whatever content is going to be added to your page in the body section. The body code will often be the code you insert into the page to create an element that site visitors can see and/or interact with. For example, you may have a membership script that allows visitors to sign up to a members mailing list. The sign-up form itself will be served up by a web server (either your own or from a third party) so that it can be displayed in your web page. Below is a typical example of a piece of Head code provided by a script. Its purpose is to protect a page from unauthorised access.

This may be followed by a piece of code to create a registration form where users can self register as members. This code would appear in the Body section of the page.

You don’t have to understand what these code snippets do or how they function. What is important is to know where to insert them in your Sitely Page. The first piece of code would be the Head code. It must be the first thing on the page in order for the linked membership script to work properly. This would be added via the Code button located at the top of the pages panel in Sitely. Here is what it looks like:

In the example of our Membership script, we would copy and paste the head code into the box titled ‘PHP before HTML’ The reason for this is that the page must be a PHP page for this script to work. Therefore, The first thing that the page needs to do is execute this PHP code before it does anything else (NOTE: the page name must be changed to have a PHP extension before publishing). If the head code was pure HTML, you would insert it in the box titled ‘Code for HTML.

The next piece of code we would want to add to the page would be the code that displays the registration form from the script. This would be added to the Body of our page using the ‘Embed’ element. This will create an empty box on the Sitely canvas which you can position to wherever you want the registration form to appear. With the embed box selected, you nip over to the style panel and add your code snippet. The option looks like this:

If the code is likely to expand vertically, be sure to click the ‘content expands vertically’ checkbox. Always click the save/refresh button after adding or editing code. If your script is on a live server, it may display on the page. However, some content will not produce a preview until it is published on-line.

Site-Wide Development Tools

In addition to the page-specific options detailed above, you can also add site-wide developer elements to your website through the Developer option in the settings panel. Here you can specify the output folders for the various elements that you add to your page, including style sheets (CSS) and Javascript (JS) files. Additionally, you can add custom files, either from your disk, or from linked hosted resources. 

These options will be useful if some of your embed code includes links to style sheets or code that you have to host as part of your website. A typical example of where these option may be useful is where you may be using content from websites such as codepen. For example, you may be faced with code that is split into three separate sections - The HTML for embedding in the page, The CSS to style the content and the JS to make things work. These can all be copied and pasted into individual files and included as part of your Sitely project.

In addition to individual files, you can also add HTML code in the head section of all your web pages through the developer options panel. Just scroll down the panel to see the code box.

Just remember, any code you add into this box will be added to the Head section of all pages in your website.

A Note of Caution: Delving into code with little or no experience, can create problems with your web page. Whilst Sitely can handle these developer options quite well, there is always a risk of code conflicts which can cause your site to malfunction. Use these options wisely and always test before going live. For code that requires testing on a server, it’s best to publish to a testing folder on your server, before launching your new site onto the big wide world.