Branding Configuration

Customize your Vyral platform with your own branding, colors, and identity to create a unique experience for your users.

Brand Identity Elements

Transform your platform with these customizable elements:

Platform Name - Change "Vyral" to your brand name
Logo & Favicon - Upload your custom logos
Color Scheme - Set your brand colors
Footer Content - Customize footer text and links
Email Templates - Brand your transactional emails

Platform Name Configuration

Change the platform name throughout the application:

# Platform Branding Configuration
PLATFORM_NAME="Your Platform"
PLATFORM_TAGLINE="Connect, Share, Discover"
PLATFORM_DESCRIPTION="Your social media platform"
SUPPORT_EMAIL=[email protected]
CONTACT_EMAIL=[email protected]

Add these to your backend .env file. The platform name will appear in:

Page titles and meta tags
Email templates
Footer and navigation
Mobile app names
Social sharing cards

Logo & Favicon Setup

Prepare Logo Files

Create these logo files in the recommended sizes:

File	Size	Format	Usage
`logo.png`	200x60px	PNG/SVG	Light theme header
`logo-dark.png`	200x60px	PNG/SVG	Dark theme header
`favicon.ico`	32x32px	ICO	Browser tab icon
`apple-touch-icon.png`	180x180px	PNG	iOS home screen
`social-share.jpg`	1200x630px	JPG/PNG	Social media cards

Upload Logo Files

Go to https://api.yourplatform.com/admin/branding
Login with admin credentials
Use the logo upload interface
Preview changes in real-time
Save and apply changes

# Place files in the branding directory
cp logo.png backend/uploads/branding/
cp logo-dark.png backend/uploads/branding/
cp favicon.ico backend/uploads/branding/
cp apple-touch-icon.png backend/uploads/branding/

Verify Logo Display

Check that your logos appear correctly:

Header navigation (light/dark themes)
Email templates
Loading screens
Mobile app icons
Social sharing previews

Color Scheme Customization

Define your brand colors for consistent theming:

# Color Theme Configuration
PRIMARY_COLOR=#3b82f6    # Main brand color (buttons, links)
SECONDARY_COLOR=#6b7280  # Secondary elements
ACCENT_COLOR=#10b981     # Highlights and CTAs
SUCCESS_COLOR=#059669    # Success messages
WARNING_COLOR=#d97706    # Warning messages  
ERROR_COLOR=#dc2626      # Error messages

Color Usage Examples

Primary Color Applications:

Navigation active states
Primary buttons and CTAs
Link colors and highlights
Progress indicators
Loading states

Automatic Adjustments:

Colors automatically adjust contrast for dark mode
Proper accessibility ratios maintained
Custom dark variants can be specified
Gradients and shadows adapt appropriately

Complete Brand Palette:

Primary: Brand identity color
Secondary: Supporting elements
Accent: Call-to-action highlights
Success: Positive feedback
Warning: Cautionary messages
Error: Critical alerts

Email Template Branding

Customize transactional emails with your branding:

# Email Template Branding
EMAIL_LOGO_URL=https://yourplatform.com/logo.png
EMAIL_PRIMARY_COLOR=#3b82f6
EMAIL_FOOTER_TEXT="© 2024 Your Platform. All rights reserved."
EMAIL_SUPPORT_URL=https://yourplatform.com/support
EMAIL_UNSUBSCRIBE_URL=https://yourplatform.com/unsubscribe

Email Template Types

All these email templates will use your branding:

Template	Purpose	Branding Elements
Welcome Email	New user onboarding	Logo, colors, footer
Email Verification	Account verification	Logo, brand colors
Password Reset	Security notifications	Consistent styling
Gift Notifications	Monetization alerts	Brand colors, logo
Subscription Updates	Billing communications	Professional styling

Custom CSS & Advanced Styling

For advanced customization beyond basic branding:

# Custom Styling Configuration
ENABLE_CUSTOM_CSS=true
CUSTOM_CSS_PATH=./assets/custom.css
CUSTOM_FONTS_URL=https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap

Customizable Interface Elements

Content Styling:

Card and post designs
Typography and fonts
Spacing and layouts
Border styles and shadows
Background patterns

User Interface:

Button styles and hover effects
Form input styling
Modal and popup designs
Loading animations
Notification styles

Admin Dashboard Management

Visual Branding Editor

Access the admin dashboard for visual branding management at: https://api.yourplatform.com/admin/branding

Dashboard Features

Live Preview - See changes before applying
Color Picker - Visual color selection tool
Logo Upload - Drag-and-drop file upload
Template Preview - Preview email templates
Bulk Changes - Apply branding across all templates

Configure how your platform appears when shared:

# Social Media Configuration
OG_SITE_NAME="Your Platform"
OG_DESCRIPTION="Connect with friends and discover amazing content"
OG_IMAGE=https://yourplatform.com/social-share.jpg
TWITTER_SITE=@yourplatform
TWITTER_CREATOR=@yourhandle

This controls:

Facebook sharing cards
Twitter link previews
Discord embed appearance
WhatsApp link previews
LinkedIn post previews

Testing Your Branding

Visual Elements Test

Verify branding appears correctly:

Check header logo in light/dark themes
Test mobile responsive logo sizing
Verify favicon appears in browser tabs
Confirm colors are applied consistently

Email Template Test

Send test emails to verify branding:

curl -X POST https://api.yourplatform.com/api/admin/test-email \
  -H "Authorization: Bearer your-admin-token" \
  -H "Content-Type: application/json" \
  -d '{"email": "[email protected]", "template": "welcome"}'

Test social media previews:

Share a link on Facebook to verify Open Graph
Post on Twitter to check card appearance
Test Discord embed formatting
Verify LinkedIn post previews

Brand Guidelines Best Practices

Brand Consistency Tips

Use consistent colors across all touchpoints
Ensure logos are high-quality and scalable
Test branding in both light and dark themes
Maintain proper contrast ratios for accessibility
Keep email templates professional and on-brand

Accessibility Considerations

Color Contrast - Ensure 4.5:1 minimum contrast ratio
Logo Visibility - Test logos against all background colors
Text Readability - Verify text is readable in all themes
Interactive Elements - Maintain clear focus states

Next Steps

Branding Configuration Complete

Your platform branding is now configured! Continue with:

Configure SMTP Settings - Set up email delivery
Configure Storage - Set up file uploads
Configure Localization - Add languages
Install CoTURN Server - Enable video calls

Branding Configuration

On this page