Add scripts and chat widgets to your site

  • advanced
  • scripts
  • embeds
  • customizer
  • tracking
  • css

Updated

To add a chat widget, booking calendar, or other vendor script to every page, paste the code the vendor gave you into Appearance → Customize → Scripts & Embeds → Custom Embeds and click Publish. You don't edit any theme files.

If the vendor gave you an ID instead (a G-… Measurement ID, a GTM-… container, a pixel ID), don't use Custom Embeds. Put the ID in Analytics & Tracking. See Add tracking codes to your site.

Which box does my code go in?

Dirigible has three places for extra code. The wrong one can load a tag twice, skip the cookie banner, or put JavaScript where CSS belongs.

You have Put it here
A Google Analytics, Tag Manager, Meta Pixel, LinkedIn, StackAdapt, or Hotjar ID Appearance → Customize → Scripts & Embeds → Analytics & Tracking
A full script from a chat, scheduling, or other vendor with no ID field Scripts & Embeds → Custom Embeds (this guide)
CSS to change how something looks Appearance → Customize → Additional CSS
A Google Fonts or Adobe Fonts stylesheet Scripts & Embeds → Embed Fonts. See Using Google Fonts or Adobe Fonts
PHP Your child theme or Code Snippets

If the vendor gave you both an ID and a snippet, use the ID field and leave the snippet out. Dirigible loads the script for you.

When Google Tag Manager ID is filled in, only Tag Manager loads and the Google Analytics ID is ignored. Set up GA4 inside Tag Manager instead.

How do I add a script to every page?

  1. Go to Appearance → Customize → Scripts & Embeds → Custom Embeds.
  2. Paste the snippet into the field that matches where the vendor says it should go (see the next section). Include the <script> tags they sent.
  3. Click Publish.
  4. Check a live page, not the Customizer preview. The preview skips these snippets so they don't run twice while you edit.

Add one tool at a time so you can tell which snippet caused a problem.

Should it go in the head, body, or footer?

Follow the vendor's install note when they name a location. If they don't, use <footer> Embed for chat and scheduling widgets.

Field Where it loads Typical use
Tracking Embed Near the end of the page A pixel or tag with no ID field under Analytics & Tracking
<head> Embed The page head Snippets the vendor says must go in the head
<body> Embed Right after the page body opens Widgets that need to load early
<footer> Embed Near the end of the page Chat, scheduling, and other widgets that can load last

Each field is one box. You can paste more than one snippet into the same box if they belong in the same place. Leave a blank line between them.

Can I add a script to only one page?

Yes. Custom Embeds load on every page, including Landing Page campaign pages. For a widget that belongs on one page, paste it into a Custom HTML block on that page, and leave it out of Custom Embeds. Don't add the same tool in both places.

Do Custom Embeds wait for the cookie banner?

No. Custom Embeds load as pasted. They don't wait for Tracking Load Strategy (After Page Load / First Interaction) or for the GDPR cookie banner.

They also run while you're logged in. Track Admin Sessions only affects the ID fields, not these boxes.

That's why a service with an ID field should use that field: those IDs follow the banner and the load strategy.

Common mix-ups

  • Pasting a Tag Manager snippet into <head> Embed and also filling in Google Tag Manager ID. Pick one: the ID field.
  • Adding a chat widget site-wide in Custom Embeds and again in a page's Custom HTML block.
  • Pasting CSS wrapped in <style> tags into Custom Embeds. Put the CSS in Additional CSS without the tags. For one Section only, use Section block CSS.

Why isn't my script showing up?

  • Confirm you clicked Publish, then view the live site (a private window is fine). The Customizer preview won't show the widget.
  • Turn off any ad blocker for that tab. Many blockers hide chat and tracking scripts.
  • Look for a second copy of the same snippet in a Custom HTML block, and remove the duplicate.
  • If the vendor asked for the head and you used <footer> Embed, move it.
  • Still nothing? See Fix WordPress changes not showing on your site.

To remove a script, delete it from the box and click Publish.

Related guides

Built by Dirigible Studio. Get in touch