Appearance & Branding
By default, Click agreements display in a neutral style. In the Appearance tab of your template, you can adjust colors, fonts, and button labels to match your product's look and feel. Users see your branding, not Propper's.
Brand Colors
| Setting | What it controls |
|---|---|
| Background Color | The background of the agreement container |
| Text Color | Body text color |
| Button Color | Background color of the Accept button |
| Button Text Color | Text color inside the Accept button |
Enter colors as hex values (for example, #1A56DB) or standard color names.
Screenshot: Appearance tab with color pickers for Background, Text, Button, and Button Text, alongside a live preview panel
Typography
| Setting | Options |
|---|---|
| Font Family | System default, or a custom Google Fonts URL |
| Base Font Size | 10–24px (default: 16px) |
For long-form agreements — Terms of Service, NDAs — a slightly larger font size (18–20px) makes the content easier to read and reduces the chance users skip past it.
Button Labels
Customize the text on action buttons to match your product's voice:
| Button | Default | Example alternatives |
|---|---|---|
| Accept | Accept | I Agree, Accept All, Continue |
| Decline | Decline | I Do Not Agree, Reject |
| Manage Preferences (Consent only) | Manage Preferences | Customize, Cookie Settings |
| Reject Non-Essential (Consent only) | Reject Non-Essential | Decline Optional Cookies |
Layout Options
Shadow: controls the drop shadow around the agreement container — None, Small, Medium, or Large. Subtle shadows work well for inline embeds; stronger shadows suit modals.
Border Radius: sets how rounded the corners of the container are. Use 0 for sharp corners, 8 for a standard card look, or 16 for a softer modern style.
Preview
The Appearance tab includes a live preview that updates as you make changes. Use it to check color contrast and overall layout before publishing.
The preview uses placeholder text. Always test with your actual agreement content after deploying to a staging environment — long content behaves differently from the short preview placeholder.
How the Agreement Displays on the Page
The display style — modal, inline, or popup — is set when you create a deployment, not here in the template. The render response carries it as metadata.displayMode, and your own product decides how to draw the agreement: a modal blocks the page until the user responds, inline sits in your layout, and a popup is a non-blocking prompt.
Next Steps
- Content Settings: configure acknowledgment and interaction options
- Deploy a template: set the display mode when creating a deployment