Ask Moov Beta
Generative AI is experimental and can make mistakes.
Guides Use cases API Changelog
  1. Moov.js
  2. Moov Drops

Prebuilt terms of service UI

Implement a pre-built user interface for reviewing and accepting terms of service.

The moov-terms-of-service Drop provides links to Moov’s privacy policy and terms of service agreement and generates a token in the background. The token can be patched to an account for the purpose of accepting Moov’s terms of service. The terms of service Drop interacts directly with the generate a terms of service token GET endpoint using JWTs to securely send data between your end user’s browser and Moov.

Set up terms of service Moov drop

1

<moov-terms-of-service></moov-terms-of-service>

Visit our Drops 101 guide to learn the basics of properties, attributes, and initializing Drops.

Moov Drops require a secure HTTPS connection. If you don’t have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

Visual requirements

The terms of service (TOS) Drop must adhere to the following minimum visual requirements:

  1. Text color and background color must comply with ARIA color contrast standards.
  2. Link color and background color must comply with ARIA color contrast standards.
  3. Font size must not be smaller than 10px.

If the minimum visual requirements are not met, this component will not load, and you will see an error in your console.

In addition to the minimum requirements, the action button which allows users to accept the terms of service must be within close proximity of the TOS Drop, and the agreement statement must be in English. Tab through the visual requirement examples below.

Properties

Properties can be accessed through JavaScript using a reference to the moov-terms-of-service element.

1

<moov-terms-of-service ref="{termsOfServicesRef}"></moov-terms-of-service>
Property Type Description
token String Auth token used for hitting the API
customActionCopy String Default copy will be “By clicking continue, you agree to the terms of Moov’s Privacy Policy and Terms of Service.” This property allows you to adjust the “By clicking continue” portion of the copy to fit your use case.
textColor String The color of the terms of service text. Must be in a valid rgb format.
linkColor String The color of the terms of service links. Must be in a valid rgb format.
backgroundColor String The color of the terms of service background. Must be in a valid rgb format.
fontSize String The font size of the terms of service text. Must be use a valid font size unit. (i.e. 16px, 1rem, etc)
onTermsOfServiceReady Function The callback function used when the generated terms of service token is fetched
onTermsOfServiceError Function The callback function used when generating the terms of service token errors

How to set a property 

1
2

const termsOfService = document.querySelector("moov-terms-of-service");
termsOfService.token = "eyjh...";

1
2
3
4

const termsOfService = document.querySelector("moov-terms-of-service");
termsOfService.onTermsOfServiceReady = (termsOfServiceToken) => {
  console.log(termsOfServiceToken); // This is the terms of service token, not to be confused with the api token prop.
};

1
2
3
4

const termsOfService = document.querySelector("moov-terms-of-service");
termsOfService.onTermsOfServiceError = (error) => {
  console.log(error);
};

1
2

const termsOfService = document.querySelector("moov-terms-of-service");
termsOfService.customActionCopy = "By selecting finish";

Attributes

String-type properties can be set via attributes on the HTML <moov-terms-of-service> element.

1

<moov-terms-of-service token=""></moov-terms-of-service>
Attribute Description
token Auth token used for hitting the API
customActionCopy Custom action copy to replace default “By clicking continue”

Theming

Read our themes guide to learn how to re-style Moov Drops.

Summary Beta