De Guide-interface configureren

Guide gebruikt de standaardknoppen voor branding en kanalen, die u definieert om te bepalen hoe de Guide-widget op uw website eruitziet.

Best practices

• Selecteer in samenwerking met uw marketingafdeling geschikte kanaalknopafbeeldingen en brandingkleuren voor uw website.

• Gebruik overal op de website consistente kanaalknoppen en branding.

• Als u meerdere websites hebt, bepaal dan u of u unieke branding voor elke website moet definiëren.

• Als u de standaardkleur voor branding wilt aanhouden, stelt u de Theme color niet in bij het definiëren van knoppen of sjablonen.

• Als u de standaardkleur voor branding wilt overschrijven, kunt u verschillende kleuren instellen voor een specifieke knop of sjabloon. Houd rekening met het volgende:

  • Als u een Theme color voor een sjabloon instelt, wordt de instelling van de brandingkleur hierdoor overschreven.

  • Als u een Theme color voor een sjabloon en een Theme color voor een knop instelt, wordt de instelling van de sjabloon- en brandingkleur overschreven door de knopkleur.

• Voor geavanceerde styling kunt u de Guide-API's gebruiken of samen met uw Accountmanager een look en feel op maat creëren.

Branding creëren

Met branding wordt ingesteld welke kleuren standaard moeten worden gebruikt voor sjablonen, knoppen en proactieve aanbiedingen. Guide biedt de Default-branding die u naar wens kunt aanpassen. U kunt zo nodig meerdere brandings maken. Als u bijvoorbeeld Guide-sjablonen op verschillende websites wilt aanbieden, kunt u voor elke website unieke branding gebruiken. Gebruik bij het definiëren van de regel voor het weergeven van een sjabloon of proactieve aanbieding de Set Guide Branding-actie om te bepalen welke branding moet worden gebruikt.

1. Klik op de app-kiezer en selecteerGuide.

2. Klik op Branding.

3. Klik op New Branding.

4. Voer een unieke merknaam in voor Branding Title.

5. Stel Theme Color in op de primaire kleur om te gebruiken voor de widget Guide. Stel de kleur in door een hexadecimale waarde in te voeren of op de kleurkiezer te klikken om een kleur te selecteren.

   De Theme Color wordt gebruikt voor:

   • De achtergrondkleur van de koptekst.

   • De knop om te minimaliseren.
   • De achtergrond van de kanaalknop.

   Dit wordt gebruikt, tenzij:

   • Met een kanaalknop een themakleur wordt ingesteld die prioriteit heeft boven de branding-kleur.

   • Met een sjabloon een themakleur wordt ingesteld die prioriteit heeft boven de branding-kleur.

   • U meer branding-voorkeuren instelt dan de primaire instellingen. Als u bijvoorbeeld een knopkleur instelt voor proactieve aanbiedingen.

6. Stel Font Color in op de kleur die u wilt gebruiken voor tekst die wordt weergegeven in de widget Guide. De kleur die wordt gebruikt voor tekst in de kop en voor de pijl in de knoppen Minimaliseren en Terug.

   Voor ondersteuning van slechtzienden hanteert u een contrastratio van 4.5:1 tussen Theme Color en Font Color. Er zijn online tools beschikbaar voor het controleren van het contrast.

7. Optioneel kunt u de branding verder fijnstellen met de tabbladen General, Guide Template, Knowledge Base en Proactive Offer tabs.

   Meer informatie over deGeneraltabblad

   Veld	Details
   Width (EM)	De breedte van de Guide-widget in ems. De standaardbreedte is 23,125 ems.
   Height (EM)	De hoogte van de Guide-widget in ems. De standaardhoogte is 40 ems.
   Close Button Icon Color	De kleur om te gebruiken voor het pictogram om de widget te sluiten.
   Close Button Background Color	De achtergrondkleur om te gebruiken voor het pictogram om de widget te sluiten.

   Meer informatie over deGuide Templatetabblad

   Veld	Details
   Background Color	De achtergrondkleur om te gebruiken voor klantportalsjablonen.
   Font and Icon Color	De kleur van het lettertype en het pictogram om te gebruiken voor klantportalsjablonen.
   Heading Font Size (EM)	De kopgrootte, in ems, die moet worden gebruikt voor sjablonen voor klantenportals. Voor de beste resultaten selecteert u een klantportalsjabloon waarvan u een voorbeeld wilt weergeven en vervolgens past u de lettergrootte van de koptekst aan, indien nodig.
   Subheading Font Size (EM)	De lettergrootte van de subkop, in ems, die moet worden gebruikt voor sjablonen voor klantenportals. Voor de beste resultaten selecteert u een klantportalsjabloon waarvan u een voorbeeld wilt weergeven en vervolgens past u de lettergrootte van de subkoptekst aan, indien nodig.

   Meer informatie over deKnowledge Basetabblad

   Veld	Details
   Background Color	De achtergrondkleur om te gebruiken bij het bekijken van artikelen uit de kennisbank.
   Font and Icon Color	De kleur van het lettertype en pictogram om te gebruiken bij het bekijken van artikelen uit de kennisbank.

   Meer informatie over deProactive Offertabblad

   Veld	Details
   Heading Font Size (EM)	De lettergrootte, in ems, die moet worden gebruikt voor een proactieve aanbiedingskop. Voor de beste resultaten bekijkt u de voorbeeldafbeelding van de proactieve aanbieding en past u de lettergrootte van de koptekst aan, indien nodig.
   Body Text Font Size (EM)	De lettergrootte, in ems, die moet worden gebruikt voor de hoofdtekst in een proactief aanbod. Voor de beste resultaten bekijkt u de voorbeeldafbeelding van de proactieve aanbieding en past u de lettergrootte van de hoofdtekst aan, indien nodig.
   Header Color	De kleur om te gebruiken voor het koptekstgebied van de proactieve aanbieding.
   Background Color	De kleur om te gebruiken voor de achtergrond van de proactieve aanbieding.
   Font Color	De lettertypekleur die voor de proactieve aanbieding moet worden gebruikt. Deze bevat de koptekst en hoofdtekst.
   Primary Button Background and Font Color	Achtergrond- en letterkleur voor de knop van een primaire oproep tot actie in proactieve aanbiedingen.
   Secondary Button Background and Font Color	Achtergrond- en letterkleur voor secundaire knoppen in proactieve aanbiedingen.
   Position on Mobile	Of de proactieve aanbieding moet worden weergegeven in Top of Bottom van het scherm op een mobiel apparaat.

