# Page Templates
Last Chance provides a variety of pre-designed templates to help you create engaging unsubscribe pages. This guide explains the different template types, what each page does, and how to customize them.
**Templates are a starting point only.** You are responsible for everything that appears on your live unsubscribe page—including all copy, consent language, and the presence of a clear, obvious way for subscribers to unsubscribe. Edit and review your page before publishing to ensure it accurately reflects your brand and complies with your obligations to subscribers and your email platform.
## Overview
When you create a new unsubscribe page, you can choose from our template library. Each template includes:
- **Multiple page states** - Different screens for the subscriber journey
- **Customizable styling** - Colors, fonts, and branding options
- **Interactive elements** - Buttons, forms, and special widgets
- **Mobile-responsive design** - Looks great on all devices
---
## Template Categories
### Offer Templates
Simple, clean designs that present a discount offer to encourage subscribers to stay.
**Best for:** Straightforward retention with a clear value proposition
**Examples:** Minimal, Fresh, Bold, Sunset, Aurora
---
### Scratch-Off Templates
Interactive scratch card experiences where subscribers reveal a hidden discount by "scratching" with their mouse or finger.
**Best for:** Gamified engagement that increases time on page and retention rates
**Examples:** Scratch Lottery, Scratch Vegas, Scratch Neon, Scratch Cosmic
**How it works:**
1. Subscriber sees a scratch card with a hidden prize
2. They scratch to reveal their discount code
3. Confetti celebrates the reveal
4. They're automatically shown the "stayed" confirmation page
---
### Product Templates
Showcase your products directly on the unsubscribe page, giving subscribers a reason to stay and shop.
**Best for:** E-commerce brands who want to highlight specific products or bestsellers
**Examples:** Shop Grid, Shop Single, Shop Upfront
---
## Page States
Every template includes multiple "pages" that display at different points in the subscriber journey:
### Initial Page
The first page subscribers see when they click an unsubscribe link. This is your chance to offer alternatives.
**Typical elements:**
- Headline asking them to reconsider
- Discount offer or incentive
- "Stay Subscribed" button
- "Pause Emails" option
- "Unsubscribe" button
---
### Stayed Page
Shown when a subscriber chooses to stay subscribed. Confirms their decision and provides the discount code.
**Typical elements:**
- Thank you message
- Discount code display
- Copy code button
- Link to shop
---
### Unsubscribed Page
Shown after a subscriber completes the unsubscribe process.
**Typical elements:**
- Confirmation message
- Optional feedback form (why they unsubscribed)
- Option to resubscribe if they change their mind
---
### Paused Page
Shown when a subscriber chooses to pause emails instead of unsubscribing.
**Typical elements:**
- Confirmation of pause
- Display of when emails will resume
- Option to resume emails early
- Link back to shop
---
### Resubscribed Page
Shown when a previously unsubscribed user clicks "Resubscribe."
**Typical elements:**
- Welcome back message
- Confirmation of resubscription
---
## Customizing Templates
### Theme Settings
Every template supports customization through theme settings:
| Setting | Description |
| ------------------- | -------------------------------------------------- |
| **Primary Color** | Main accent color for buttons and highlights |
| **Secondary Color** | Supporting color for text and borders |
| **Font Family** | Choose from available web fonts |
| **Shop URL** | Link to your store for "Continue Shopping" buttons |
| **Discount Code** | The code to display and offer subscribers |
### Visual Editor
For more advanced customization, use the visual editor to:
- Drag and drop components
- Edit text and images
- Adjust spacing and layout
- Modify colors and styles
- Add or remove sections
---
## Interactive Components
### Scratch Card
Available in scratch-off templates. Subscribers scratch to reveal their prize.
**Customization options:**
- Scratch layer color (silver, gold, bronze, purple, blue)
- Prize text and description
- Discount code displayed under the scratch layer
---
### Pause Modal
When subscribers click "Pause Emails," a modal appears letting them choose how long to pause:
- 1 week
- 1 month
- 3 months
- 6 months
After selecting, they see the Paused page with their resume date.
---
### Feedback Form
Displayed on the Unsubscribed page to collect insights on why subscribers left:
**Default options:**
- Too many emails
- Emails not relevant to me
- I never signed up
- I prefer other channels
- Content quality issues
- Other (with text input)
This feedback helps you improve your email strategy.
---
### Copy Discount Button
A small button next to discount codes that copies the code to the subscriber's clipboard. Shows "Copied!" confirmation when clicked.
---
## How Buttons and Widgets Work
Understanding how interactive elements work helps you customize templates and troubleshoot issues. Last Chance uses special HTML attributes to make buttons and widgets functional.
### Action Buttons (data-action)
Buttons perform actions based on their `data-action` attribute. When editing in the visual editor, make sure buttons have the correct attribute for them to work.
| Action | What It Does | Example HTML |
| -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| `stay-subscribed` | Keeps subscriber on list, shows "Stayed" page | `` |
| `unsubscribe` | Unsubscribes user, shows "Unsubscribed" page | `` |
| `pause-emails` | Opens the pause duration modal | `` |
| `resume-emails` | Resumes paused emails | `` |
| `resubscribe` | Resubscribes a user who unsubscribed | `` |
| `back-to-initial` | Returns to the initial page | `` |
| `copy-discount-code` | Copies discount code to clipboard | `` |
| `shop` | Opens shop link AND marks user as staying | `Shop Now` |
| `back-to-shop` | Opens shop link (tracking only) | `Continue Shopping` |
#### Pause Modal Buttons
Inside the pause modal, these additional actions are used:
| Action | What It Does |
| --------------- | ------------------------------------ |
| `confirm-pause` | Confirms the selected pause duration |
| `cancel-pause` | Closes the modal without pausing |
#### Feedback Form Buttons
On the unsubscribed page feedback form:
| Action | What It Does |
| --------------- | --------------------------------------- |
| `submit-reason` | Submits the selected unsubscribe reason |
| `skip-reason` | Skips the feedback form |
---
### Widgets (data-widget)
Widgets are more complex interactive components identified by `data-widget` attributes.
#### Scratch Card Widget
The scratch card requires a wrapper element with `data-widget="scratch-card"`:
```html
{{discountCode}}
```
**Scratch card attributes:**
| Attribute | Description | Options |
| ------------------------- | --------------------------------- | -------------------------------------------- |
| `data-scratch-text` | Main text on scratch layer | Any text |
| `data-scratch-subtext` | Secondary text on scratch layer | Any text |
| `data-scratch-color` | Color of the scratch layer | `silver`, `gold`, `bronze`, `purple`, `blue` |
| `data-show-scratch-layer` | Whether to show the scratch layer | `true`, `false` |
---
### Template Variables
Use these placeholders in your HTML - they'll be replaced with actual values:
| Variable | Description | Example Output |
| -------------------- | ------------------------------------ | -------------------- |
| `{{discountCode}}` | The discount code for this page | `SAVE20` |
| `{{shopUrl}}` | Your shop URL from settings | `https://myshop.com` |
| `{{shopUrlPostfix}}` | URL suffix (often includes discount) | `/discount/SAVE20` |
| `{{pausedUntil}}` | When paused emails will resume | `March 15, 2024` |
**Example usage:**
```html
Your code: {{discountCode}}
Shop Now
```
---
### Troubleshooting
**Button not working?**
- Check that the button has the correct `data-action` attribute
- Make sure the attribute value is spelled correctly (case-sensitive)
- Verify the button is not inside another clickable element
**Scratch card not appearing?**
- Ensure the wrapper has `data-widget="scratch-card"`
- Check that there's a `