Ga naar hoofdinhoud

White Label Setup

Jaarabonnement Vereist

White Label-functionaliteit is exclusief beschikbaar voor gebruikers met een Jaarabonnement. Neem contact op met ons supportteam via Telegram om je ontgrendelingscode te verkrijgen na aankoop van een jaarplan.

De White Label-functie stelt je in staat om de branding van TikMatrix aan te passen aan je bedrijfsidentiteit. Je kunt de app-naam, het logo en de merkinformatie wijzigen om een gepersonaliseerde versie van TikMatrix te creëren.

Functies​

Basisinstellingen​

  • App-naam: Pas de weergavenaam van de applicatie aan
  • Logo Upload: Upload je aangepaste hoofdlogo (aanbevolen 128x128px)
  • Favicon: Stel aangepaste favicon in voor de applicatie

Merkinstellingen​

  • Support E-mail: E-mailadres voor klantenondersteuning
  • Tutorial URL: Aangepaste tutorial/documentatie link
  • Telegram URL: Stel je Telegram groep of kanaal link in

Functie Schakelaars​

  • Toon Tutorial Link: Beheer zichtbaarheid van tutorial link
  • Toon Merkinfo: Beheer weergave van merkinformatie

Setup Methoden​

Methode 1: UI Configuratie​

  1. Start de TikMatrix applicatie
  2. Klik op het palet pictogram 🎨 in de titelbalk
  3. Configureer parameters in het White Label Instellingen dialoogvenster:
    • App-naam: Voer je aangepaste applicatienaam in
    • Hoofdlogo: Upload je logobestand (PNG/JPG, 128x128px aanbevolen)
    • Support E-mail: Voer je support e-mailadres in
    • Tutorial URL: Voer je aangepaste tutorial URL in
    • Telegram URL: Voer je Telegram groep/kanaal URL in
    • Functie Schakelaars: Tutorial links en merkinfo weergave in-/uitschakelen
  4. Klik op "Opslaan" om instellingen toe te passen

Methode 2: Configuratiebestand​

  1. Kopieer het voorbeeldconfiguratiebestand:

    cp examples/whitelabel-config.json src/config/whitelabel-custom.json

  2. Bewerk het configuratiebestand:

    {
      "appName": "Je App Naam",
      "logo": {
        "main": "/pad/naar/je/logo.webp",
        "favicon": "/pad/naar/je/favicon.ico"
      },
      "brand": {
        "supportEmail": "support@jouwbedrijf.com",
        "tutorialUrl": "https://jouwbedrijf.com/docs",
        "telegramUrl": "https://t.me/jouwgroep"
      },
      "features": {
        "showTutorialLink": true,
        "showBrandInfo": true
      }
    }

  3. Sla het bestand op en herstart de applicatie

Methode 3: Commandoregel Tool​

  1. Navigeer naar de projectmap:

    cd tikmatrix-desktop

  2. Voer de configuratietool uit:

    node scripts/whitelabel-config.js

  3. Volg de prompts om elke parameter stap voor stap te configureren

Aangepaste Versie Bouwen​

1. Bronbestanden Voorbereiden​

# Plaats je logobestanden op de juiste locaties
src/assets/jouw-logo.webp       # Hoofdlogo
public/jouw-favicon.ico        # Web favicon
src-tauri/icons/               # Applicatie iconen (verschillende groottes)

2. Build Parameters Configureren​

Gebruik de commandoregel tool of bewerk handmatig de configuratie:

# Commandoregel tool gebruiken
node scripts/whitelabel-config.js

# Of handmatig bewerken
src/config/whitelabel-build.json

3. Applicatie Bouwen​

# Ontwikkelmodus
npm run dev

# Productie build
npm run build

# Tauri applicatie bouwen
npm run tauri build

Configuratie Prioriteit​

Het systeem gebruikt de volgende prioriteitsvolgorde voor configuratie:

  1. Runtime Config: Browser LocalStorage whitelabel_config
  2. Build Config: src/config/whitelabel-build.json (gebruikt tijdens build)
  3. Voorbeeld Config: examples/whitelabel-config.json
  4. Standaard Config: Ingebouwde standaardwaarden

