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 CXone-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 Handleiding Handleiding-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 Guide Set 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 velden vindt u inGeneraltabblad

   Veld	Details
   Width (EM)	De breedte van de widget Guide in ems. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. Voor de beste resultaten selecteert u een klantportalsjabloon waarvan u een voorbeeld wilt weergeven en vervolgens past u de breedte van de widget Guide aan, indien nodig.
   Height (EM)	De hoogte van de widget Guide in ems. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. Voor de beste resultaten selecteert u een klantportalsjabloon waarvan u een voorbeeld wilt weergeven en vervolgens past u de hoogte van de widget Guide aan, indien nodig.
   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 velden vindt u inGuide 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 em om te gebruiken voor klantportalsjablonen. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. 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 subkoptekst in em om te gebruiken voor klantportalsjablonen. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. 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 velden vindt u inKnowledge 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 velden vindt u inProactive Offertabblad

   Veld	Details
   Heading Font Size (EM)	De lettergrootte in em om te gebruiken voor de koptekst van een proactieve aanbieding. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. 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 em om te gebruiken voor de hoofdtekst in een proactieve aanbieding. Uw em-standaardgrootte is gebaseerd op CSS-instellingen of browserinstellingen. 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.

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.

View a short video on creating channel buttons.

1. Klik op de app-kiezer en selecteerACD.

2. Ga naar Digital > Points of Contact Digital.

3. Klik onder General channel features op Guide.

4. Scrol omlaag naar het gedeelte Buttons en klik op Add button.

   Afbeelding weergeven

   

5. Voer een Name voor de knop in.

6. Klik op Choose File om de Icon voor de knop te uploaden.

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

7. Stel in het veld Theme color indien nodig een achtergrondkleur voor de kanaalknop in.

   Laat dit veld leeg om gebruik te maken van de standaardachtergrondkleur van de kanaalknop, die voor de branding is ingesteld.

   Als u een transparante achtergrond wilt gebruiken voor de knop, selecteert u Transparent background.

8. 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 selecteerACD.

2. Ga naar Digital > Points of Contact Digital.

3. Klik onder General channel features op Guide.

4. Klik op Translations.

5. Klik op Add 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	Kies een Fallback taal die moet worden gebruikt als er geen vertaling voor een bepaald label is.

6. Klik op Save. De standaardlabels van Guide worden weergegeven.
7. 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.
8. 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.

9. Klik op Opslaan.

De labels voor een taal bewerken

1. Klik op de app-kiezer en selecteerACD.

2. Ga naar > Points of Contact Digital.

3. Klik onder General channel features op Guide.

4. Klik op Translations.

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

6. 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.

7. 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.