Branding.

Customize Reward Loyalty to match your brand. Upload your logo, choose your primary brand color, and configure your application name—all from the admin dashboard.

Configuring Branding

Navigate to Settings > Branding tab in the admin dashboard. This page contains all branding configuration options organized into three sections:

• Basic Settings — Application name and URL
• Brand Color — Your primary color that appears throughout the platform
• Logo Uploads — Upload logos for light and dark themes

Changes take effect immediately after clicking Save.

Application Name

The application name appears throughout the platform including browser tab titles, email headers and footers, system messages, and PWA install prompts.

1. Navigate to Settings in the admin sidebar
2. Click the Branding tab
3. Update the Application Name field
4. Click Save

You can also configure this via the environment file:

APP_NAME="Your Brand Name"

💡 Tip: Settings configured in the admin dashboard override environment variables.

Application URL

The base URL where your platform is installed. This is used for generating links in emails and QR codes.

1. Navigate to Settings > Branding tab
2. Update the Application URL field (e.g., https://yourdomain.com)
3. Click Save

Brand Color

Choose a primary brand color that reflects your business identity. The platform automatically generates a complete color palette from your selection, creating consistent tones across buttons, links, accents, and interactive elements.

Setting Your Brand Color

1. Navigate to Settings > Branding tab
2. Find the Brand Color section
3. Click the color picker or enter a hex code (e.g., #8B5CF6 for purple)
4. Click Save

Your brand color immediately applies across all portals—admin, partner, staff, and member—without requiring any technical changes or CSS recompilation.

How It Works

When you select a brand color, the system automatically generates 11 shades (from very light to very dark) that are used throughout the interface:

• Buttons and links use your primary color
• Hover states use slightly lighter/darker variations
• Backgrounds use very light tints
• Dark mode automatically adjusts all shades for proper contrast

The default brand color is blue (#3B82F6). When no custom color is set, the platform uses this standard blue theme.

Color Selection Tips

• Choose a dominant color from your existing brand guidelines
• Avoid very light colors — they may not provide enough contrast for buttons
• Test in dark mode — your color should work well on both light and dark backgrounds

Logo

Upload your logo directly through the admin dashboard. The system supports separate logos for light and dark themes, ensuring your branding looks correct regardless of the user's theme preference.

Uploading Your Logo

1. Navigate to Settings > Branding tab
2. Scroll to the Logo Uploads section
3. Click the upload area or drag and drop your logo file
4. For Light Mode Logo, upload a logo that works on light backgrounds
5. For Dark Mode Logo, upload a version that works on dark backgrounds
6. Click Save

Supported Formats

The following file formats are supported for logo uploads:

Maximum file size is 2MB.

Logo Recommendations

• Height: Design for 32-40 pixels display height
• Background: Use transparent backgrounds (PNG or SVG)
• Aspect ratio: Horizontal or square logos work best
• Dark mode: Provide a light-colored or inverted version for dark backgrounds

Fallback Behavior

If no logo is uploaded, the platform displays a branded badge with the first letter of your application name, styled with your brand color.

Removing a Logo

To remove an uploaded logo and revert to the fallback badge:

1. Navigate to Settings > Branding tab
2. Click the × button on the logo preview
3. Click Save

What You Can Customize

Email Branding

Emails use your configured application name in the header and footer:

• Email Header — Displays your application name as text
• Email Footer — Shows "© [Year] [Application Name]. All rights reserved."
• Sign-off — "The Team at [Application Name]"

Note: Uploaded logos are not currently displayed in emails. Only the application name text appears.

Campaign Emails (Partner-Sent)

When partners send email campaigns to members, the sender information differs:

• From Name — Uses the partner's configured sender name
• From Address — Uses the system email address for deliverability
• Reply-To — Routes to the partner's configured reply address

This allows partners to build their own brand identity with members while maintaining email deliverability through your domain.

PWA Branding

If members install your platform as a Progressive Web App (PWA), additional branding appears:

• App Name — Displayed in install prompts and app info
• Short Name — Shown on home screens (max 12 characters)
• Theme Color — Browser address bar color on mobile
• Background Color — Splash screen background when app launches

Configure these in Settings > PWA tab. See PWA Configuration for full details.

Consistency Tips

Keep branding consistent across all touchpoints:

• ✅ Use the same logo everywhere
• ✅ Ensure your logo works on both light and dark backgrounds
• ✅ Choose a brand color that complements your logo
• ✅ Match your PWA branding to your main application
• ✅ Use a professional, recognizable name

All users—administrators, partners, staff, and members—see consistent branding throughout the platform.

Troubleshooting

Logo Not Displaying After Upload

If your logo doesn't appear after saving:

1. Check file format — Ensure you uploaded a supported format (SVG, PNG, JPG, WebP)
2. Check file size — Maximum size is 2MB
3. Clear browser cache — Hard refresh with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

Logo Looks Blurry

Cause: The image resolution is too low for the display size.

Solution: Use SVG format (vector graphics) or provide a high-resolution PNG at least 2x the intended display size. SVG is strongly recommended because it scales perfectly at any size.

Brand Color Not Applying

Cause: Your browser cached the old styles.

Solutions:

1. Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
2. Clear browser cache
3. Run php artisan config:clear and php artisan cache:clear on the server

Dark Mode Logo Not Showing

Cause: Dark mode logo only appears when the user's system or browser is set to dark mode.

Verification: Toggle your system to dark mode to confirm the logo switches correctly.

Related Topics

• System Settings — Overview of all admin configuration
• PWA Configuration — Progressive Web App settings
• Email Configuration — Email provider and sender setup