Branding Module Documentation

Table of Contents

1. Navigation & Access
2. Screenshots & Visual Interface
3. 🎯 User Roles & Key Capabilities
4. Module Overview (Technical)
5. Module Overview (Commercial/Business)
6. Module Overview (End User/Administrator)
7. Configuration Sections
8. Settings Reference
9. Common Scenarios & Examples
10. Model Context Protocol (MCP) AI Integration
11. Limitations & Important Notes
12. Troubleshooting Tips
13. Glossary

---

Navigation & Access

To access the Branding module:

1. Log in to the Ring2All Web Portal (https://<domain-or-ip>/login).
2. In the left navigation sidebar, expand Admin.
3. Under System Settings, click Branding (/admin/system-settings/branding).
4. To configure white-label branding for a specific tenant, click on the tenant row in the table or the edit action icon (/admin/system-settings/branding/:id).

---

Screenshots & Visual Interface

Branding Tenants List View

The Branding overview displays all registered platform organizations and tenants, indicating corporate titles, slug identifiers, primary brand colors, admin contact emails, and customization statuses.

Tenant Branding Configuration Form

The tenant branding editor provides comprehensive white-labeling controls, including custom application naming, logo asset uploads, favicon selection, brand color pickers (primary and secondary), and whitelabel footer copyright definitions.

---

🎯 User Roles & Key Capabilities

The Branding module manages white-label customization across multi-tenant enterprise partitions:

Role	Key Capabilities & Operational Scope
Platform Owner / Master Administrator	Defines the global platform brand, default fallback logos, copyright texts, and grants white-label customization permissions to tenants.
Tenant Administrator	Personalizes the tenant’s visual identity: uploads corporate logos (light/dark modes), customizes primary theme colors, and sets company support links.
Marketing & Brand Specialist	Adjusts UI color palettes (HEX codes), verifies favicon contrast across browsers, and ensures branding assets render correctly across mobile and desktop interfaces.
Telephony Auditor (Read-Only)	Verifies tenant brand configurations, active logo URLs, and copyright strings without modification privileges.

---

1. Module Overview (Technical)

What Is Branding?

Branding is a white-labeling module that customizes the visual identity of each tenant. It manages logos, colors, login page design, and application information to match corporate branding.

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                  Branding Architecture                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Branding Configuration                                         │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │        Tenant: Acme Corp                                 │   │
│  │                                                          │   │
│  │  App Information:                                        │   │
│  │  ├─ App Name: Acme PBX                                  │   │
│  │  ├─ Welcome Message: Welcome to Acme                    │   │
│  │  └─ Footer: © 2025 Acme Corp                            │   │
│  │                                                          │   │
│  │  Colors:                                                 │   │
│  │  ├─ Primary: #1E40AF                                    │   │
│  │  └─ Secondary: #64748B                                  │   │
│  │                                                          │   │
│  │  Logos:                                                  │   │
│  │  ├─ Desktop Light: acme-logo.png                        │   │
│  │  ├─ Desktop Dark: acme-logo-dark.png                    │   │
│  │  ├─ Mobile Light: acme-mobile.png                       │   │
│  │  ├─ Mobile Dark: acme-mobile-dark.png                   │   │
│  │  ├─ Favicon Light: favicon.ico                          │   │
│  │  └─ Favicon Dark: favicon-dark.ico                      │   │
│  │                                                          │   │
│  │  Login Design:                                           │   │
│  │  ├─ Background Color: #0F172A                           │   │
│  │  ├─ Background Image: login-bg.jpg                      │   │
│  │  ├─ Form Background: rgba(...)                          │   │
│  │  └─ Button Color: #3B82F6                               │   │
│  │                                                          │   │
│  │  Notifications:                                          │   │
│  │  ├─ Toast Success: #10B981                              │   │
│  │  ├─ Toast Error: #EF4444                                │   │
│  │  ├─ Toast Warning: #F59E0B                              │   │
│  │  └─ Toast Info: #3B82F6                                 │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│       │                                                         │
│       ▼ Applied to                                             │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │        User Interface                                    │   │
│  │                                                          │   │
│  │  ├─ Login page                                          │   │
│  │  ├─ Application header                                  │   │
│  │  ├─ Browser favicon                                     │   │
│  │  ├─ Mobile PWA icons                                    │   │
│  │  └─ Color scheme throughout                             │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

---

2. Module Overview (Commercial/Business)

Business Value

Branding provides complete white-labeling:

Without Branding	With Branding
Generic interface	Custom identity
Default colors	Corporate colors
Platform logos	Customer logos
Same for all	Per-tenant customization

Use Cases

1. Reseller White-Label

   • Rebrand for each customer
   • Hide platform identity

2. Corporate Identity

   • Match company colors
   • Display company logo

3. Multi-tenant Differentiation

   • Unique look per tenant
   • Easy tenant identification

4. Professional Appearance

   • Custom login page
   • Branded experience

Feature Highlights

Feature	Benefit
Light/Dark Logos	Theme support
Desktop & Mobile	Responsive branding
Favicons	Browser identity
Color Customization	Match corporate colors
Login Design	Custom welcome pages
Per-Tenant	Multi-tenant branding

---

3. Module Overview (End User/Administrator)

What Can You Do?

• Set application name
• Upload logos (light/dark modes)
• Upload mobile logos
• Upload favicons
• Set primary and secondary colors
• Customize login page design
• Customize notification toast colors (Success, Error, Warning, Info)
• Set welcome message and footer

Branding Interface

┌─────────────────────────────────────────────────────────────────┐
│              Branding                                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Customize your tenant's visual identity and interface         │
│                                                                 │
│  [🔍 Search tenants...]                                         │
│                                                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │ Tenant Name     │ Branding   │ Status    │ Actions        │  │
│  ├─────────────────┼────────────┼───────────┼────────────────┤  │
│  │ Acme Corp       │ [Logo]     │ ● Active  │ [Configure]    │  │
│  │ Beta Inc        │ [Default]  │ ○ Inactive│ [Configure]    │  │
│  │ Gamma LLC       │ [Logo]     │ ● Active  │ [Configure]    │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

App Information Section

┌─────────────────────────────────────────────────────────────────┐
│              App Information                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Application Name: [Acme PBX                    ]              │
│    The name of your application as it appears                   │
│                                                                 │
│  Welcome Message: [Welcome to Acme Communications]             │
│    Welcome message shown to users when they log in              │
│                                                                 │
│  Description: [Enterprise phone system          ]              │
│    Brief description of your application                        │
│                                                                 │
│  Footer Text: [© 2025 Acme Corp. All rights reserved.]        │
│    Footer text displayed at the bottom                          │
│                                                                 │
│  Primary Color: [#1E40AF    ] [🎨]                             │
│    Primary color used for buttons, links, and highlights        │
│                                                                 │
│  Secondary Color: [#64748B   ] [🎨]                            │
│    Secondary color used for backgrounds                         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Logos & Icons Section

┌─────────────────────────────────────────────────────────────────┐
│              Logos & Icons                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ▼ Desktop Logos                                                │
│                                                                 │
│  Logo (Light Mode)          Logo (Dark Mode)                   │
│  ┌────────────────┐         ┌────────────────┐                 │
│  │                │         │                │                 │
│  │   [ACME]       │         │   [ACME]       │                 │
│  │                │         │  (white text)  │                 │
│  └────────────────┘         └────────────────┘                 │
│  [Change] [Remove]          [Change] [Remove]                  │
│  200x200px or larger        200x200px or larger                │
│                                                                 │
│  ──────────────────────────────────────────────────────────────│
│                                                                 │
│  ▼ Mobile Logos & Favicons                                      │
│                                                                 │
│  Mobile (Light)  Mobile (Dark)  Favicon (Light) Favicon (Dark) │
│  ┌──────────┐    ┌──────────┐   ┌──────────┐    ┌──────────┐  │
│  │   [A]    │    │   [A]    │   │   [A]    │    │   [A]    │  │
│  └──────────┘    └──────────┘   └──────────┘    └──────────┘  │
│  512x512px       512x512px      32x32px         32x32px        │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Login Design & Live Brand Simulator Section

The Branding module incorporates an interactive Live Login Simulator alongside the configuration controls. As administrators adjust background colors, upload brand emblems, or modify button transparencies, the simulator re-renders the login experience in real time.

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                        Login Design & Live Simulator                                   │
├─────────────────────────────────────────────┬──────────────────────────────────────────┤
│  CONFIGURATION CONTROLS                     │  LIVE INTERACTIVE SIMULATOR              │
│                                             │                                          │
│  Background Color: [#0F172A    ] [🎨]       │  ┌────────────────────────────────────┐  │
│  Font Color:       [#FFFFFF    ] [🎨]       │  │                                    │  │
│  Form Background:  [#1E293B80  ] [🎨]       │  │        ┌──────────────────┐        │  │
│  Submit Button:    [#3B82F6CC  ] [🎨]       │  │        │   [BRAND LOGO]   │        │  │
│  Add-ons Menu:     [#47556980  ] [🎨]       │  │        │  (Unobstructed)  │        │  │
│                                             │  │        ├──────────────────┤        │  │
│  Disable Background Image: ☐                │  │        │ [Username      ] │        │  │
│                                             │  │        │ [Password      ] │        │  │
│  Background Image:                          │  │        │ [Sign In Button] │        │  │
│  [Change] [Remove] (1920x1080px)            │  │        └──────────────────┘        │  │
│                                             │  │                              [ℹ️]  │  │
│  Login Logo:                                │  │                (Corner Info Button)│  │
│  [Change] [Remove]                          │  └────────────────────────────────────┘  │
│                                             │                                          │
│  [Save Changes] [Reset to Defaults]         │                                          │
└─────────────────────────────────────────────┴──────────────────────────────────────────┘

[!NOTE] Ergonomic Icon Placement: The contextual information and help trigger [ℹ️] is placed in the lower corner of the login viewport, ensuring that it never overlaps, obscures, or interferes with the corporate emblem.

Quick Tips

[!TIP] Light & Dark Themes: Upload dedicated light and dark variants for desktop logos, mobile monograms, and favicons (.ico and .png). Modern browsers automatically detect the user’s OS color scheme and switch the favicon dynamically.

[!TIP] Recommended Sizes: Follow size guidelines for best quality (SVGs for logos, 32x32 / 64x64 for favicons, 1920x1080 for login wallpapers).

[!NOTE] Alpha Colors: Use 8-digit hexadecimal notation with alpha channels (e.g., #1E293B80 for 50% opacity, #3B82F6CC for 80% opacity) for frosted-glass aesthetic backdrops.

---

4. Configuration Sections

App Information

Field	Description
Application Name	Display name in headers, title bars, and notifications
Welcome Message	Login greeting displayed beneath the corporate emblem
Description	Meta summary for search and system information
Footer Text	Legal copyright notice displayed across the footer
Primary Color	Main accent color (buttons, active tabs, highlight states)
Secondary Color	Supporting color for subtle badges and secondary buttons

Corporate Brand Propagation & User Appearance Hierarchy

The Primary Color and Secondary Color configured here form the authoritative corporate palette for the entire organization:

• Automatic User Inheritance (useCorporateColors: true): By default, all newly provisioned user accounts, extension portals, and administrative sessions inherit these corporate brand colors automatically.
• Dynamic Synchronization: Whenever an administrator updates and saves the tenant’s brand colors in this module, the new palette propagates immediately in real-time to all users operating with corporate color synchronization enabled.
• The “Corporate Brand” Preset Slot: Within the Appearance > Colors tab of every user account across the PBX, SBC, BSS, Switchboard, and User Portal, these colors populate Slot 1 (“Corporate Brand / Marca Corporativa”) with an active status badge.
• Ergonomic Autonomy without Brand Compromise: Individual operators may select alternative ergonomic presets or custom hues for specialized lighting environments (which sets their personal useCorporateColors flag to false), but they can realign with the corporate identity at any time with a single click on the Corporate Brand card. Corporate logos, favicons, login designs, and legal watermarks remain strictly protected and can only be altered by administrators within this module.

Logos & Icons

Asset	Light Mode	Dark Mode	Recommended Formats & Sizes
Desktop Logo	✓	✓	SVG (vector) or PNG (min. 240x48px, transparent)
Mobile Logo	✓	✓	SVG or PNG (512x512px 1:1 square icon)
Favicon	✓	✓	Multi-format .ico (16x16, 32x32, 48x48) and .png (32x32, 64x64)

Login Design

Field	Description
Background Color	Base backdrop color for the authentication portal
Font Color	Typography color for labels and input descriptions
Form Background	Alpha-blended background color for the login card
Submit Button	Fill color for the primary authentication action button
Add-ons Menu	Accent color for language switcher and contextual popups
Background Image	High-definition backdrop wallpaper (optional)
Login Logo	Dedicated logo displayed prominently inside the login card

---

5. Settings Reference

Recommended Image Sizes

Asset	Size	Format
Desktop Logo	200x200px+	PNG, SVG
Mobile Logo	512x512px	PNG
Favicon	32x32px or 16x16px	ICO, PNG
Background	1920x1080px	JPG, PNG

Color Format

Format	Example	Use
Hex 6-digit	#3B82F6	Solid colors
Hex 8-digit	#3B82F680	With alpha

Alpha Values

Alpha	Hex	Transparency
100%	FF	Solid
80%	CC	Slight
50%	80	Half
30%	4D	Very transparent

---

6. Common Scenarios & Examples

Scenario 1: Basic Branding

1. Configure Branding for tenant
2. Set Application Name
3. Upload light mode logo
4. Set Primary Color
5. Save

Scenario 2: Full White-Label

1. Configure Branding
2. Upload all logos (light/dark)
3. Upload mobile logos
4. Upload favicons
5. Set all colors
6. Customize login page
7. Upload login background
8. Save

Scenario 3: Login Page Customization

1. Open Login Design section
2. Set background color
3. Upload background image
4. Set form background with alpha
5. Set button color
6. Upload login logo
7. Save

Scenario 4: Dark Mode Support

1. Upload light mode logo
2. Upload dark mode logo (inverted/light colors)
3. Upload both favicon versions
4. Save
5. Interface switches automatically

---

Model Context Protocol (MCP) AI Integration

The Ring2All PBX platform provides Model Context Protocol (MCP) tools for programmatic inspection of white-label branding configurations.

MCP Tools Reference

Tool Name	Operation	Description	Risk Level
get_branding_settings	Read	Retrieves white-label branding parameters (brand name, theme colors, logos, favicon) for the active tenant.	Low

JSON Schema Definitions

get_branding_settings

{
  "name": "get_branding_settings",
  "description": "Retrieves white-label branding parameters (company brand name, theme colors, logo URLs, favicon) for the active tenant.",
  "parameters": {
    "type": "object",
    "properties": {
      "tenant_id": {
        "type": "number",
        "description": "Optional numeric tenant identifier (defaults to active tenant)"
      }
    }
  }
}

Natural Language Prompt Examples

English

• “What brand name and primary theme color are configured for this tenant?”
• “Check the desktop light and dark logo URLs configured for the active organization.”
• “Show the white-label copyright text displayed on the login page footer.”

Spanish

• “¿Cuál es el nombre de marca y color primario configurado para esta empresa?”
• “Muestra los enlaces de los logos para modo claro y oscuro del tenant activo.”
• “Consulta el mensaje de bienvenida y pie de página de la marca blanca.”

Enterprise Safeguards & Guardrails

1. Multi-Tenant Isolation: Tenant administrators can only query branding parameters associated with their own tenant_id.
2. Safe Fallbacks: If custom tenant branding has not been configured, the tool automatically provides standard platform fallback assets.

---

7. Limitations & Important Notes

Technical Notes

[!NOTE] Per-Tenant: Each tenant has separate branding.

[!NOTE] Cache: Changes may require cache clear.

[!WARNING] Image Quality: Use high-resolution images.

Best Practices

1. Consistent Colors: Match corporate palette
2. Both Themes: Provide light and dark variants
3. Proper Sizes: Follow recommended dimensions
4. Test Logos: Verify on different backgrounds
5. Mobile-First: Ensure mobile logos are clear

Image Guidelines

Guideline	Recommendation
Format	PNG for transparency
Background	Transparent preferred
Quality	High resolution
Size	At least recommended

---

8. Troubleshooting Tips

Common Issues

Symptom	Possible Cause	Solution
Logo not showing	Upload failed	Re-upload
Colors wrong	Cache	Clear browser cache
Blurry logo	Too small	Use larger image
Dark mode broken	Missing dark logo	Upload dark variant

Verify Active Branding Configuration

1. Administrative Portal Verification: Navigate to Admin > System Settings > Branding and confirm the preview swatches and asset thumbnails display the expected tenant configuration.
2. User Appearance Confirmation: Access User Avatar > Appearance > Colors to verify that Slot 1 displays the updated corporate colors with the Corporate Brand badge active.
3. Login Portal Validation: Open a private/incognito browser window and navigate to the tenant login URL to confirm the updated logo, wallpaper, and welcome messages render cleanly.

Clear Cache

1. Browser: Ctrl+Shift+R (hard refresh)
2. Application: Clear app cache
3. CDN: Invalidate if applicable

---

9. Glossary

Term	Definition
Branding	Visual identity customization
White-Label	Remove platform identity
Favicon	Browser tab icon
Alpha	Transparency value
PWA	Progressive Web App

---

Documentation last updated: January 2026