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 the Group you want doesn't exist 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 of the Group that 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. Tip: 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 keep a record of the fact that the Group is working the way it should. It clarifies what the Contract that was presented to the Signer looked like at the time they signed it.

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 browsewrap, clickwrap, and sign-in wrap agreements. 

After you choose those options, the next part is 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 value, 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 value, then the Group can add a hidden input to the form that indicates if all Contracts have been accepted.
  
  

Filling out the information on this tab 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 values below.

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

• Display Contracts Immediately — If you toggle this switch on, the webpage shows all of the Contracts as soon as the Signer provides their Signer ID. If you toggle it off, the Contracts don't appear on the webpage until you use the displayRequired() method to show them.

• Display All Contracts — If you toggle this switch on, the webpage shows all of the Contracts. If you toggle it off, the webpage shows only the Contracts that the Signers hasn't accepted the latest version of.

• Force Scroll — If you toggle this switch on, Signers can't accept the Contract until they scroll to the end of it. If you toggle the switch off, Signers can accept the Contract at any time.

• Acceptance Language — Not a switch, for a change! You can customize the language that Signers see on the accept button by typing what you want them to see here. This value is optional.

• Confirm Email — If you toggle this switch on, PactSafe sends a confirmation email to the Senders after after they accept the Contracts.

• Notification Email — Another non-switch: 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 here.
  
  

Deeper Dive on Selectors (For the Techies)

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

Signer ID Selector

This is optional. The Signer ID Selector automatically listens to a field in the form where we're capturing your opt-in or purchase. 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="contracts"></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.

Container Selector

This 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 Container Selector can also be called as a part of_ps('load') so filling it in here is completely optional. 

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

More questions? Just open a chat window or email us at help@pactsafe.com.