Virtual Groups

Virtual Groups in Ironclad Clickwrap are a powerful way to integrate Ironclad Clickwrap into your site and to—not only dynamically render information inside a contract—dynamically configure clickwrap presentation, filtering of contracts to show your Signer, and more.

Please note: Loading a group of Contracts in this manner will affect load times on the page and is not subject to normal Ironclad Clickwrap SLAs. If you'd like to optimize how your Contracts are loaded on the page, check out Loading a Clickwrap 101.

Here are some use cases where this can be used:

  • Dynamically rendering an Order Form based on the product being purchased
  • Changing the contract presented on checkout based on the products in the cart
  • Loading in contracts that need to be accepted based upon filtering criteria
  • You have a Group already but want to change what Contracts are presented for acceptance

Covered in this Guide

  • How to present multiple Contracts for acceptance in various forms
  • How to render Contracts as a clickwrap on your page with or without creating a Group in Ironclad Clickwrap's UI
  • Optional parameters that define how a Virtual Contract Group is configured

Getting started: Loading Contracts onto your page

When loading Contracts on your page, you'll need two things:

  1. A Published Contract
  2. A "style" in which your Contract should be presented to your user. See more on styles here.

To load a published Contract onto your page, you can use the same _ps('load') method you would use with your traditional JavaScript library:

<!-- JavaScript goes before </head> -->
<script>
  // JavaScript Snippet here
  // https://clickwrap-developer.ironcladapp.com/docs/setting-up-the-javascript-snippet
  _ps('create', '<SITE ACCESS ID>');

  // Notice a group key does not exist in the load call here.
  _ps('load', {
    // ID can be found in the URL when viewing the Contract in the web app
    filter: "id==12345", 
    style: "scroll",
    display_all: true,
    acceptance_language: "I do declare that {{contracts}} are enforceable",
    container_selector: "contracts",
    signer_id_selector: "email-address"
  });
</script>

<!-- Page HTML -->
<!-- ... -->
<div id="contracts"></div>
<input id="email-address" type="email" name="email_address" />

This should render a Contract on your page if you used the correct ID or referenced the proper case-sensitive Contract tags.

You can also reference an existing Group and augment specific parameters to customize the rendering of a Group of Contracts on your page. So if you have a group with a Group key of 'example-clickwrap', you can overwrite the parameters of that Group.

📘

Tips for Filtering

Filter methods include id, tags, classification, locales, and countries.

Other filtering methods:

  • "tags==tag1,tag2" will display all contracts with either tag1 or tag2
  • "tags==tag1 and tags==tag2" will display contracts with both tag1 and tag2