8. Bekijk een voorbeeld van de branding-instellingen door een sjabloon te selecteren in de vervolgkeuzelijst aan de rechterkant van de pagina. Of klik op het tabblad Proactive Offer om een voorbeeld van branding voor proactieve aanbiedingen weer te geven. Als u deze instellingen aanpast, wordt er aan de rechterkant een voorbeeld weergegeven.

9. Klik op Default om dit in te stellen als de standaard-branding. Wanneer u een branding als standaardbranding instelt, wordt deze toegepast op alle bestaande en nieuwe sjablonen.

10. Klik op Save.

Werken met EMS

Guide gebruikt ems om de grootte van interface-elementen te specificeren. Met EMS kunt u de grootte van interface-elementen op verschillende apparaten aanpassen. De standaardgrootte van een em in Guide is 13 pixels. U kunt dit wijzigen met behulp van de setFontSize API.

Kanaalknoppen maken

Maak een knop voor elk kanaal Een manier waarop contacten kunnen communiceren met agents of bots, zoals spraak (telefoon), e-mail, chat, social media enzovoort. dat u in Guide wilt aanbieden. Wanneer de knoppen zijn gemaakt, koppelt u deze aan de toegangspunten. U kunt de knop bij het definiëren van een sjabloon overschrijven door een andere knop voor het toegangspunt in te stellen.

1. Klik op de app-kiezer en selecteerGuide.

2. Klik op Buttons. De pagina Knoppen wordt weergegeven, met een overzicht van alle knoppen die u eerder hebt gemaakt.

   Afbeelding weergeven

   

3. Klik op New Button.

4. Voer een Title voor de knop in.

5. Klik op Upload om de Icon voor de knop te uploaden.

   Pictogramafbeeldingen moeten kleiner zijn dan 50 kB en SVG-bestanden worden aanbevolen.

6. Stel een voorkeur in voor de knop.Background

   • Selecteer Solid om een achtergrondkleur voor de kanaalknop te gebruiken. Laat het veld Theme color leeg om de standaardachtergrondkleur voor de kanaalknop voor het merk te gebruiken. Of gebruik de kleurenkiezer om een andere kleur te selecteren als achtergrondkleur voor de knop. Stel de kleur in door een hexadecimale waarde in te voeren of op de kleurkiezer te klikken om een kleur te selecteren.

   • Selecteer Transparent om een transparante achtergrond voor de knop te gebruiken.

7. Klik op Save.

Taalvarianten toevoegen voor vertaling

U kunt aangepaste taalvarianten voor gebruik met Guide maken. Bovendien kunt u de labels voor elementen van de Guide-gebruikersinterface bewerken.

Een aangepaste taal toevoegen

1. Klik op de app-kiezer en selecteerGuide.

2. Klik op Localization.

3. Klik op New Language om een nieuwe taal toe te voegen.

   Meer informatie over de velden in deze stap

   Veld	Details
   Name	Voer een naam in voor de taal.
   Language	Selecteer de Language in de vervolgkeuzelijst.
   Country	Selecteer de Country in de vervolgkeuzelijst.
   Fallback	Selecteer een Fallback taal die u wilt gebruiken als er geen vertaling is voor een bepaald label.

4. Klik op Save. De standaardlabels van Guide worden weergegeven.
5. Voer voor elke Translation Key een Translation Value in. Dit is de string die bezoekers in de Guide-widget te zien krijgen. U kunt de Translation Key voor de standaardlabels van Guide niet wijzigen.
6. Klik onderaan de pagina op Toevoegen om nieuwe vertaalsleutels te maken. Stel de Translation Key en de Translation Value in. U kunt de Translation Key wijzigen voor nieuwe labels die u maakt. Als u nieuwe vertaalsleutels toevoegt, dient u vertaalde waarden op te geven in alle talen die u bezoekers aanbiedt.

7. Klik op Opslaan.

De labels voor een taal bewerken

1. Klik op de app-kiezer en selecteerGuide.

2. Klik op Localization.

3. Klik op Edit naast de taal die u wilt bewerken.

4. Blader naar het gewenste label en werk de Translation Value bij. U kunt het knoplabel voor het starten van een chat bijvoorbeeld van Begin Chat in Start Chat wijzigen.

5. Klik op Save.

Werken met een Guide-widget

Bij het werken met een Guide-widget gebruiken bezoekers hun muis of toetsenbord om tussen knoppen te navigeren. Toetsenbordnavigatie is beperkt voor bezoekers die een Mac met de Safari- of Firefox-browser gebruiken, tenzij deze optie in de browser is ingeschakeld. Bij gebruik van de Chrome-browser werken de toetsen standaard op de gebruikelijke manier.