Skip to main content

Add custom CSS and scripts

Add custom CSS and scripts, such as Google Tag Manager, analytics, a chat widget or a cookie banner, in Customizations > CSS and JS.

M
Written by Mario Tarabbia

Customizations > CSS and JS adds your own code to your public directory: Custom scripts for tools such as Google Tag Manager, analytics, chat widgets and cookie banners, and Custom CSS for styling the sections you build with your own HTML. This article is for vendors and the developers who help them.

Who can do this: Admin role (Managers can view the page) · Availability: custom scripts on all directories; Custom CSS on the Growth and Enterprise plans and on older Free directories (Free - Legacy)

Add a custom script

A custom script is a <script> tag that PartnerPage adds to every page of your public directory. To add a custom script:

  1. In your directory's sidebar, click Customizations, then CSS and JS.

  2. In Custom scripts, click Add custom script.

  3. In Script type, choose JavaScript (text/javascript), or JSON-LD (application/ld+json) for structured data that search engines read.

  4. Under Select script source, choose one:

    • External script (reference a script from a URL), then paste the script's address (the src of the tool's snippet).

    • Inline script (embed script content directly), then paste the code, up to 5,000 characters. Paste only the code that sits between <script> and </script>, without the tags themselves.

    For JSON-LD, choose Inline JSON-LD (embed structured data directly) and paste the JSON: the directory doesn't load JSON-LD from an external address.

  5. If the tool's snippet has other attributes on its <script> tag, such as id or data-domain-script, click Add an attribute under Additional attributes for each one.

  6. Click Save.

You see "Custom script added", and the script appears in the list. To change a script, click Edit next to it. To delete a script, click the remove icon and confirm.

How custom scripts run

Custom scripts follow these rules on your public directory:

  • A directory can have up to 10 custom scripts. The card shows how many you have, such as 3/10.

  • Scripts load on any page of the directory a visitor opens, including partner profiles, forms and landing pages, and also when your directory is embedded on your website. They run once per page load, not again when the visitor moves to another page inside the directory.

  • JavaScript runs in the visitor's browser after the page loads, in the order of the list. Each external script finishes loading before the next one starts, so put a library above the code that uses it. Drag scripts to change their order.

  • JSON-LD scripts are part of the page itself, where search engines read them.

  • If one script fails to load, the others still run.

  • PartnerPage controls how scripts load, so it ignores these attributes: async, defer, crossorigin, integrity, nonce, referrerpolicy, fetchpriority, nomodule and charset.

Common uses for custom scripts

PartnerPage has no built-in Google Analytics or Google Tag Manager setting; you add them as custom scripts.

  • Google Tag Manager: add one Inline script with the JavaScript from the <script> part of Google Tag Manager's install snippet, without the tags. The snippet's <noscript> part can't be added. Then manage your other tags in Google Tag Manager.

  • Google Analytics (gtag.js): add two scripts, in this order: an External script with the address from the snippet's first tag (https://www.googletagmanager.com/gtag/js?id= followed by your measurement ID), then an Inline script with the configuration code from the second tag.

  • Chat and support widgets: add the provider's snippet the same way, as an external or inline script.

  • Cookie consent banners: put the consent scripts first in the list, so they run before your other tools. For OneTrust, follow How to Set Up a Cookie Consent Banner on Your Partner Directory with OneTrust.

  • Structured data: add a JSON-LD script, for example to describe your company to search engines.

Add custom CSS

Custom CSS styles the content of the Advanced ("Write your own code") sections you add in the Layout tab of Branding and layout, such as a custom hero or footer. PartnerPage keeps your CSS inside those sections, so it doesn't change the rest of the directory: partner cards, filters, profiles and forms keep the directory's own look. To change colors and fonts across the directory, use Brand color and, on the Growth and Enterprise plans, the Theme tab: see Brand your directory.

To add custom CSS:

  1. In Customizations > CSS and JS, type or paste your CSS in Custom CSS.

  2. Click Save.

You see "Changes saved". PartnerPage checks the CSS when you save: if it has a mistake, you see "The custom CSS is not valid" and nothing is saved until you fix it.

If you don't see the Custom CSS card, your directory's plan doesn't include it. You can check the plan in the Plan column of All directories; older Free - Legacy directories show as Free there.

What can go wrong

Custom code runs on your live directory, so test every change:

  • A script with an error, or one that changes the page, can hide or break parts of your directory, or slow it down. After adding a script, open your directory and check the pages it affects. If something breaks, edit or delete the script.

  • A script that loads before the library it needs fails. Check the order of the list.

  • An inline script that still contains <script> tags doesn't run. Remove the tags and save it again.

  • Tools that need a <noscript> tag or code at the start of the page <body> can't be added that way. Use the tool's JavaScript-only option if it has one.

Related:

Did this answer your question?