PactSafe has a dedicated section of our application for you to manage Groups. To get there, click the Groups icon in the navigation panel on the left:


From here you can do things with Groups you made previously:

  • Edit the Group by clicking the Edit button.
  • Publish the Group (if it's not already published) by clicking the Publish button.
  • View a list of the Signers of the Contracts in this Group by hovering over the ... button and choosing View Signers.
  • View a list of the signing activity on the Contracts in this Group by hovering over the ... button and choosing View Activity


Tip: Once you have a lot of Groups, you can use the magnifying glass and Sort icons in the upper right corner to help you find a Group you're looking for.


But what if you don't have any Groups yet? You can click the + icon in the lower right corner to create a Group.


Creating a Group

After you click the + icon on the Groups page, PactSafe shows you a new screen with four tabs:

  • Overview
  • Contracts
  • Screenshots
  • Settings

The Settings tab is the one you see by default when you first create your Group, but we'll talk about the tabs in order! No matter which tab you're looking at, you'll see the Save and Publish buttons in the upper right corner.


Overview

The Overview tab is where you can set overview information for the Group:

  • Name—The name you see when you're working PactSafe, so you can find the Group again when you need to look at it later.
  • Key—The unique identifier that webpage code uses to retrieve the right Group. The system automatically assigns a Key to the Group, but you can change Key value if you want. The code snippet that loads a Group onto your webpage looks like this: _ps('load', '<GROUP-KEY>');
  • Description—Optional additional information you use to identify the Group when you're working in PactSafe.


This tab is also where you see the current publication Status of the Group, when it was Last Published, when it was Created, and when it was last Updated.


Contracts

The Contracts tab is where you put Contracts into the Group. Click the Add Contracts button to add a new Contract. Once a Contract is in the Group, you can:

  • Click it to view the details. 
  • Hover over it and click the trash can icon to remove it from the Group. Removing a Contract from the Group does NOT delete the Contract from your account.
  • Hover over it, click the Drag Contract icon, and drag the Contract to a different position in the Group. The position in the Group controls the order that the Contracts appear in on the webpage.


Note: The only Contracts you can add to Groups are those that are Public (a toggle in the Contract's properties) and Published. If a Contract isn't Public and Published, it doesn't appear as an option to add to your Group.


Screenshots

The Screenshots tab is where you can upload screenshots of what a Group placement looks like on your webpage. The screenshots help your team make sure the Group is working the way you want it to by clarifying what the Contract that was presented to the user looked like.


You click Upload a Screenshot and the Upload a File window appears where you can navigate your computer's file system and choose the screenshot file you want to upload. Once you have uploaded the Screenshot, you can click the pencil icon to set the Effective Date and time of the Screenshot. 


Settings

The Settings tab is where the action happens. Here is where you choose:

  • Type—Pick Clickwrap or Browsewrap. If Hosted Forms are enabled in your account, you can also choose Hosted Form here.
  • Style—Style determines how the Contracts render if you choose to use the PactSafe library to render your Contracts. You can also render the Contracts on the page using your own code and simply send the "agreed" status to PactSafe programmatically. To learn more about each Style, check out this article about Groups,


After you choose those options, the next few fields are where you enter the IDs of the elements you want to use with the Group:

  • Container Selector—The ID of the HTML element that the Contracts' HTML should be injected in to. The element must exist on the webpage in order for this to work.
  • Signer ID Selector—The ID or name of the HTML input that will contain the Signer ID value. If you fill in this field, then the Group can update the Signer's information in the system any time the Signer changes it.
  • Form Selector—The ID of the HTML form where this Group is implemented. If you fill in this field, then the Group can add a hidden input to the form that indicates if all Contracts have been accepted.

Filling out the information in these fields takes some knowledge of HTML in general, as well as familiarity with the specific HTML on the webpage where you're putting the Group. We've got some more in-depth information about a couple of these fields below. 


Last on the Settings tab is a set of toggles that you can turn on (toggle turns blue) or off (toggle turns gray).

  • Display Contracts Immediately—If you turn this toggle on, the webpage shows all of the Contracts as soon as the Signer provides their Signer ID. If you turn it off, the Contracts don't appear on the webpage until you use the displayRequired() method to show them.
  • Display All Contracts—If you turn this toggle on, the webpage shows all of the Contracts. If you turn it off, the webpage shows only the Contracts that the Signers hasn't accepted the latest version of.
  • Force Scroll—If you turn this toggle on, Signers can't accept the Contract until they scroll to the end of it. If you turn the toggle off, Signers can accept the Contract at any time. 
  • Acceptance Language—Not a toggle, but a field that appears among the toggles! You can customize the language that Signers see on the accept button by typing in this field what you want them to see. This field is optional.
  • Confirm Email—If you turn this toggle on, PactSafe sends a confirmation email to the Senders after after they accept the Contracts.
  • Notification Email—Another non-toggle: If you want someone at your company to receive a notification whenever a Signer accepts Contracts in this Group, enter that person's email address in this field. 


Selector Fields (For the Techies)

Here's a little more in-depth information about a couple of the Selector fields. You need HTML knowledge to use the information in this section.


Signer ID Selector

This field is optional. The Respondent ID Selector automatically listens to a field in the form where we're capturing your opt-in or purchase. In this field, enter the CSS ID of the field you want it to listen to.


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>

 

In this example, the Signer ID Selector of this form would be ps-login-email, so that is what you would enter in the Signer ID Selector field.


Contracts Container Selector

This field is optional. If you’d like PactSafe to render the Contracts in your form automagically, you can create a <div></div> with a CSS ID that the library listens for in order to inject the published Contracts. The Contracts will load based upon the Style you’ve configured for your Group.


Note: The Contracts Container Selector can also be called as a part of_ps('load')so filling in this field 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.


More questions? Just  submit a ticket or email us at help@pactsafe.com.