Branding
Brand settings allow you to customize how your organization appears to consumers, including logos, colors, and email styling.
Accessing Brand Settings
Navigate to Settings > Brand to manage your brand appearance.
Caption: Customize your brand appearance
Brand Theme
Color Configuration
| Setting | Description |
|---|
| Primary Color | Main brand color |
| Secondary Color | Accent color |
| Background Color | Page background |
| Text Color | Default text color |
| Format | Example |
|---|
| Hex | #FF5733 |
| RGB | rgb(255, 87, 51) |
| HSL | hsl(11, 100%, 60%) |
Color Usage
Your brand colors appear in:
| Location | Colors Used |
|---|
| Experience Pages | Primary, Secondary |
| Email Templates | Primary, Background |
| Consumer Notifications | Primary, Text |
| Call-to-Action Buttons | Primary |
Logo Configuration
Logo Upload
Upload your organization’s logo:
- Click on the logo upload area
- Select an image file
- Crop if necessary
- Save changes
Caption: Upload and preview your logo
Logo Requirements
| Requirement | Specification |
|---|
| Format | PNG, JPG, SVG |
| Max Size | 2 MB |
| Recommended | 400x100 pixels |
| Aspect Ratio | Flexible (will scale) |
| Background | Transparent recommended |
Logo Placement
Your logo appears in:
| Location | Size/Format |
|---|
| Email Header | Full width, scaled |
| Experience Pages | Header area |
| Notifications | Thumbnail |
| Receipts | Header area |
Email Settings
Configure how emails appear to consumers.
| Field | Required | Description |
|---|
| From Email | Yes | Sender email address |
| From Name | Yes | Display name for sender |
| Reply-To Email | No | Where replies are sent |
| Reply-To Name | No | Display name for reply-to |
Email Branding
Emails are automatically branded with:
- Your logo in the header
- Brand colors for accents
- Company name and contact
- Unsubscribe link (where required)
Email Preview
Preview how branded emails will appear:
- Configure your settings
- Click Preview Email
- Review the preview
- Make adjustments if needed
Theme Presets
Quick-start with preset themes:
| Preset | Description |
|---|
| Light | Clean, light background |
| Dark | Modern dark theme |
| Minimal | Simple, minimal styling |
| Custom | Full customization |
Applying a Preset
- Select a preset from the dropdown
- Colors auto-populate
- Customize further if desired
- Save changes
Advanced Styling
Custom CSS (Enterprise)
Enterprise plans can add custom CSS:
/* Example custom styles */
.fanfare-button {
border-radius: 8px;
}
.fanfare-header {
font-family: "Your Font", sans-serif;
}
Font Configuration
| Setting | Description |
|---|
| Heading Font | Font for titles |
| Body Font | Font for body text |
| Button Font | Font for buttons |
Preview and Testing
Live Preview
See changes in real-time:
- Make a change
- Preview updates immediately
- Switch between views
- Save when satisfied
Caption: Preview your brand settings in real-time
Test Email
Send a test email to verify branding:
- Click Send Test Email
- Enter your email address
- Receive the test
- Verify appearance
Saving Changes
- Make your changes
- Click Save to apply
- Wait for confirmation
- Changes take effect immediately
What Happens on Save
| Item | Update Timing |
|---|
| New Experiences | Immediate |
| Existing Experiences | On next load |
| Emails | Next email sent |
| Consumer Pages | Immediate |
Brand Consistency
Best Practices
- Use consistent colors - Match your brand guidelines
- High-quality logo - Use vector or high-res images
- Readable contrast - Ensure text is readable
- Test on devices - Check mobile and desktop
Accessibility
Consider accessibility when customizing:
| Guideline | Recommendation |
|---|
| Color Contrast | 4.5:1 minimum ratio |
| Text Size | Minimum 16px body text |
| Alt Text | Describe logo for screen readers |
| Focus States | Visible focus indicators |
Troubleshooting
Logo Not Displaying
- Check file format is supported
- Verify file size is under limit
- Try re-uploading
- Clear browser cache
Colors Look Different
- Check color code is correct
- Consider monitor calibration
- Test on multiple devices
- Review in different browsers
Emails Not Branded
- Verify brand settings are saved
- Check email sender is configured
- Send a test email
- Contact support if issues persist
Resetting to Defaults
To reset all brand settings:
- Click Reset to Defaults
- Confirm the action
- All settings return to defaults
- Logo is removed
Resetting brand settings cannot be undone. Save your current configuration before resetting if you may want to restore it.
