Het stylen en branden van de kennisbankwidget

Je Knowledge Base-widget is vaak het eerste contactpunt dat een gebruiker heeft met je ondersteuningscontent. Een widget die past bij de visuele identiteit van je product voelt inheems en betrouwbaar aan — een widget die dat niet doet, kan aanvoelen als een bijzaak van een derde partij. Dit artikel behandelt elke visuele instelling die beschikbaar is voor de widget en legt uit wanneer en waarom je ze zou gebruiken.

Referentie voor stylinginstellingen

Hoe je widget-stylinginstellingen opent

1. Ga in de linker navigatiebalk naar Connections () > Knowledge base-widget.
2. Beweeg je muis over de gewenste widget en klik op het pictogram Bewerken ().
3. Vouw in het tabblad Configureren & Connect de Style-widget accordeon uit.

Wanneer widgetstyling te configureren

• Tijdens de eerste opstelling moet je de widget afstemmen op de merkkleuren en het icoon van je product.
• Bij het herpositioneren om overlap met een live chat-widget of cookiebanner te voorkomen.
• Wanneer je een aangepaste triggerknop gebruikt en het standaard zwevende icoon wilt verbergen.
• Bij het toevoegen van een onboarding-welkomstbericht voor nieuwe gebruikers.

Voordat je begint

Je moet een rol als projecteigenaar of administratief hebben.

Widgetkleur

Waarom het belangrijk is: Door de accentkleur van je widget af te stemmen op de primaire merkkleur van je product, voelt het als een ontworpen onderdeel van je interface, niet als een embedded tool. Dit is vooral belangrijk voor SaaS-producten waar merkconsistentie invloed heeft op de waargenomen kwaliteit.

Hoe je het instelt:

1. Klik op Kleur wijzigen. Het kleurenpalet opent.
2. Selecteer een kleur uit de picker, of voer direct een hex-, RGB- of HSL-waarde in.
3. Klik op Opslaan.

Resultaat: Het widgetpictogram en de headerbalk worden direct bijgewerkt in de preview en op je live site nadat de volgende pagina is geladen.

Voorbeeld: Als je product als primaire blauwe kleur gebruikt #0057FF , zal het invoeren van die hex-waarde ervoor zorgen dat het widget-icoon perfect overeenkomt met je navigatiebalk en CTA-knoppen.

Widget-icoon

Waarom het belangrijk is: Het standaardpictogram is een generieke helpbubbel. Door het te vervangen door je logo of een aangepast pictogram geeft gebruikers het signaal dat deze widget bij jouw product hoort en niet bij een tool van derden — wat de doorklikpercentages verhoogt.

Hoe je het instelt:

1. Klik op het icoon Wijzigen.
2. Kies uit het tabblad Iconenset om een vooraf gebouwd pictogram te kiezen, of klik op Afbeelding invoegen om een aangepaste afbeelding te gebruiken:
   • Uit URL: Plak de afbeeldingslink en klik op Invoegen.
   • Vanaf apparaat: Klik op Upload een afbeelding en selecteer je bestand.
3. Klik op Opslaan.
4. Om terug te draaien, klik op Default.

Tip: Gebruik een vierkante afbeelding met een transparante achtergrond (PNG, aanbevolen 64×64px of groter) voor het schoonste resultaat bij alle schermformaten.

Widgetpositie

Waarom het belangrijk is: De standaard rechtsonder positie werkt voor de meeste sites, maar sommige lay-outs hebben vaste navigatiebalken, cookiebanners of chatwidgets in die hoek. Herpositioneren voorkomt overlap en zorgt ervoor dat de widget altijd zichtbaar en toegankelijk is.

Hoe je het instelt:

1. Selecteer Links of Rechts om te kiezen aan welke kant van het scherm de widget verschijnt.
2. Voer waarden in in Zijafstand (horizontale afstand vanaf de rand) en Onderafstand (verticale afstand vanaf de bodem) in pixels.
3. Klik op Opslaan.

Voorbeeld: Als je live chat-widget rechtsonder staat met een marge van 20px, plaats dan je Knowledge Base-widget links met dezelfde onderafstand zodat beide toegankelijk zijn zonder overlap.

Welkomstbericht

Waarom het belangrijk is: De meeste gebruikers zullen een zwevend pictogram niet opmerken, tenzij iets hun aandacht trekt. Een welkomstbericht verschijnt als een chatbubbel boven het pictogram en fungeert als een zachte duwtje — vooral handig tijdens onboardingflows of na een nieuwe functielancering.

Hoe je het instelt:

1. Voer je bericht in in het veld voor welkomstbericht (maximaal 50 tekens).
2. Klik op Opslaan.

Voorbeelden van effectieve welkomstberichten:

• "Hulp nodig? Begin hier."
• "Nieuw met deze functie? We hebben gidsen."
• "Doorzoek onze kennisbank."

Wanneer kun je het overslaan: Als je widget is ingebed in een sterk taakgerichte UI (zoals een afrekenstroom), kan een welkomstbericht opdringerig aanvoelen. Laat het in die contexten leeg.

Widget verbergen

Waarom het belangrijk is: Als je de widget activeert via een aangepaste knop (bijvoorbeeld een "Help"-link in je navigatiebalk), wil je niet dat het standaard zwevende icoon ook verschijnt — dat zorgt voor twee instappunten en visuele rommel. Door het widget-icoon te verbergen, kun je precies bepalen waar en hoe de widget wordt gestart.

Hoe je het instelt:

1. Schakel de schakelaar voor de widget Verbergen in.
2. Klik op Opslaan.

Verberg de meest gezochte artikelen

Waarom het belangrijk is: De sectie "meest gezocht" toont trending artikelen wanneer de widget voor het eerst wordt geopend. Dit is handig voor algemene kennisbanken. Als je widget echter is beperkt tot een specifiek productgebied of workflow, kan het tonen van niet-gerelateerde populaire artikelen gebruikers verwarren.

Hoe je het instelt:

1. Schakel de schakelaar 'Meest gezocht artikelen verbergen ' in.
2. Klik op Opslaan.

Best practices

• Stem de widgetkleur af op de primaire CTA-kleur van je product voor een native gevoel.
• Als een andere widget (bijvoorbeeld live chat) rechtsonder staat, verplaats je de kennisbankwidget naar links met bijpassende onderafstand.
• Gebruik een aangepast pictogram met een transparante PNG-achtergrond voor brandconsistente resultaten.
• Laat het welkomstbericht leeg op pagina's met hoge intentie (afrekenen, formulieren indienen) waar afleiding de conversie belemmert.