Adding third-party code to your site

This article details where third-party code from an outside service belongs in Finalsite Composer, including the External Assets field for code that loads in the head section of every page and the Embed element for code that runs on a single page. Vendors describe this code as a helper script, helper code, install code, integration code, tracking code, tracking pixel, verification meta tag, or JavaScript snippet; every one of them follows the same sitewide or single-page placement rule.

In this article

• What the code is called
• Find and copy the code
• Choose where the code goes
  • Add code to the head section of every page
  • Add code to the head section of one page
  • Add code before the closing body tag on one page
  • Add code after the opening body tag on every page
  • Add code before the closing body tag on every page
• Add code to the External Assets field
• Find the placement for a specific service
• Troubleshoot code that is not working

What the code is called

Outside services rarely use the same name for the small block of code they provide at setup. DocAccess calls it a helper script. Google Search Console calls it an HTML tag. Meta calls it base code. Finalsite Ask AI calls it a JavaScript snippet. Other common names include install code, integration code, embed code, tracking code, tracking pixel, and container snippet.

All of these describe the same thing: a few lines of HTML or JavaScript, supplied by the service, that tell a browser to load something from that service. The name on the service's page does not change where the code belongs in Composer.

Tracking codes, sometimes called tracking pixels, are the most common example. Services such as Meta and HubSpot use them to report how visitors move through a site, which helps shape future content.

Find and copy the code

Start at the service or platform that supplies the code. Most have a dedicated setup page that generates a unique snippet and offers a copy button. Copy the snippet, then follow the placement instructions below. The service almost always states exactly where the code belongs; follow that guidance and use this article to find the matching field in Composer.

Choose where the code goes

Add code to the head section of every page

Paste the code into the External Assets field on the theme, under Composer, Themes. Code added there loads in the head section of every page using that theme. This covers most vendor scripts, verification meta tags, and analytics tags. See Add code to the External Assets field for the full procedure.

Add code to the head section of one page

Use Page Settings on the individual page. This also works for a small group of specific pages by repeating the steps on each one. The video below demonstrates both single-page placements.

• Step 1: Open the page that needs the code.
• Step 2: Click the Page Settings gear in the bottom right corner of the page.
• Step 3: Go to the SEO tab and paste the code into the Custom head Content area.

See Page settings for the full field list.

Add code before the closing body tag on one page

Add an Embed element at the bottom of the page and paste the code into the element settings.

Add code after the opening body tag on every page

Use the site's default header banner. The video below demonstrates the sitewide placements.

• Step 1: Navigate to the Banners section of the site in Composer.
• Step 2: Choose the default header. If the site has multiple top banners, the code must be added to all of them. To limit the code to one page instead, clone or modify the banner used on that page.
• Step 3: Add an Embed element to the header and paste the code into it.

Add code before the closing body tag on every page

Use the site's default footer banner.

• Step 1: Navigate to the Banners section of the site in Composer.
• Step 2: Choose the default footer. If the site has multiple bottom banners, the code must be added to all of them.
• Step 3: Add an Embed element to the footer, paste the code into it, and turn the element title off.

Add code to the External Assets field

• Step 1: Copy the code from the service. Most services provide a copy button.
• Step 2: In Composer, open the Themes tab in the left navigation and click the theme the site uses.
• Step 3: Scroll to the External Assets box. Drag the handle in the bottom right corner to expand the box if the contents are hard to read.
• Step 4: Click at the very beginning of the first line already in the box, paste the code, then press Enter so the existing entries move down to their own line. New code always goes above existing code. If the box is empty, simply paste.
• Step 5: Click Update in the bottom right corner.
• Step 6: Publish the homepage so the new code reaches the live site.
• Step 7: Repeat steps 2 through 6 for every additional theme the site uses.

⚠️ Important Note

• Add new code above any existing code. Place the cursor at the very top of the box and paste there, so the existing entries move down.

• Never delete or edit existing entries. Other tools on the site depend on them. Removing a line that another service relies on takes that service offline.
• Adding code here cannot break the page design. External Assets writes to the head section only. It does not touch page content, layout, or the protected theme design files. Deleting the added line and clicking Update restores the previous state.
• External Assets is set per theme. Code added to one theme does not run on pages using a different theme.
• A grayed-out field means access has not been granted. Refresh the page first. Access is granted by the implementation team at launch. If the field is still grayed out, contact the Project Management Team.
• The SSR Assets field directly below is a different field. Third-party code does not go there.

Find the placement for a specific service

The table below lists services Finalsite clients add most often, the name each service uses for its code, and where that code belongs in Composer. A service that is not listed still follows the same rule: sitewide and head means External Assets.

Troubleshoot code that is not working

• The service still reports the code as missing. Confirm that Update was clicked, then publish the homepage. Code in External Assets does not reach the live site until the homepage is published.
• The code works on some pages but not others. Those pages use a different theme. Add the code to every theme in use.
• The code works on one domain but not another. Each domain in a district site has its own themes. Repeat the steps for every domain that needs the code.
• Checking on the deployment domain instead of the live domain. Verify the live site address, not the deployment address.
• Another service stopped working after the change. An existing entry was most likely overwritten. Contact Finalsite Support with the name of the service whose code went missing.
• The service requires a content security policy change. Some services, including DocAccess, ask for their domain to be allowed in a content security policy. Submit a request to Finalsite Support with the service name and the domains it needs.
• The External Assets field is grayed out. Refresh the page. If it remains grayed out, contact the Project Management Team.

Related articles

• Composer Themes overview
• Configure Google Search Console
• Implement Google Tag Manager in Composer
• Embed element
• Page settings
• Manage website cookies and privacy compliance