Logo Vereisten​

  • Formaat: PNG, JPG, of SVG
  • Grootte: 128x128px (aanbevolen)
  • Achtergrond: Transparant (voor PNG)
  • Gebruik: Header, splash screen, over dialoog

Favicon​

  • Formaat: ICO of PNG
  • Grootte: 32x32px of 16x16px
  • Gebruik: Browser tab, venster icoon

Applicatie Iconen (voor builds)​

  • Formaten: PNG, ICO, ICNS
  • Groottes: 32x32, 128x128, 256x256, 512x512
  • Locatie: src-tauri/icons/ map

API Integratie​

JavaScript API​

import { 
  getWhiteLabelConfig,
  saveWhiteLabelConfig, 
  resetWhiteLabelConfig,
  validateWhiteLabelConfig 
} from './config/whitelabel.js';

// Huidige configuratie ophalen
const config = getWhiteLabelConfig();

// Nieuwe configuratie opslaan
saveWhiteLabelConfig(newConfig);

// Terugzetten naar standaard
resetWhiteLabelConfig();

// Configuratie valideren
validateWhiteLabelConfig(config);

Hulpfuncties​

import { 
  initWhiteLabel,
  updateDocumentTitle,
  updateFavicon
} from './utils/whitelabel.js';

// White label initialiseren bij app start
initWhiteLabel();

// Document titel bijwerken
updateDocumentTitle('Je App Naam');

// Favicon bijwerken
updateFavicon('/pad/naar/favicon.ico');

Best Practices​

Logo Ontwerp​

  • Gebruik hoge resolutie afbeeldingen voor scherpe weergave
  • Handhaaf consistente branding over alle logogroottes
  • Test logo's op zowel lichte als donkere achtergronden
  • Zorg ervoor dat logo's leesbaar zijn bij kleine groottes

Merkconsistentie​

  • Gebruik consistente kleuren en lettertypen overal
  • Stem af op je bestaande merkrichtlijnen
  • Test de aangepaste interface op verschillende schermgroottes
  • Handhaaf professioneel uiterlijk

URL Configuratie​

  • Gebruik HTTPS URL's voor alle externe links
  • Test alle links voor implementatie
  • Zorg ervoor dat supportkanalen goed worden gemonitord
  • Houd documentatie URL's up-to-date

Probleemoplossing​

Veelvoorkomende Problemen​

Logo wordt niet weergegeven:

  • Controleer bestandspad en machtigingen
  • Verifieer dat afbeeldingsformaat wordt ondersteund
  • Zorg ervoor dat afbeeldingsgrootte passend is
  • Wis browsercache en herstart app

Configuratie wordt niet opgeslagen:

  • Controleer bestandssysteemmachtigingen
  • Verifieer JSON-syntax is correct
  • Zorg ervoor dat configuratiemap bestaat
  • Probeer als administrator uit te voeren (indien nodig)

Build mislukt:

  • Verifieer dat alle bronbestanden bestaan
  • Controleer configuratiebestand syntax
  • Zorg ervoor dat icoonbestanden in correct formaat zijn
  • Bekijk build logs voor specifieke fouten

Hulp Verkrijgen​

Als je problemen ondervindt met White Label setup:

  1. Controleer de probleemoplossing sectie hierboven
  2. Bekijk configuratiebestand syntax
  3. Neem contact op met support via Telegram
  4. Voeg je configuratiebestand en foutmeldingen toe bij het rapporteren van problemen

Licentie en Gebruik​

  • White Label functionaliteit is alleen beschikbaar voor gebruikers met een Jaarabonnement
  • Aangepaste branding rechten zijn inbegrepen bij je abonnement
  • Herdistributie van aangepaste versies kan aanvullende licenties vereisen
  • Neem contact op met support voor enterprise licentie-opties

Heb je de ontgrendelingscode nodig? Neem contact op met ons supportteam via Telegram met je jaarabonnement details.