Note: This article does include code snippets! Might be a good resource for a more technical reader.

Once you've created your Agreement Group inside of the PactSafe application, you're ready to publish and implement your Group on your website or app! The following article shows you how to drop your Group into any web page.

Publishing your Group

In order for your Group to load successfully on your website, you'll need to publish it (and also publish all the Agreements inside of it). Don't worry, it's as simple as pressing the big green button:

Once it's published, your green Publish button should be disabled and say "Published" like so:

Not seeing that? Make sure you're waiting patiently. Try clicking the "Publish" button again. Still now working? Get in touch!

Next, to the right you'll see a code snippet that you can copy and paste into the page where you're going to be loading this Group. In this case, our Agreement Group Key is ps-app-browsewrap. You can copy & paste the green text (as well as the default PactSafe snippet) to successfully load the Group onto your page. Need the default PactSafe snippet for your account? Get it here!

Implementing the Group

Requires minor HTML knowledge. On the web page that you want to display your Group, all you have to do is add the following snippet between the opening <head> and closing </head>:


(function(w,d,s,c,n,a,b){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)}, w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date(); a=d.createElement(s),b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;b.parentNode.insertBefore(a,b) })(window,document,'script','//','_ps');
_ps('create', 'YOUR_ACCESS_ID'); // find your Site access ID at
_ps('load', 'ps-app-browsewrap');


Finalizing for a Clickwrap

If you're using our Clickwrap implementation, there are two things you'll need to get your Group running automatically.

1. Set the Respondent ID Selector that matches your web form.

Make sure your web form has the right ID that matches what you've specified in the "Respondent ID Selector". Example: If you've set your Respondent ID Selector to email-address, then you're form should have the following field: <input type="email" id="email-address" name="email_address" placeholder=">.


2. Set the Container Selector to a <div> or <span> within your form (or add a new one).

Your form will also need a placeholder for where our library will inject the Group's content. Example: If your Container Selector is agreements, then you'll need to have something in your form like the following...


<div id="agreements"></div>


<span id="agreements"></span>


Then you're all done and you should be up and running! 

Finalizing for a Browsewrap

If you're implementing a Browsewrap Group, you are almost done! All you need to do is add a selector to the link to your legal terms. Example: If you're currently linking to a legal page on your website, all you need to do is add the Target Selector to your link. Your link might currently be: <a href="">Legal Terms</a>

If your Target Selector is footer-legal-terms, then the link would simply need to change to: <a id="footer-legal-terms" href="">Legal Terms</a>.

Pretty easy, eh?