Skip to main content

Add the agent

Next, you'll need to add the agent to your form. You can choose from 2 implementation options. One is a convenience method that will generate a probe_id and insert it into a hidden form field automatically. This is the best option most of the time.

The second option gives you access to the probe result object directly. Use this option if you want to use the probe_id in your own script or your front-end framework.

Option 1​

Include the agent script in the <head> section of your form:

<script src="https://app.hitprobe.com/p/v1.js" async defer></script>

Then, create a hidden form field that will hold the probe_id generated by the agent. It can have any name but we'll call it probe_id here. It must have a data-hp-site-key attribute with your site key:

<input type="hidden" name="probe_id" data-hp-site-key="<INSERT_SITE_KEY>">

The agent will detect this form field on load and automatically insert the probe_id as soon as it's ready.

When you receive the form on the server, you should look for the probe_id and have it ready to use in the server-side API call that we'll look at next.

Option 2​

For using Hitprobe's probe_id within your front-end scripts, you can initiate the Hitprobe SDK directly and receive a result object:

<script src="https://app.hitprobe.com/p/v1.js"></script>
<script>
    hprobe({
        siteKey: "<INSERT_SITE_KEY>"
    }).then((result) => {
        console.log(result);
    });
</script>

You can then transfer the probe_id to your server however you prefer in order to use it in a Hitprobe event.

Content Security Policies (CSPs)​

If your site declares a CSP (Content Security Policy), you will need to add Hitprobe's domains to your policy.

DirectiveAdd the domain
script-src*.hitprobe.com, *.hitprobe.net
connect-src*.hitprobe.com, *.hitprobe.net

This allows your page to load the agent from app.hitprobe.com, and then reach Hitprobe's platform from within the script.