Alliance Partners - Whitelabel configuratie Alliantie in PAY.
Handleiding voor het aanpassen van de look & feel
Met de whitelabel-functionaliteit van PAY. kun je de omgeving volledig afstemmen op de huisstijl van jouw organisatie. Hierdoor herkennen merchants en gebruikers direct jouw merk in de PAY.-omgeving, communicatie-uitingen en documentatie.
Deze handleiding beschrijft alle beschikbare instellingen, aanbevolen afmetingen en het gebruik van de verschillende kleur- en brandingopties.
Waar vind ik deze instellingen?
Navigatie
- Log in op je PAY.-account.
- Ga naar Instellingen in het hoofdmenu.
- Klik vervolgens op Whitelabel in het submenu.
Via deze pagina kun je afbeeldingen, kleuren, lettertypen en social media-instellingen configureren om de omgeving volledig aan te laten sluiten op jouw huisstijl.
Let op: de whitelabel-functionaliteit is alleen beschikbaar voor accounts waarvoor deze functionaliteit is geactiveerd.
Algemene werking
De whitelabel-instellingen zijn onderverdeeld in drie categorieën:
- Afbeeldingen & Branding
- Kleuren
- Social media & Footer
Nadat wijzigingen zijn opgeslagen, worden deze toegepast binnen de whitelabel-omgeving.
Tip: Zorg ervoor dat logo's, kleuren en lettertypen overeenkomen met de officiële huisstijlrichtlijnen van jouw organisatie.
1. Afbeeldingen & Branding Afbeelding (Logo)
Doel
Dit logo wordt gebruikt in communicatie richting derden.
Specificaties
- Bestandstype: JPG of PNG
- Aanbevolen afmeting: 140 x 140 px
- Advies: gebruik uitsluitend het logo-icoon zonder extra tekst
Gebruik
Dit logo wordt getoond in verschillende communicatie-uitingen zoals e-mails en andere klantgerichte communicatie.
APP header image
Doel
Headerafbeelding voor gebruik binnen de PAY. App.
Specificaties
- Bestandstype: JPG of PNG
- Afmeting: 640 x 430 px
Gebruik
Ideaal voor het doorvoeren van de eigen huisstijl binnen de mobiele app-omgeving.
Info document
Doel
Achtergrondafbeelding voor informatiedocumenten.
Specificaties
- Voorkeur bestandstype: JPG
- Formaat: A4 staand
- Breedte: 2480 px
- Hoogte: 3508 px
- Maximale bestandsgrootte: 500 KB
Gebruik
Wordt als achtergrond geplaatst achter informatiedocumenten die vanuit het platform worden gegenereerd.
Data document
Doel
Achtergrondafbeelding voor exports, rapportages en databestanden.
Specificaties
- Voorkeur bestandstype: JPG
- Formaat: A4 liggend
- Breedte: 3508 px
- Hoogte: 2480 px
- Maximale bestandsgrootte: 500 KB
Gebruik
Wordt gebruikt achter rapportages, exports en databestanden.
Admin logo groot
Doel
Groot logo linksboven in de beheeromgeving.
Specificaties
- Bestandstype: PNG
- Maximale hoogte: 48 px
- Maximale breedte: 164 px
- Maximale bestandsgrootte: 10 KB
Advies
Gebruik:
- Witte tekst op transparante achtergrond
- Of een logo met witte achtergrond/border
Dit logo wordt getoond wanneer er voldoende ruimte beschikbaar is.
Admin logo klein
Doel
Compact logo voor kleinere schermen en situaties waarin onvoldoende ruimte beschikbaar is voor het grote logo.
Specificaties
- Bestandstype: PNG
- Maximale hoogte: 24 px
- Maximale breedte: 125 px
- Maximale bestandsgrootte: 10 KB
Advies
Gebruik:
- Witte tekst op transparante achtergrond
- Of een logo met witte achtergrond/border
Logo mail footer
Doel
Logo dat wordt weergegeven in de footer van e-mails.
Specificaties
- Gebruik bij voorkeur een transparante PNG.
- Zorg voor een goede leesbaarheid op zowel lichte als donkere achtergronden.
Gebruik
Wordt weergegeven in uitgaande e-mails vanuit de PAY.-omgeving.
Favicon
Doel
Het pictogram dat zichtbaar is in browser-tabbladen.
Ondersteunde formaten
- PNG
- ICO
- SVG
- GIF
Advies
- Gebruik een vierkant logo.
- Aanbevolen formaat: 32x32 of 64x64 pixels.
- Houd het ontwerp eenvoudig zodat het ook op kleine schaal herkenbaar blijft.
Webfont regular
Doel
Vervangt de standaardfonts voor H1-, H2- en H3-koppen binnen my.pay.nl.
Specificaties
- Bestandstype: WOFF2
- Alleen fonts met de Latin character set worden ondersteund.
Gebruik
Gebruik het reguliere huisstijlfont van jouw organisatie.
Webfont bold
Doel
Bold-variant van het webfont voor kopteksten.
Specificaties
- Bestandstype: WOFF2
- Alleen fonts met de Latin character set worden ondersteund.
Gebruik
Gebruik de vetgedrukte variant van het huisstijlfont van jouw organisatie.
2. Kleuren
Alle kleurvelden verwachten een hexadecimale kleurcode zonder #.
Voorbeeld:
003972
Dit resulteert in:
#003972
Primaire kleur
Wordt gebruikt voor:
- Buttons
- Geselecteerde menu-items
- Diverse accenten
- Interactieve elementen
"Is de primaire kleur die gebruikt wordt in PAY. voor bijvoorbeeld buttons, weergeven van het geselecteerde menu item en wanneer je over de menu-items hovert."
Primaire kleur 2
Kleur van het hoofdmenu binnen PAY.
Accent kleur
Wordt gebruikt om visuele accenten aan te duiden binnen de interface.
Secondaire navigatie menu
Achtergrondkleur van het secundaire navigatiemenu.
Hover kleur
Wordt gebruikt wanneer gebruikers:
- Over buttons bewegen
- Over tabelregels bewegen
- Over interactieve onderdelen bewegen
Secondaire kleur
Aanvullende kleur voor secundaire onderdelen van de interface.
Hoofdmenu instellingen:
Hoofdmenu font kleur
Kleur van de tekst in het hoofdmenu.
Hoofdmenu kleur
Achtergrondkleur van het hoofdmenu.
Font kleur actieve hoofdmenu item
Tekstkleur van het geselecteerde hoofdmenu-item.
Actieve hoofdmenu item kleur
Achtergrondkleur van het geselecteerde hoofdmenu-item.
Font kleur hover hoofdmenu
Tekstkleur tijdens hover over hoofdmenu-items.
Hover hoofdmenu kleur
Achtergrondkleur tijdens hover over hoofdmenu-items.
Submenu instellingen Submenu font kleur
Tekstkleur van submenu-items.
Submenu kleur
Achtergrondkleur van het submenu.
Actieve submenu item kleur
Achtergrondkleur van het actieve submenu-item.
Font kleur actieve submenu
Tekstkleur van het actieve submenu-item.
Font kleur hover submenu
Tekstkleur tijdens hover op submenu-items.
Hover submenu kleur
Kleur van de 2px indicatorlijn die zichtbaar wordt wanneer een gebruiker over een submenu-item beweegt.
Overlay iconen
Doel
Kleur voor:
- Filterbuttons
- Overlay-iconen
- Upsell-buttons
Waarde
Hier wordt geen hex-kleur ingevuld, maar een CSS-filter.
Gebruik hiervoor bijvoorbeeld:
https://isotropic.co/tool/hex-color-to-css-filter/
Voorbeeld:
CSS
invert(24%) sepia(94%) saturate(1317%) hue-rotate(189deg) brightness(93%) contrast(101%)
"Is de kleur die in PAY. gebruikt wordt voor buttons in filters en iconen in upsale buttons."
3. Social media instellingen
Deze links worden weergegeven in de footer van de whitelabel-omgeving.
Facebook URL
Voorbeeld: https://www.facebook.com/uwbedrijf
LinkedIn URL
Voorbeeld: https://www.linkedin.com/company/uwbedrijf
YouTube URL
Voorbeeld: https://www.youtube.com/@uwbedrijf
Vimeo URL
Voorbeeld: https://vimeo.com/uwbedrijf
Instagram URL
Voorbeeld:https://www.instagram.com/uwbedrijf
Footer tonen :Toon footer
Wanneer deze optie wordt ingeschakeld wordt de whitelabel-footer weergegeven.
De footer bevat onder andere:
- Socialmedia-links
- Supportinformatie
- Branding-elementen
Best practices
✅ Gebruik logo's met een transparante achtergrond.
✅ Test kleurcombinaties op voldoende contrast en leesbaarheid.
✅ Gebruik dezelfde kleuren als op je website en overige communicatie-uitingen.
✅ Houd favicon en logo's eenvoudig en herkenbaar.
✅ Optimaliseer afbeeldingen zodat pagina's snel laden.
✅ Test de omgeving zowel op desktop als mobiel.
✅ Controleer altijd de leesbaarheid van menu's, buttons en links na het wijzigen van kleuren.
Aanbevolen huisstijlset
- Hoofdmenu achtergrond: donkere huisstijlkleur
- Hoofdmenu tekst: wit
- Primaire kleur: merkaccent
- Hover kleur: 10% tot 15% lichter dan de primaire kleur
- Favicon: logo-icoon
- Admin logo: witte versie van het logo
- Mail footer logo: transparante PNG
Met deze instellingen creëer je een consistente en professionele whitelabel-ervaring die volledig aansluit op de branding van jouw organisatie en de herkenbaarheid van jouw merk binnen de PAY.-omgeving vergroot.