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 has two places for custom code, such as tracking pixels, analytics scripts, custom fonts, and meta tags. Both place the code inside the <head> element of your pages.
Site-wide Head HTML (Website Level)
Code added at the website level goes on every page of the website.
How to add it:
- Click Pages in the sidebar. If you have more than one website, click All Websites and pick the website.
- Click the Settings tab
- Scroll down to Site-wide HTML Head Content
- Paste your code into the text area
- Click Save Settings
Common uses are analytics scripts, the Meta Pixel, Google Tag Manager, custom fonts, site-wide meta tags, and chat widgets.
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">Scripts After Cookie Acceptance
When you check 'Show Cookie Consent Banner', the 'Scripts After Cookie Acceptance' field shows below it. Code placed here runs only after a visitor clicks 'Accept all' on the banner, or accepts analytics cookies through 'Let me choose'.
How to add it:
- In your Website Settings tab, enable Show Cookie Consent Banner
- Paste tracking scripts that require consent into the Scripts After Cookie Acceptance field
- Click Save Settings
With the banner on, only this field and the 'Google Analytics' field wait for consent. Other head code runs when the page loads.
Your organization is responsible for following the laws that apply to cookies and visitor privacy on its website. Solidarity Tech does not give legal advice.
Page-level Head HTML
Code added at the page level loads on that page and on its '/thanks' follow up page.
How to add it:
- Navigate to your page in the dashboard
- On the page's Details tab, open Page Settings. Scroll to Customizations.
- Paste your code into the Head HTML field
- Click Save Page Details
Common uses are a conversion tracking pixel on one donation or signup page, page-specific meta tags, and custom CSS for one page in <style> tags. Page-level Head HTML also supports Liquid template syntax, so you can use dynamic variables in your code.
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 a private browser window. Use your browser's developer tools (right click > Inspect > Console) to check that scripts load.
- 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.
Updated 9 days ago
