> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firsttouch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Website Visitors

> Install the FirstTouch website visitor tracking pixel and verify that it is live.

Install the FirstTouch tracking pixel on your website so FirstTouch can detect website visitor signals for your team.

The pixel setup guide lives in FirstTouch at [`https://app.firsttouch.ai/signals`](https://app.firsttouch.ai/signals). Open the relevant website visitor signal and use the right-side drawer to copy your team's tracking script.

<Note>
  Add the script once, in the `<head>` of every page you want to track.
</Note>

## Install The Tracking Pixel

<Steps>
  <Step title="Open Signals">
    In FirstTouch, go to [`https://app.firsttouch.ai/signals`](https://app.firsttouch.ai/signals).
  </Step>

  <Step title="Open the pixel setup drawer">
    Select the website visitor signal, then open the right-side setup drawer.
  </Step>

  <Step title="Copy the tracking script">
    In the drawer, click **Copy** in the **Copy the tracking script** section.
  </Step>

  <Step title="Add the script to your website header">
    Paste the script into the global `<head>` or header code area for your website platform.
  </Step>

  <Step title="Publish your website changes">
    Publish the change so the script is live on your public website. Saving a draft is not enough.
  </Step>

  <Step title="Verify in FirstTouch">
    Return to the setup drawer and click **Check now** to verify that FirstTouch can detect the pixel.
  </Step>
</Steps>

## What The Script Looks Like

Copy the exact script from your FirstTouch workspace. It includes your team's unique identifier.

```html theme={null}
<script>
  // FirstTouch tracking script
  (function () {
    var el = document.createElement('script');
    el.id = 'first-touch-script';
    el.src = 'https://app.firsttouch.ai/first-touch-web-visitors.js?id=YOUR_TEAM_ID';
    el.async = true;
    document.head.appendChild(el);
  })();
</script>
```

<Warning>
  Do not copy the placeholder example above. Use the script copied from the FirstTouch setup drawer so the tracking ID is correct for your team.
</Warning>

## Platform Setup Notes

Use the guide that matches where your website is managed. The exact menu labels can change by platform, but the goal is always the same: install the FirstTouch script once in a global header or site-wide custom code area, publish the change, then verify it in FirstTouch.

### Manual HTML Or Code-Based Website

Use this option if you or your developer can edit the website files directly.

1. Open the shared layout, global HTML template, or header file for your site. Common files include `header.php`, `index.html`, `index.php`, or a framework layout file.
2. Find the closing `</head>` tag.
3. Paste the FirstTouch script immediately before `</head>`.
4. Save the file and deploy the change to production.
5. Open your live website and verify the pixel in FirstTouch.

<Warning>
  Do not paste the script inside another `<script>` tag, and do not install it more than once on the same page.
</Warning>

### Webflow

1. Open **Site Settings > Custom Code**.
2. Paste the FirstTouch script into **Head Code**.
3. Click **Save**.
4. Click **Publish** and publish to the live domain.

<Note>
  Webflow requires a paid site plan to add custom code.
</Note>

### Google Tag Manager

1. Open **Tags > New > Custom HTML**.
2. Paste the FirstTouch script.
3. Set the trigger to **All Pages - Page View**.
4. Click **Save**.
5. Click **Submit > Publish**.

<Warning>
  The tag is not live until the container is published. If your site uses a cookie consent tool, configure the FirstTouch tag to fire only after the required consent is granted.
</Warning>

### WordPress

The safest WordPress option is usually a header injection plugin because it keeps the script separate from theme files.

1. Install a header code plugin such as **WPCode** or **Head, Footer and Post Injections**.
2. Open the plugin's header or site-wide code settings.
3. Paste the FirstTouch script into the **Header**, **Head**, or **Scripts in header** box.
4. Make sure the code is enabled for every page.
5. Click **Save Changes**.
6. Clear any WordPress, hosting, or CDN cache.

<Tip>
  If your WordPress site uses Elementor, Divi, or another builder, you can add the script in the builder's custom code area instead. Make sure it loads in the page head on all pages.
</Tip>

#### WordPress Theme File Editor

Only use this option if you are comfortable editing theme files.

1. In WordPress, open **Appearance > Theme File Editor**.
2. Select `header.php` from the theme files.
3. Paste the FirstTouch script immediately before the closing `</head>` tag.
4. Click **Update File**.
5. Clear caches and check the live site.

<Warning>
  Theme updates can overwrite direct theme file edits. Prefer a header code plugin when possible.
</Warning>

#### WordPress With Elementor

1. Open the Elementor header template or site-wide custom code area.
2. Add an **HTML** widget or custom code entry in the header.
3. Paste the complete FirstTouch script, including the opening and closing `<script>` tags.
4. Save or publish the template.
5. Clear caches and verify the live site in FirstTouch.

### Wix

1. Open your Wix site dashboard.
2. Go to **Settings > Custom Code**.
3. Click **Add Custom Code**.
4. Paste the FirstTouch script into the code box.
5. Name it **FirstTouch Tracking Script**.
6. Set **Add Code to Pages** to **All pages**.
7. Set it to load on each new page.
8. Set **Place Code in** to **Head**.
9. Click **Apply** and publish the site.

### HubSpot CMS

1. In HubSpot, click the settings icon.
2. Go to **Content > Pages**.
3. Use **Choose a domain to edit its settings** and select the relevant domain, or choose the default settings for all domains.
4. In **Site Header HTML**, click **Override default settings** if needed.
5. Paste the FirstTouch script into the header HTML field.
6. Click **Save**.

### Squarespace

1. Log in to Squarespace and open the site.
2. Go to **Website > Pages**.
3. Open **Custom Code** or **Code Injection**.
4. Paste the FirstTouch script into the **Header** field.
5. Click **Save**.
6. Visit the live site and verify the pixel in FirstTouch.

### Framer

1. Open your Framer project.
2. Open **Settings**.
3. Go to the **General** tab.
4. Find **Custom Code**.
5. Paste the FirstTouch script into the field for code in the `<head>` tag.
6. Save the settings.
7. Publish the site.

<Note>
  Some Framer sites behave like single-page apps. After publishing, navigate between pages and confirm FirstTouch can still detect visits beyond the first page load.
</Note>

### Shopify

1. In Shopify admin, go to **Online Store > Themes**.
2. Open the actions menu for the active theme and select **Edit code**.
3. Open the main layout file, commonly `theme.liquid`.
4. Paste the FirstTouch script immediately before the closing `</head>` tag.
5. Click **Save**.
6. Preview the store, then verify the pixel on the live storefront.

### Tilda

1. Open the page editor.
2. Open the blocks library.
3. Add the **T123 Embed HTML code** block.
4. Paste the FirstTouch script into the block.
5. Save and publish the page.

<Note>
  If Tilda does not apply the block globally, repeat the setup on every page you want FirstTouch to track.
</Note>

### Next.js

For Next.js, install the script in the root layout so it loads for the whole app.

1. Copy the FirstTouch script from the setup drawer.
2. Add it to the root layout using Next.js script handling, or add the external script URL with your team's tracking ID.
3. If your app uses client-side routing, confirm that FirstTouch records navigation after route changes, not only the first page load.
4. Deploy the app and verify the live domain in FirstTouch.

<Tip>
  If you are unsure whether your app uses the App Router or Pages Router, ask your developer to place the FirstTouch script in the shared root layout or app shell that runs on every page.
</Tip>

### React

For a React single-page app, install FirstTouch in the top-level app shell.

1. Copy the FirstTouch script from the setup drawer.
2. Add it to your root HTML file, such as `public/index.html`, immediately before `</head>`.
3. If your app does not use a static HTML template, load the script from the top-level component when the app starts.
4. Navigate between routes and confirm FirstTouch detects visits after client-side route changes.
5. Deploy the app and verify in FirstTouch.

### TypeScript

For TypeScript projects, the preferred approach is still to paste the exact FirstTouch script into the global HTML head or framework layout.

1. Copy the exact script from FirstTouch.
2. Add it to the global HTML template, root layout, or a dedicated script loader.
3. If you convert the script into TypeScript, keep the tracking ID and script source exactly the same as the copied FirstTouch snippet.
4. Compile and deploy the project.
5. Verify the live site in FirstTouch.

### Angular

For Angular apps, load FirstTouch from the app shell so it is available across routes.

1. Copy the FirstTouch script from the setup drawer.
2. Add it to `src/index.html` before `</head>`, or create an Angular service that loads the script once when the root component starts.
3. If you use a service, call it from `AppComponent` so it runs for the whole application.
4. Navigate between Angular routes and confirm FirstTouch continues detecting visits.
5. Build, deploy, and verify the live site in FirstTouch.

## Installation Checks

* Confirm the script appears once on the live page.
* Confirm the published page source includes `first-touch-web-visitors.js`.
* Clear website, plugin, CDN, and browser caches after installing.
* If you use a cookie consent platform, make sure it allows the FirstTouch script to run after the required consent is granted.
* If your site has a Content Security Policy, allow scripts from `https://app.firsttouch.ai`.
* Re-check the pixel after major CMS, theme, tag manager, or deployment changes.

## Ask An AI Or Developer To Install It

If someone else manages your website, send them the script from the FirstTouch drawer with this prompt:

```text theme={null}
Add the following FirstTouch tracking script so it loads in the <head> of every page of my website. My site is built on [Webflow / WordPress / Google Tag Manager / other]. Give me exact click-by-click steps for my setup, and make sure the change is published and live, not just saved.

[paste FirstTouch tracking script]
```

## Troubleshooting

* If verification fails, confirm the published page source includes `first-touch-web-visitors.js`.
* If you installed through Google Tag Manager, confirm the container version was published.
* If you installed through Webflow, confirm you published the site after saving custom code.
* If your site has a strict Content Security Policy, allow scripts from `https://app.firsttouch.ai`.
* If the script only exists on one landing page, FirstTouch can only detect visits to pages where the script loads.
