4 steps to setup PactSafe

Now that you’ve logged into PactSafe, there are 5 simple steps to start tracking your legal agreements:

  1. Create your contract(s).

  2. Design & setup your group.

  3. Publish your agreement first, then your group

  4. Copy & paste the PactSafe code for your group onto your website or app.


Follow the simple steps below to start tracking your digital agreements today!


1. Create your agreement(s)


What is an agreement? An Agreement in PactSafe is a contract you’d like your customers to agree to when they purchase your product, sign up for your service, or become an employee. Typically an attorney will insert this content into PactSafe and manage all changes and versions over time.


To get your agreement into PactSafe, you’ll need to click the “+” sign in the very upper right of you screen. From there, getting your first draft saved is easy, as shown in this 90 second video:




2. Design and setup your group

In this example, we're going to be implementing a clickwrap agreement out of the box for a website registration form as demonstrated hereA “group” inside of PactSafe is a set of agreements you group together to present to your customer on your website in a form like this:



Check out this video to get a quick look at how to create your agreement group, give it a name, add your agreement to it, and save it:




There are a few options to help you load your legal agreements into your page. These options are configurable through the user interface. Here are the most important ones:


Key

The key is what you will use to programmatically load your group onto your web page. It’s automatically named by our system, but you can change the name if you like.


Style

Style determines how the agreements will render if you choose to use the PactSafe library to render your agreements. You can also render the agreements on the page and simply send the “agreed” status programmatically.


Respondent ID Selector

Optional, Requires HTML knowledge. In your form where we’re capturing your opt in or purchase, the Respondent ID Selector automatically listens to a form field with the CSS ID of your specifying.


An example form for sign up might look like this:

 

<form action="..." method="post" id="form1" class="form">
	<div>
		<label for="first-name">First name:</label>
		<input type="text" name="first_name" id="first-name" />
	</div>
	<div>
		<label for="email-address">Email Address:</label>
		<input type="email" name="email" id="ps-login-email" />
	</div>
	<p>By clicking "Submit", you agree to the <a href="#">Terms and Conditions</a>.</p>
	<div id="agreements"></div>
	<p><input type="submit" value="Submit" /></p>
</form>

 

The Respondent ID Selector of this form would be ps-login-email.


Agreements Container Selector

Optional, Requires HTML knowledge. If you’d like PactSafe to render the agreements in your form automagically, you can create a <div></div> with a CSS ID that the library will listen for in order to inject the published agreements. The agreements will load based upon the Style you’ve configured for your group.


Note: The Agreements Container Selector can also be called as a part of _ps('load')so is completely optional. We’ll be enhancing this functionality with a more visual interface soon.


Hint: Want to know how to customize the style for your agreement? We're working on it! Coming soon: a guide with the default CSS classes of the PactSafe library.


3. Publish your agreement(s) first, then your group


In order for your code snippet to load properly, you must publish both your agreements and your agreement group. For a quick video on how to publish these, check out the below:



Get an error? Group didn’t publish? Submit a ticket with us.


4. Copy & paste the PactSafe code onto your website or app


Once your group has successfully published, you’ll need to grab the snippet for your Group. Each group you want to load on your page will need to be called by key. For more options on how to customize the PactSafe library for your own use, check out our detailed documentation.


Add the Global PactSafe snippet to your website

 

To get your account properly setup, you must first add the PactSafe snippet to your website (at a minimum on the pages you’d like to track). All you have to do is copy and paste and replace XXXX-XXXXXXXXX with your own Site Access ID which can be found here.

   

<script>
(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','//vault.pactsafe.io/ps.min.js','_ps');
_ps('create', 'XXXX-XXXXXXXXX');
</script>

   


Now, you simply load your group within the same page:

  

<script>
_ps('load', 'click-through-agreement');
</script>

  

If you’re loading our agreements (and checkboxes) onto your page, you’ll need to also make sure you have created the <div> for your agreements to be loaded into like so:

  

<script>
(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].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-vault.s3.amazonaws.com/ps.min.js','_ps');
_ps('create', 'XXXX-XXXXXXXX');
_ps('load', 'click-through-agreement');
</script>
</head>
<body>
 <form action="..." method="post" id="form1" class="form">
  <div>
   <label for="email-address">Email Address:</label>
   <input type="email" name="email" id="ps-login-email" />
  </div>
  <div id="agreements"></div>
  <p><input type="submit" value="Submit" /></p>
 </form>
</body>

  

Notice we’re using the Agreements Container Selector agreements to load our agreements onto the page.


Note: To learn how to customize the flow of your legal agreement acceptance, check out our Developer Guide for the PactSafe Javascript Library.


Wow! You should be up and running. Now, you’ve saved yourself a bunch of time whenever you want to update your agreements or see who agreed to what! Awesome.