How to Implement valtt.js

Valtt Developer Documentation

Search…

Valtt Developer Documentation

Welcome

valtt.com

dashboard.valtt.com

valtt.js / Website Code

How to Implement valtt.js

How to Add Multiple Clickwraps on the Same Page

Valtt API

How to Implement valtt.js

Below you will find the details of the code to implement Valtt on your website using our valtt.js code snippet.
<!-- VALTT CODE START -->
<!-- START Required One Time -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://app.valtt.com/v1.2/valtt.js"></script>
<input type="hidden" id="valtt-unique-user-id" value="">
<!-- END Required One Time -->
<div id="valtt-clickwrap1"></div>
<script>
  valtt1 = new valtt(
    'Environment',
    'Organization-ID',
    'Agreement-ID',
    'AgreementName',
    'AgreementVersion',
    'AgreementStatement',
    'AgreementCompleteText',
    'valtt-clickwrap1',
    'Text-Class',
    'Button-Class',
    'Link-Class',
    'Callback-Element',
    'Clickwrap-Number',
    'Show-Agreement-Text',
    'Agreement-Text-Rows',
    'Agreement-Text-Cols',
    'Agreement-Text-CSS');
</script>
<div id="valtt-error-message-c1" class="small"></div>
<input type="hidden" id="Callback-Element" value="n" class="Callback-Element">
<!-- VALTT CODE END -->
The code above is auto-generated for you after you lock an agreement. When an agreement is locked you will see a "Get Code" button on the Edit Agreement Page near the bottom. Clicking this reveals the exact code needed for the Agreement you are editing.
The code above in its entirety is required on your website page in order for the Clickwrap to be successfully captured.
#jQuery is required. If you already include it in another location on your page, you can remove it from the "Required One Time" section of the code snippet.
Switching: Test and Live
To switch between saving live data and test data, change Environment passed in as "live" or "test". See below.
Elements Explained
Environment [required] designates the environment to save the clickwrap data, "live" or "test".
Organization ID [required] is populated for you, represents your specific organization, and is required.
Agreement ID [required] is the specific ID for the agreement your user is agreeing to, and is required.
Agreement Name, Agreement Version, and Agreement Text [required] cannot be updated once the agreement is locked, and all are required.
Agreement Statement [required] is the text that is shown to ask your user to agree by clicking the button below. You can customize this text.
Agreement Complete Text [required] is the text that is displayed to your user once they have clicked the "Agree" button.
valtt-clickwrap1 [required] is the element, noted in the DIV at the top of the code, that the Valtt system will place the agree request.
Text, Button, and Link Classes [required, but can be passed in as blank] are the CSS classes that determine the look and feel of the agree request. These are optional, but must be included in the code as at least blank.
Callback Element [required] is the hidden form field is updated once the clickwrap is complete. In your code, you can check this field for a "y" before allowing your users to continue in your process.
Clickwrap Number [required] is the number of the clickwrap on the page, should start with "c" and be followed by a number. Example: "c1".
Agreement Text [required, 'y' or 'n'] when set to 'y' will show the Agreement text above the button, or 'n' to not show.
Agreement Text Rows [required, but can be passed in as blank] is the number of rows (height) to show for the Agreement text.
Agreement Text Cols [required, but can be passed in as blank] is the number of columns (width) to show for the Agreement text.
Agreement Text CSS [required, but can be passed in as blank] is the CSS class of the Agreement Text textarea element.

Welcome

Next - valtt.js / Website Code

How to Add Multiple Clickwraps on the Same Page

Last modified 2yr ago

Copy link

On this page

Switching: Test and Live

Elements Explained