I have custom code, where do I place it?

  • Knowledge Base
  • Responsive Website Builder
  • I have custom code, where do I place it?
  • Duda Support > Responsive Website Builder > Editing a Site

Overview

Custom code can be added to various parts of your website to accomplish certain things. When getting the code from another source, it's important to understand where that code must be placed.

If your code tells you to put one part in the header, look for the "header" instructions in this article to see how to paste it in the header.

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 on 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.

  1. Open your editor
  2. Go to widgets
  3. Search for HTML
  4. Drag anywhere into your site
  5. Paste in your code
  6. Done

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

customcode1_en-US.png

To place the code in the site-wide header, follow the instructions below.

  1. Open your editor
  2. Go to settings in the left sidebar
  3. Click on "Header HTML"
  4. Paste in your code here and save

Single page header

customcode2_en-US.png

To place the code in the header of just one single page, follow the instructions below.

  1. Open your editor
  2. Go to the pages section
  3. On the page, you want to add it into, click on the settings icon.
  4. Click "SEO"
  5. Scroll down to "Header HTML"
  6. Paste in your code here and save.

Placing code after the opening body tag

We currently do not have a feature to place code directly right after the opening body tag.

Despite that, you should be able to paste your code directly into the body-end.html file and it should work just as well. See below for instructions.

Site-wide body-end.html

  1. Open your editor 
  2. Open developer mode at the top right customcode3_en-US.png
  3. Click on Site HTML / CSS to expand the selection.devmode1_en-US.png
  4. Click on "body-end.html".devmode2_en-US.png
  5. Paste your code into the last line here
  6. Save and done!

Adding tracking code to a contact form

To add tracking code to a contact form, follow the instructions below.

  1. Open your editor.
  2. Navigate to the page your contact form is on.
  3. Left click your contact form to open the options.cf2_en-US.png
  4. Click on "Submission".cf1_en-US.png
  5. Click on "Tracking".cf3_en-US.png
  6. Paste your conversion tracking code here.

Adding code to a widget

To add any code to any widget, follow the instructions below.

  1. Open your editor.
  2. Locate the page your widget is on.
  3. Right-click your widget to bring up the context menu.widgetcode1_en-US.png
  4. Click "Edit HTML/CSS".widgetcode1_en-US.png
  5. Edit or add code here as needed.widgetcode2_en-US.png

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 the custom code is difficult to troubleshoot and can potentially bring a website down if not done properly.

My code is disappearing when I place it in the head section

This is very common with pixel tracking codes. The head section (<head>) does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>,<script> and <meta>.

If you have to paste in the code that's not being saved there, simply paste it in the header instead, where your navigation links and logos are.

Otherwise, paste it in the body-end.html as per the tutorial above.

My code is not working

If you have code that's not working on 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 the non-HTTPS code will not work in an HTTPS loaded connection (site preview, editor, etc).

 

 

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!