Overview
Custom code can be added to various parts of your website to accomplish certain things. When getting code from another source, it's important to understand where that code must be placed.
Once you know where your code needs to be placed, you can follow this tutorial and the references below to figure out where and how to place your code into your site.
Site-wide vs an individual page
Depending on where you paste your code, you can paste it either site-wide (will appear on all pages) or on just one single page. The places that this tutorial instructs you to place code will let you know if it is a site-wide change or just a single individual page.
Placing code via the HTML widget
The HTML widget can be used to easily place code into your site. If you have any code that just needs to be placed on the site, simply follow the instructions below.
- Open your editor
- Go to the page you need to add code into
- In the content section, click on the "Design" tab
- Look for the HTML widget
- Drag anywhere into your site
- Paste in your code
- Hit done and save
Site-wide vs single page HTML widget
Depending on where you place your HTML widget, it will either appear on all pages of your site or just a single page.
If you place the HTML widget in either the header or the footer, it will be placed on all pages of the site at the same time. This is because every site shares the header and footer.
If you place the HTML widget anywhere else, it will appear only in the body.
Placing code in the header
Site-wide header
To place code on the site-wide header, follow the instructions below.
- Open your editor
- Go to settings icon in the top right
- Click on "Site Settings"
- Click on the "Advanced" tab
- Go to "Head section"
- Paste in your code here and save
Single page header
To place code in the header of just one single page, follow the instructions below.
- Open your editor
- Go to the page you want to paste it into
- Click on "SEO & Page settings"
- Click the "Head Section" tab
- Paste in your code here
Placing code after the opening body tag
We currently do not have a feature to place code directly right after the opening body tag.
Instead, simply drag in the HTML widget as per the the instructions
Adding tracking code to a contact form
We currently do not have this feature in the mobile website builder. Instead, what you can do is redirect after submission to a page in your mobile website builder with a conversion tracking code in that page.
Creating the thank you page
- In the editor, go to "Pages"
- Add a new basic page
- Customize this page, add text to make it look like a "Thank you" page
- Drop in your custom code via the HTML widget
- Done
After you've done this, move on to redirecting the contact form page upon submit.
Redirecting the contact form to the thank you page on submit
- In the editor, go to the page your contact form is on
- Click edit to go into the settings
- Click the "Email Settings" tab
- Check "Redirect to page after submission"
- Select your "Thank you page" with the conversion tracking code in the list
- Done
This will now track whenever users land on the thank you page, tracking conversions.
Adding code to a widget
To add any code to any widget, follow the instructions below.
- Open your editor
- Locate the page your widget is on
- Left click the widget
- Click "Edit"
- Go to the "More" tab
- Click the "HTML" tab
- Edit the code here as needed
Notes, considerations and troubleshooting
Always create a backup
It's recommended that you always create a backup of your site before adding custom code. This is because custom code is difficult to troubleshoot and can potentially bring a website down if not done properly.
My code is not working
If you have code that's not working in the site, it's most likely due to the code not being formatted correctly or not being HTTPS.
If you have any links in your code (http:// or //) and your site is using HTTPS or you're in the preview, then you will have to change that so that it's https:// instead. The reason for this is because non HTTPS code will not work in an HTTPS loaded connection (site preview, editor, etc).