Appearance
🎨 Whitelabel Frontend
🌍 Overview
The Whitelabel Frontend is a Vue 3 + Vite application that dynamically builds branded casino sites. When a user visits a domain (e.g., micasino.net), the frontend sends the domain to the Aggregator API. The API returns a JSON configuration describing the site's template, theme, typography, banners, and structure. This JSON is stored and rendered automatically, creating a fully customized experience per brand.
- 🎨 Brand-based rendering from JSON configuration
- ⚡ Powered by Vue 3, Pinia, and Vite
- 🌈 Dynamic theming (colors, fonts, assets) without rebuilds
- 🔗 Connects to Aggregator API via domain detection
- 💅 Built with TailwindCSS for full customization and scalability
- 🧩 Supports unlimited templates — each client can have its own unique theme
⚙️ Domain Validation & JSON Configuration
The Whitelabel system validates the domain before rendering any UI. When a visitor accesses the brand URL, the frontend sends a request to the following API endpoint:
http
POST https://aggregator.example.net/api/wl/tenant
{
"domain": "micasino.net"
}The backend validates the domain and responds with a full JSON configuration that contains all the required properties for rendering the brand's interface.
📡 Request & Render Flow
mermaid
graph TD
A["🌍 User Domain<br />micasino.net"] -->|"POST /api/wl/tenant"| B["⚙️ Aggregator API<br />Validate Domain"]
B -->|"✅ Valid"| C["📦 JSON Config<br />Template, Colors, Fonts, Pages"]
C -->|"Render"| D["🎰 Frontend (Vue + Tailwind)<br />Dynamic Branded Site"]
B -->|"❌ Invalid"| E["🚫 404 - Domain Not Found"]📦 Full Example JSON Response
The Aggregator API returns the following JSON after domain validation:
json
{
"website": {
"template": "rpm-gp",
"name": "MiCasino",
"favicon": "https://placehold.co/32x32/1F2937/FFFFFF.png",
"logo": "https://aggregator.s3.us-east-1.amazonaws.com/micasino.net/logo.png",
"theme_colors": {
"primary": "#22D3EE",
"secondary": "#E6AB4A",
"accent": "#1A202C",
"neutral": "#6B6A61",
"background": "#FFFFFF"
},
"typography": {
"primary_font": {
"name": "Montserrat",
"url": "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
},
"secondary_font": {
"name": "PT Sans",
"url": "https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
}
},
"pages": [
{"name": "Casino en vivo", "to": "/category/3/Casino en vivo"},
{"name": "Casino", "to": "/category/2/Casino"},
{"name": "Proveedores", "to": "/providers"}
],
"banners": [
{
"image": "https://aggregator.s3.us-east-1.amazonaws.com/micasino.net/banner-1.png",
"title": "¡Regístrate hoy!",
"subtitle": "Recibe tu bono de bienvenida",
"description": "Empieza a jugar y multiplica tus oportunidades de ganar. Descubre nuestras promociones exclusivas.",
"button": {"text": "Ir a WhatsApp", "to": "https://wa.me/+50688889999"}
},
{
"image": "https://aggregator.s3.us-east-1.amazonaws.com/micasino.net/banner-2.png",
"title": "Pragmatic Play",
"subtitle": "¡Tu favorito en todo momento!",
"description": "Explora las maquinitas más emocionantes, con bonos irresistibles y free spins. ¡Pragmatic lo tiene todo!",
"button": {"text": "Jugar ahora", "to": "/provider/17/Pragmatic Play"}
},
{
"image": "https://aggregator.s3.us-east-1.amazonaws.com/micasino.net/banner-3.png",
"title": "¡Lo que estabas buscando!",
"subtitle": "Clásicos y nuevos juegos esperándote",
"description": "Disfruta una experiencia premium con los títulos más buscados del mercado.",
"button": {"text": "Ver Más", "to": "/login"}
}
],
"promotions": [],
"footer": {
"sections": [
{
"title": "Información General",
"links": [
{"name": "Acerca de Nosotros", "slug": "about"},
{"name": "Seguridad y Privacidad", "slug": "security-privacy"},
{"name": "Preguntas Frecuentes", "slug": "faq"},
{"name": "Contáctanos", "slug": "contact"}
]
},
{
"title": "Juegos y más",
"links": [
{"name": "Live Casino", "link": "/category/3/Casino en vivo"},
{"name": "Casino", "link": "/category/2/Casino"},
{"name": "Pragmatic Play", "link": "/provider/17/Pragmatic Play"}
]
},
{
"title": "Privacidad y Seguridad",
"links": [
{"name": "Reglas de la Casa", "slug": "house-rules"},
{"name": "Términos y Condiciones", "slug": "terms-conditions"},
{"name": "Juego Responsable", "slug": "responsible-gaming"}
]
}
],
"social_media": [
{"name": "Facebook", "icon": "facebook", "link": "https://www.facebook.com"},
{"name": "Instagram", "icon": "instagram", "link": "https://www.instagram.com"}
],
"copyright": {
"operator_text": "MICASINO.NET © 2025 – Made in Costa Rica",
"regulation_text": "",
"developer_text": ""
}
},
"gateway": {
"defaultMethodId": 1,
"manualMethodId": 1,
"depositSteps": [
"1. Realiza el pago al número proporcionado por nuestro operador.",
"2. Ingresa el número de referencia en el formulario.",
"3. Espera la confirmación por correo electrónico (24-48h)."
],
"bankDetails": {
"title": "Detalles para depósito",
"disclaimer": "* Usa estos datos exactos al hacer tu pago.",
"fields": [
{"key": "bank", "label": "Banco", "value": "SINPE Móvil"},
{"key": "accountNumber", "label": "Número de Teléfono", "value": "88889999"}
]
},
"minimumDeposit": [{"currency": "CRC", "amount": 1000}]
},
"countries": [
{"name": "Costa Rica", "code": "CR", "phoneCode": "506", "currencies": ["CRC"]}
]
}
}© 2025 Gaming Platform – PAM Whitelabel Documentation