Site Designer Guide
global-code head footer analytics custom-code scripts

Global head and footer code

Global Code lets you inject HTML, CSS, or JavaScript that appears on every page of your site — without touching each page individually. It is the right place for analytics scripts, font imports, and any third-party tags that must be present everywhere.

Opening Global Code

  1. Go to Settings in the top menu bar.

  2. Choose Project.

  3. Click the Global Code tab.

Two text areas are available: Head (for content inside <head>) and Footer (for content just before </body>).

The Head section

Everything you put in the Head section is injected into the <head> element of every exported page, after Site Designer’s own generated tags. Use it for:

  • Web fonts via <link> tags or @import (Google Fonts, Adobe Fonts, custom self-hosted fonts).
  • Analytics initialization scripts that must load early (some analytics providers recommend this).
  • Additional <meta> tags such as theme-color, viewport overrides, or verification tags from search consoles.
  • <link rel="preconnect"> declarations to speed up third-party connections.
  • Custom global CSS in a <style> block — though per-element styles are better handled in the Style pane.

Content in the Footer section is injected just before the closing </body> tag on every page. This is the conventional location for:

  • Analytics scripts like Google Analytics (gtag.js) or other tag managers (Google Tag Manager, Segment, Plausible).
  • Chat widgets and customer support scripts (Intercom, Crisp, Tidio).
  • JavaScript libraries that do not need to block page rendering — they load after the HTML is parsed.
  • Consent management or cookie notice scripts.

Per-page code injection

Global Code runs on every page. For scripts or styles that belong on only one page:

  1. Open Page Properties (right-click the page in the Page Manager → Properties).

  2. Click the Code tab.

  3. Add code to the Page Head or Page Footer fields.

Page-level code is injected in addition to (not instead of) Global Code.

Execution order on the page

  1. Site Designer’s generated <head> tags (charset, viewport, title, styles).
  2. Global Head code.
  3. Page-specific Head code.
  4. Page HTML content.
  5. Global Footer code.
  6. Page-specific Footer code.

Common examples

Google Analytics (GA4):

<!-- Paste into Footer section -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Loading a Google Font:

<!-- Paste into Head section -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">