Solidarity Tech
Guides
Sign Up
Start typing to search…

Custom Code Injection

Add custom HTML, scripts, tracking pixels, and other code to your website pages using the Head HTML fields at the website or page level.

Solidarity Tech provides two levels of custom code injection so you can add tracking pixels, analytics scripts, custom fonts, meta tags, or any other code that belongs in the <head> section of your pages.

Site-wide Head HTML (Website Level)

Code added at the website level is injected on every page across your entire website. This is ideal for scripts and tags you want running globally.

How to add it:

  1. Navigate to Websites in the sidebar and select your website
  2. Click the Settings tab
  3. Scroll down to Site-wide HTML Head Content
  4. Paste your code into the text area
  5. Click Save

The code you enter here will be placed just above the closing </head> element on every page in the website.

Common use cases for site-wide code

  • Analytics scripts (Google Analytics, Plausible, Fathom, etc.)
  • Facebook/Meta Pixel
  • Google Tag Manager
  • Custom fonts (Google Fonts, Adobe Fonts, etc.)
  • Site-wide meta tags
  • Chat widgets (Intercom, Drift, etc.)

Example: Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

Example: Meta Pixel

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Replace YOUR_PIXEL_ID with your actual Meta Pixel ID.

Example: Plausible Analytics

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Scripts After Cookie Acceptance

If you enable the Cookie Consent Banner in your website settings, an additional field appears: Scripts After Cookie Acceptance. Code placed here will only execute after a visitor clicks "Accept" on the cookie consent banner. This is the right place for tracking scripts that require explicit user consent under GDPR or CCPA.

How to add it:

  1. In your Website Settings tab, enable Show Cookie Consent Banner
  2. The Scripts After Cookie Acceptance field will appear below it
  3. Paste tracking scripts that require consent into this field
  4. Click Save

This keeps your website compliant by ensuring analytics and advertising scripts only fire after the visitor has given consent.

Page-level Head HTML

Code added at the page level is injected on that specific page only. This is useful when you need tracking or customization that applies to a single page rather than the entire website.

How to add it:

  1. Navigate to your page in the dashboard
  2. Click the Settings tab (or scroll down to the Customizations section on form pages)
  3. Find the Head HTML field
  4. Paste your code into the text area
  5. Click Save

The code is placed above the closing </head> element, just like the site-wide version, but only on this specific page.

Common use cases for page-level code

  • Conversion tracking pixels on a specific donation or signup page
  • Page-specific meta tags or structured data
  • A/B testing scripts scoped to one page
  • Custom CSS for a single page using <style> tags

Example: Conversion tracking on a donation page

<script>
  fbq('track', 'InitiateCheckout');
</script>

Example: Page-specific custom CSS

<style>
  .action-page-content h1 {
    font-size: 3rem;
    letter-spacing: -0.02em;
  }
</style>

Liquid template variables

Page-level Head HTML supports Liquid template syntax, which means you can use dynamic variables in your code. For example, if you want to pass data to a tracking script dynamically, you can use Liquid variables within your Head HTML.

How the code is rendered

When a page loads, the custom code is injected in this order:

  1. Page-level Head HTML (if any)
  2. Site-wide Head HTML (if any)
  3. Scripts After Cookie Acceptance (stored but only executed after consent)

All code is placed inside the <head> element, before the closing </head> tag.

If both website-level and page-level code exist, both will be included on that page. They do not override each other.

Tips

  • Test before publishing. After adding custom code, open your page in an incognito/private browser window and use your browser's developer tools (right click > Inspect > Console) to verify scripts are loading correctly.
  • Use site-wide for global needs. If every page needs a script (analytics, fonts, chat widgets), put it in the site-wide field. Only use the page-level field for code that should run on a single page.
  • Be careful with JavaScript errors. A broken script in the Head HTML can affect page rendering. If something goes wrong, remove the code and the page will return to normal immediately.
  • Cookie consent compliance. If your organization needs to comply with GDPR or CCPA, enable the Cookie Consent Banner and place all tracking/advertising scripts in the "Scripts After Cookie Acceptance" field instead of the main Head HTML field.

Updated about 6 hours ago