# Customization

Personalize your Audion listener page to match your organization's branding.

## Opening Preferences

1. Click **Audion** in the menu bar
2. Select **Preferences...** (or press `⌘,`)
3. Click the **Appearance** tab

## Custom Logo

Replace the default text title with your organization's logo.

### Adding a Logo

1. In the Appearance tab, check **"Use custom logo instead of text title"**
2. Click **"Select Logo..."**
3. Choose your logo file
4. Preview appears in the preferences window

### Supported Formats

✅ **PNG** - Recommended (supports transparency)  
✅ **JPG/JPEG** - Good for photos  
✅ **GIF** - Supports transparency  
✅ **SVG** - Vector graphics (scalable)

### Logo Requirements

**Recommended dimensions:**
- Width: 800-1200 pixels
- Height: 200-400 pixels
- Aspect ratio: Wide/horizontal

**File size:**
- Keep under 2 MB for best performance
- Smaller files load faster for listeners

**Background:**
- Transparent background recommended (PNG or SVG)
- Works best on dark listener page background
- Test on both light and dark devices

### Logo Best Practices

**✅ Do:**
- Use high-resolution images (2x for retina displays)
- Keep logos simple and readable
- Use transparent backgrounds when possible
- Test on actual phones before printing QR codes

**❌ Don't:**
- Use tiny logos (they won't be readable)
- Include too much detail (won't scale well)
- Use logos with small text (will be illegible)
- Forget to test on mobile devices

### Clearing a Logo

1. Click **"Clear"** next to the logo preview
2. The default text title will be used instead
3. Logo file is removed from preferences

## Text Customization

Customize the title and subtitle text on your listener page.

### Editing the Title

**Default:** 🎧 Audio Stream

**To customize:**
1. Click in the **"Title"** field
2. Type your custom title
3. Changes save automatically

**Examples:**
- "First Church Audio"
- "Sunday Service Live"
- "Assistive Listening"
- "Youth Ministry Audio"

> **Note:** Title field is disabled when using a custom logo

### Editing the Subtitle

**Default:** Assistive Listening Service

**To customize:**
1. Click in the **"Subtitle"** field
2. Type your custom subtitle
3. Changes save automatically

**Examples:**
- "Sunday Service • 10:00 AM"
- "Worship & Teaching Audio"
- "Para servicio en español, pregunte"
- "Available in English & Spanish"

### Text Guidelines

**Keep it short:**
- Title: 2-5 words max
- Subtitle: 5-10 words max
- Longer text may wrap or shrink on phones

**Be clear:**
- Tell people what they're listening to
- Include language if applicable
- Add service times if helpful

**Consider your audience:**
- Use simple, friendly language
- Avoid technical jargon
- Make it welcoming and accessible

## Preview Your Changes

After making changes, test them:

1. Click **"Start Streaming"** in the main window
2. Visit the listener URL on your phone
3. Check how your logo and text appear
4. Make adjustments as needed

## Example Customization Scenarios

### Scenario 1: Traditional Church

**Logo:** Church building or denominational logo  
**Subtitle:** "Sunday Worship Service"

**Result:** Professional, recognizable branding that members will trust.

### Scenario 2: Contemporary Church

**Logo:** Modern brand mark with transparency  
**Subtitle:** "Experience worship anywhere"

**Result:** Fresh, welcoming feel for younger attendees.

### Scenario 3: Multi-Language Services

**Logo:** Bilingual church logo  
**Subtitle:** "English & Español Available"

**Result:** Clear communication of language options.

### Scenario 4: Special Events

**Logo:** Event-specific graphic  
**Subtitle:** "Christmas Eve Service • Dec 24"

**Result:** Seasonal branding that matches event materials.

### Scenario 5: No Logo

**Title:** "🎵 Live Audio Feed"  
**Subtitle:** "Oak Street Community Church"

**Result:** Simple text-only approach when logo isn't needed.

## Branding Consistency

### Matching Your Print Materials

**For bulletins:**
1. Use the same logo in Audion as on your bulletin
2. Generate QR code (see [Getting Started](getting-started.md))
3. Place QR code on bulletin with brief instructions

**For signage:**
1. Create signs with your logo and QR code
2. Position near entrances and gathering areas
3. Include simple "Scan to Listen" instruction

### Color Coordination

While you can't change the listener page colors directly, you can:

- Choose a logo that works on dark backgrounds
- Use PNG with transparency for best results
- Test on various screen brightnesses

## Resetting to Defaults

To return to default settings:

1. Clear your custom logo (if applicable)
2. Delete text from Title field (leave blank)
3. Delete text from Subtitle field (leave blank)
4. Audion will use defaults: "🎧 Audio Stream" and "Assistive Listening Service"

## QR Code with Custom Branding

Your customizations appear on the listener page that the QR code links to.

**Workflow:**
1. Customize logo and text in Preferences
2. Generate QR code from main window
3. QR code links to page with your branding
4. Print or share QR code

> **Tip:** Generate a new QR code after making branding changes to ensure the link includes timestamp for cache-busting.

## Technical Details

### How Customization Works

- Logo stored in app preferences
- Served to listeners via `/logo` endpoint
- Text stored as string values
- All preferences persist across app restarts
- Changes take effect immediately (no restart needed)

### Performance Impact

- Small logos (under 500KB): No noticeable impact
- Large logos (1-2MB): Slightly slower page load
- SVG logos: Fast loading, perfectly scalable
- Cached by browsers after first load

## Accessibility Considerations

When customizing:

- Ensure logo has good contrast
- Don't rely on color alone to convey information
- Keep text simple and readable
- Test with screen readers if possible

---

**Next Steps:** Generate a [QR Code](getting-started.md#step-4-share-the-connection) with your custom branding or learn about [MIDI Control](midi-control.md).