---
title: "Користувацьке брендування"
description: "Документація користувацького брендування для платформи Ring"
locale: "uk"
---
# White-label брендування платформи Ring

Налаштуйте платформу Ring під ваш бренд через конфігураційні файли, змінні середовища та CSS налаштування для створення повністю white-label рішення.

## 🎨 Можливості white-label брендування

Платформа Ring підтримує комплексне white-label брендування через:

- ✅ **Конфігурація бренду** - Назва платформи, логотипи, кольори
- ✅ **Змінні середовища** - Налаштування через env файли
- ✅ **CSS теми** - Користувацькі кольори та стилі через Tailwind CSS v4
- ✅ **Локалізація** - Підтримка декількох мов
- ✅ **Доменне брендування** - Користувацькі домени та SSL

## 🚀 Налаштування white-label бренду

### Крок 1: Конфігурація середовища
.env.local - основні налаштування бренду

{`NEXT_PUBLIC_BRAND_NAME="Ваша Компанія"
NEXT_PUBLIC_BRAND_TAGLINE="Ваш професійний слоган"
NEXT_PUBLIC_BRAND_DOMAIN="platform.yourcompany.com"
NEXT_PUBLIC_BRAND_LOGO="/logos/your-company-logo.svg"
NEXT_PUBLIC_BRAND_FAVICON="/favicons/your-company.ico"`}

### Крок 2: Кольорова схема бренду
/* app/globals.css - CSS змінні для бренду */

{`:root {
  /* Основні кольори вашого бренду */
  --brand-primary: #6366f1;      /* Основний колір */
  --brand-secondary: #8b5cf6;    /* Вторинний колір */
  --brand-accent: #06b6d4;       /* Акцентний колір */

  /* Градієнти */
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --brand-gradient-accent: linear-gradient(135deg, var(--brand-accent), var(--brand-primary));
}

/* Темний режим */
[data-theme="dark"] {
  --brand-primary: #818cf8;      /* Світліший для темного режиму */
  --brand-secondary: #a78bfa;
  --brand-accent: #22d3ee;
}`}

### Крок 3: Налаштування навігації та контенту
// app/layout.tsx - Налаштування метаданих

{`export const metadata = {
  title: {
    default: process.env.NEXT_PUBLIC_BRAND_NAME || 'Ring Platform',
    template: `%s | ${process.env.NEXT_PUBLIC_BRAND_NAME || 'Ring Platform'}`
  },
  description: process.env.NEXT_PUBLIC_BRAND_TAGLINE || 'Professional networking platform',
  icons: {
    icon: process.env.NEXT_PUBLIC_BRAND_FAVICON || '/favicon.ico',
  },
  openGraph: {
    siteName: process.env.NEXT_PUBLIC_BRAND_NAME || 'Ring Platform',
    images: [{
      url: process.env.NEXT_PUBLIC_BRAND_OG_IMAGE || '/og-image.png',
      width: 1200,
      height: 630,
    }],
  },
}`}

### Крок 4: Компоненти бренду
// components/brand/BrandLogo.tsx

{`interface BrandLogoProps {
  variant?: 'full' | 'icon'
  className?: string
}

export function BrandLogo({ variant = 'full', className = '' }: BrandLogoProps) {
  const brandName = process.env.NEXT_PUBLIC_BRAND_NAME || 'Ring Platform'
  const logoUrl = process.env.NEXT_PUBLIC_BRAND_LOGO || '/logo.svg'

  if (variant === 'icon') {
    return (
      
    )
  }

  return (
    
      
      {brandName}
    
  )
}`}

## 🎨 Конфігурація тем

### Tailwind CSS v4 теми
/* app/globals.css */

{`@theme {
  --color-brand-primary: var(--brand-primary);
  --color-brand-secondary: var(--brand-secondary);
  --color-brand-accent: var(--brand-accent);
}

.btn-brand {
  background: var(--brand-gradient);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-brand:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);
}`}

### Підтримка темного режиму
/* Автоматичне переключення тем */

{`[data-theme="dark"] {
  --brand-primary: #818cf8;
  --brand-secondary: #a78bfa;
  --brand-accent: #22d3ee;
}

[data-theme="light"] {
  --brand-primary: #6366f1;
  --brand-secondary: #8b5cf6;
  --brand-accent: #06b6d4;
}`}

## 📱 Адаптивне брендування

### Мобільна оптимізація
/* Мобільні стилі бренду */

{`@media (max-width: 768px) {
  .brand-logo {
    font-size: 1.125rem; /* text-lg */
  }

  .btn-brand {
    padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
    font-size: 0.875rem; /* text-sm */
  }
}`}

## 🏷️ Контрольний список white-label впровадження

### Брендова ідентичність
- [ ] **Назва платформи** налаштована через `NEXT_PUBLIC_BRAND_NAME`
- [ ] **Слоган** додано через `NEXT_PUBLIC_BRAND_TAGLINE`
- [ ] **Логотип** розміщено та налаштовано
- [ ] **Favicon** оновлено для всіх пристроїв
- [ ] **Кольорова схема** визначена в CSS змінних

### Технічна конфігурація
- [ ] **Домен** налаштовано та SSL сертифікат отримано
- [ ] **Email шаблони** оновлені з брендингом
- [ ] **Мета теги** налаштовані для SEO
- [ ] **Open Graph** зображення створені
- [ ] **PWA маніфест** оновлено

### Контент та локалізація
- [ ] **Локалізаційні файли** перекладені
- [ ] **Допоміжний контент** оновлено
- [ ] **Контактна інформація** замінена
- [ ] **Соціальні посилання** ведуть на брендові облікові записи
- [ ] **Правові документи** оновлені

## 🚀 Приклади брендових конфігурацій

### Технологічний стартап

{`NEXT_PUBLIC_BRAND_TAGLINE="Швидка розробка для інноваційних команд"
NEXT_PUBLIC_BRAND_DOMAIN="techflow.app"`}

{`--brand-primary: #3b82f6;
  --brand-secondary: #1e40af;
  --brand-accent: #06b6d4;
}`}

### Медична платформа

{`NEXT_PUBLIC_BRAND_TAGLINE="З'єднуємо охорону здоров'я з технологіями"
NEXT_PUBLIC_BRAND_DOMAIN="mediconnect.health"`}

{`--brand-primary: #10b981;
  --brand-secondary: #059669;
  --brand-accent: #3b82f6;
}`}

### Фінансова платформа

{`NEXT_PUBLIC_BRAND_TAGLINE="Розумні рішення для фінансового успіху"
NEXT_PUBLIC_BRAND_DOMAIN="financehub.pro"`}

{`--brand-primary: #1e40af;
  --brand-secondary: #1e3a8a;
  --brand-accent: #f59e0b;
}`}

---

**🎨 Створіть свій унікальний бренд**

Платформа Ring надає повну свободу для створення white-label рішення, яке ідеально відповідає вашому бренду та бізнес-цілям.

*Потрібна допомога з налаштуванням white-label брендування? Зверніться до нашої [документації з white-label](https://ring-platform.org/docs/customization) або приєднайтеся до [спільноти Discord](https://discord.gg/ring-platform).*"