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.