This topic will walk you through how to create dynamic contracts for Ironclad Clickwrap. This topic is specific to the Classic Clickwrap Experience.
This topic is specific to the Classic Clickwrap Experience. If you are using the Classic Clickwrap Experience, refer to the New Experience Clickwrap documentation.
Dynamic Contracts are personalized contracts configured to hide or show certain sections, or render specific information, according to the needs of the signer. Dynamic contracts are built using tokens and conditional logic.
Tokens are placeholders in your contracts in which data will populate based on inputs that a signer makes or other triggers on the webpage where the corresponding group is embedded.
Conditional Logic refers to statements in your contract that trigger verbiage to either hide or show based on a token’s value.
Common examples of dynamic contracts include Order Forms or Partnership Agreements, where the majority of the content is standardized and non-negotiable, but some personalized information about the signer or the agreement’s context must be incorporated into the contract.
In these implementations, customers pass data from their own third-party systems, such as Salesforce or another CRM, into the dynamic contract to provide the signer with a self-service, yet personalized, version of their contract to accept.
Prepare Dynamic Contracts
We highly recommended preparing your dynamic contract in a Word document prior to creating it in Ironclad Clickwrap. Below are some best practices:
- In a the Word document, highlight the data points and verbiage that are dynamic and conditional. Additionally, note the conditions that trigger the datapoints and verbiage, where applicable.
- Assign a naming convention to the tokens and conditional logic, such as lowercase with underscores or camelcase. Then, add all of the tokens and conditional logic statements to an internal document or spreadsheet for record keeping.
- Share the above documents/spreadsheet with the development team that will embed the contract’s corresponding group.
- Once your Word document is ready, upload it to the Clickwrap platform as a new contract to begin creating tokens and conditional logic in the editor.
Create Tokens
- In the editor, type two curly brackets {{. This will present a modal to either select an existing token or create a new token. Click New Token to create a new token.
- Enter the token name and press [Enter] to create the token.
- The token displays in orange-highlighted text.
Create Simple Conditional Logic
The editor uses Handlebar Helpers to build conditional logic statements. The most common statements are variations of “if” and “unless” helpers, which are inverses of one another.
Every logic statement must have an “opening if” or “opening unless” to begin the statement and a “closing if” or “closing unless” to conclude the statement.
For example, the #if is referred to as the “opening if” and is written before the verbiage that is triggered by the given condition. The /if is referred to as the “closing if” and is written after the verbiage triggered by the given condition. Similarly, #unless is referred to as the “opening unless,” and /unless is referred to as the “closing unless.”
Below are the most common “if” and “unless” logic statements:
Scenario | Helper(s) | Logic Statement | Logic Statement in the Editor |
---|---|---|---|
Show verbiage if a token’s value is true or not null | if | {{#if token}}This verbiage shows if token is true or not null.{{/if}} | |
Show verbiage if a token’s value is false or null | unless | {{#unless token}}This verbiage shows if token is false or null.{{/if}} | |
Show verbiage if a token’s value matches a specific value | if, matchesValue | {{#if (matchesValue token ‘value1’)}}This verbiage shows if token has the exact value ‘value1’.{{/if}} | |
Show verbiage if a token’s value matches any one of a set of specific values | if, matchesValues | {{#if (matchesValues token ‘value1,value2’)}}This verbiage shows if token has the exact value ‘value1’ or ‘value2’.{{/if}} | |
Show verbiage if a token’s value does not match a specific value | unless, matchesValue | {{#unless (matchesValue token ‘value1’)}}This verbiage shows if token does not have the exact value ‘value1’.{{/if}} | |
Show verbiage if a token’s value does not match any one of a set of specific values | unless, matchesValues | {{#unless (matchesValues token ‘value1,value2’)}}This verbiage shows if token does not have the exact value ‘value1’ or ‘value2’.{{/if}} | |
Show verbiage if a token contains a specific value | if, contains | {{#if (contains token ‘value1’)}}This verbiage shows if token contains the value ‘value1’.{{/if}} | |
Show verbiage if a token contains specific values | if, contains | {{#if (contains token ‘value1,value2’)}}This verbiage shows if token contains the value ‘value1’ or ‘value2’.{{/if}} | |
Show verbiage if a token does not contain a specific value | unless, contains | {{#unless (contains token ‘value1’)}}This verbiage shows if token does not contain the value ‘value1’.{{/if}} | |
Show verbiage if a token does not contain specific values | unless, contains | {{#unless (contains token ‘value1,value2’)}}This verbiage shows if token does not contain the value ‘value1’ or ‘value2’.{{/if}} |
If you want to view additional conditional logic examples, refer to Create Advanced Conditional Logic.
Resolve Editor Parsing Errors
When conditional logic statements are written incorrectly, the editor will throw a parsing error at the top of the screen and block any changes from being saved.
To ensure the conditional logic statements are written correctly, regularly click the Save button at the top of the screen as you build your dynamic contract.
If you encounter parsing errors while writing conditional logic in the editor, follow the steps below to troubleshoot and resolve the error:
- Check your syntax:
- Ensure every “opening if” and “opening unless” has its corresponding “closing if” or “closing unless”.
- Ensure there are no missing or extra parentheses, quotations, or curly brackets in the statement.
- If you have sequential “if” and “unless” statements, ensure the “closing if” and “closing unless” are in the proper order (they should be in reverse order of the “opening if” and “opening unless”).
- Save to confirm the error no longer exists.
- Highlight the entire conditional logic statement (from “opening if” or “opening unless” to “closing if” or “closing unless”) and select your desired font size. Click Save to confirm the error no longer exists.
- Highlight the entire conditional logic statement (from “opening if” or “opening unless” to “closing if” or “closing unless”) and select the paragraph symbol > Normal. Click Save to confirm the error no longer exists.
- Rewrite the statement. Click Save to confirm the error no longer exists.
- If the error continues after following the steps above, reach out to Ironclad Support for further assistance and include:
- A summary of the updates made in the contract prior to seeing the error
- A screenshot of the error
- The affected Contract ID (found in the URL: app.pactsafe.com/contracts/contractid)
- The Site Name or Site ID where the contract lives (found in Settings > Site Settings)
Implement Dynamic Contracts
Group Styling
We highly recommend making the dynamic contract’s associated Group style scroll, so signers are able to view their personalized version of the contract.
If you choose the Checkbox or Combined style instead of Scroll, if a signer clicks the hyperlink to the contract, it will open the Legal Center by default. The Legal Center will not showcase the personalized version of the contract for the signer.
If you would like to use a Checkbox or Combined style for your group with a dynamic contract, reach out to Ironclad Support to enable the Dynamic Contract Download feature, which replaces the default Legal Center functionality by opening a PDF of the personalized version of the contract. This will enable a PDF download from embedded hyperlinks instead of a link to your Legal Center whenever dynamic=true or a filter is used in the Clickwrap implementation.
Development
The Developer responsible for implementing the Clickwrap in your environment will send render_data to the tokens in your contract to show the proper verbiage. Refer to the Developer Documentation and examples below for how to implement dynamic contracts:
Implementation Route | Documentation |
---|---|
JavaScript Library | Dynamically Render Contract Data |
React SDK | React SDK Props- dynamic and renderData |
Node.js SDK | Node.js SDK Load- render_data |
Angular SDK | Angular SDK PSClickwrapInputs - dynamic and renderData |
Java SDK | Java SDK Load - render_data |
iOS SDK | - |
Android SDK | - |
Activity API |
|
Refer to the links below for dynamic contract implementation examples: