# Installing the Freshpaint Javascript SDK

Installing the Freshpaint Javascript SDK to the production website has to be done by an engineer. It usually takes about five minutes to install. For deploying to production you should [invite a technical teammate](https://documentation.freshpaint.io/admin-panel/teams) to your account and have them install Freshpaint. Once installed (either locally or on production), a non-technical user can use Autotrack within the [Web source ](https://documentation.freshpaint.io/integrations/sources/web)to control and manage data without assistance from a technical user.

### Installing the Freshpaint SDK Directly Onto Your Site

To install Freshpaint, go to the [sources page](https://app.freshpaint.io/sources) in Freshpaint:&#x20;

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FxX3s2uxJJ7dolHusgn53%2Fsetup-screen.png?alt=media&#x26;token=f060f9f9-d738-443e-8378-b6ea41c21c62" alt=""><figcaption></figcaption></figure>

From the sources page click on **configure** next to the [Web source](https://documentation.freshpaint.io/integrations/sources/web). This will pull up the code for the Freshpaint SDK:&#x20;

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FWcpaaJhJk7uMYWlesDAY%2Fimage.png?alt=media&#x26;token=6b7a1506-1135-4243-85a5-6f2b856f611f" alt=""><figcaption></figcaption></figure>

Copy the snippet into the `<head>` of your site. That's it!

{% hint style="info" %}
If your application uses [Next.js](https://nextjs.org/docs/basic-features/script), you will need to add an **id** attribute to the script tag of the Autotrack snippet, such as \<script type="text/javascript" **id="freshpaint-script"**>.
{% endhint %}

### Installing the Freshpaint SDK via Google Tag Manager (GTM)

1. In your GTM Workspace, create a new tag using the **Custom HTML** tag type.
2. Next, copy and paste the snippet in the `HTML` field and set the firing trigger to `Initialization - All Pages`.
3. Save and test, using GTM's Preview Mode

### Installing the Freshpaint SDK via Adobe Launch

1. Create a new rule, and name the rule according to your existing rule naming convention, if any. Ex: "Freshpaint SDK - Production"
2. Add an event
   1. Extension: Core
   2. Event Type: Library Loaded (Page Top)
   3. Add additional conditions if you do not want the Freshpaint SDK to fire on all

      pages/URLs. For example, ensuring the HTML code only fires for its intended

      environment
3. Add an action
   1. Extension: Core
   2. Action Type: Custom Code
   3. Language: HTML
   4. Code: add your Freshpaint SDK snippet
4. Save and test
   1. Save the library and build it in the environment you use for testing
   2. Confirm Freshpaint is firing by opening the Console of your browser’s developer tools and typing `freshpaint`. Check that the object returns an array similar to the screenshot below:

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FO4bjMNONes3pcpkDEe7M%2FScreenshot%202025-07-09%20at%208.46.21%E2%80%AFAM.png?alt=media&#x26;token=57d39306-a1e8-44fd-8108-5c7d0cd2bb87" alt=""><figcaption></figcaption></figure>

## Verifying the Installation

To verify that Freshpaint is installed correctly, navigate to the Freshpaint [Live View](https://app.freshpaint.io/events/liveview). Live View will now provide a live feed of every user action performed on your site. If you navigate to your site in another tab and click around, you should see the actions you're performing show up in the liveview:

![](https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA7aDqsXMFbUsWVqonF%2F-MAS1bckP6g2w1m171XQ%2F-MAS2dbpTH8VZ_zDrKCy%2FScreenshot%20from%202020-06-22%2012-21-50.png?alt=media\&token=9429b034-f881-4e69-9efc-647788b31824)

Once you see data coming through, you have successfully installed Freshpaint.

{% hint style="info" %}
Once you have the [Web source](https://documentation.freshpaint.io/integrations/sources/web) installed on your site, [Autotrack](https://documentation.freshpaint.io/integrations/sources/web/javascript) will automatically be implemented. You will also have access to [Precision Tracking](https://documentation.freshpaint.io/integrations/sources/web/precision-tracking) if you choose to manually track your events.
{% endhint %}

## User Identification

Once you have confirmed that Freshpaint is successfully installed, you should [identify your users](https://documentation.freshpaint.io/readme/setting-up-identify). This is how you send information to Freshpaint and your destinations about who your users are.
