Set Invitation Code

The final step provides smart defaults while maintaining user control.

In this page

September 12^th, 2025

Step 3 Layout

When Step 3 becomes active, the overall page layout creates a focused, completion‐oriented experience:

• Completed Steps 1 and 2 remain visible with green checkmarks
• Step 3 gains prominence through its detailed interactive elements
• The Setup Progress panel shows 2/3 completion with a nearly full progress bar

September 12^th, 2025

User Selects Suggested Code

Trigger: User clicks on one of the three suggested invitation codes

Example: User selects "weddingitaly"

Visual Changes:

• Selected button gets highlighted styling
• Other suggestion buttons remain in default state
• Custom input field remains empty
• Invitation Code gets green checkmark in sidebar
• "Activate Website" button becomes active

September 12^th, 2025

User Creates Custom Code

Trigger: User clicks in or types in the "Or create your own" input field

Interface Element: User enters "amore"

Visual Changes:

• Custom input field shows the entered text
• The "2/6" counter provides feedback on minimum length

Visual Changes:

• Character count appears (5/4 in example ‐ indicating validation)
• Suggested buttons remain unselected (ensuring single selection)
• Setup Progress updates to 3/3
• "Activate Website" button becomes active