Guide aanpassen met behulp van API's

Als u Handleiding wilt gebruiken voor uw website, kunt u Handleiding eenvoudig insluiten op elke websitepagina waar u een betrokkenheidsinteractie wilt aanbieden.

Als u bekend bent met webontwikkeling, en de weergave en het gedrag van de Handleiding-widget wilt aanpassen, kunt u dit echter doen door APIGesloten Met API's kunt u bepaalde functies automatiseren door uw CXone-systeem te koppelen aan andere software die binnen uw organisatie wordt gebruikt.-aanroepen van de JavaScript-code te gebruiken. U kunt het volgende wijzigen:

De werking van Handleiding

De Handleiding-widget is een webmodule die door het CXone-laadprogramma op uw website wordt geladen. De webmodule bevat een JavaScript-applicatie die met het Svelte-framework is gemaakt. De applicatie gebruikt elementaire statusopslagplaatsen voor het bijhouden van de Handleiding-configuratie, de actieve sjabloon, de actieve chatstatus, de UI-status enzovoort. De waarden van deze statusopslagplaatsen bepalen wat de bezoeker te zien krijgt.

Als u Handleiding op een pagina van uw website insluit en een bezoeker die pagina opent, haalt Handleiding de configuratie op die specifiek is voor uw tenant. Hierdoor wordt een JSON-resultaat met regels, knoppen, toegangspunten, vertalingen, verwijzingen naar artikelen en schakelopties geretourneerd. Vervolgens wordt de engine voor gebundelde regels gebruikt om de regels en voorwaarden te verwerken die ertoe kunnen leiden dat een sjabloon of proactief aanbod op de pagina verschijnt.

Handleiding gebruikt lokale en sessieopslag om bezoekersgegevens te beheren tussen het laden en herladen van een pagina. Hierdoor kan Handleiding ondersteuning van domeinoverschrijding in ondersteunde browsers bieden. Het betekent bovendien dat Handleiding geen browsercookies ondersteunt.

Test Guide-aanpassingen in een testomgeving voordat u ze vrijgeeft in uw productieomgeving. Zo voorkomt u dat uw websitebezoekers last hebben van storingen. Bovendien weet u dan zeker dat uw aanpassingen werken zoals bedoeld.

JavaScript-aanroepen toevoegen

  1. Klik op de app-kiezer en selecteer ACD.
  2. Ga naar Digitaal > Digitale contactpunten.

  3. Klik onder Uw kanalen op Websitescript.
  4. Kopieer de JavaScript-code van de pagina en plak deze in uw code of een teksteditor. Vergeet niet de openende en afsluitende <script>-tags op te nemen.
  5. Voeg de JavaScript-aanroepen toe direct boven de afsluitende </script>-tag van de code die u hebt geplakt. In het onderstaande voorbeeld geeft een commentaarregel aan waar de aanroepen moeten worden ingevoegd.

    De Guide JavaScript-aanroepen die u kunt gebruiken, de Guide-API's voor chat en de Handleiding-API's voor rapportage worden verderop op deze pagina beschreven.

  6. Kopieer het volledige script, inclusief de openende en afsluitende <script>-tags, en plak dit in de header van een pagina op uw website.

  7. Ga naar de gewijzigde pagina en controleer of de Guide-aanpassingen goed werken.

  8. Wanneer het definitieve script volledig is getest en werkt zoals verwacht, kopieert u het naar de header van elke pagina waarop deze Guide-aanpassing moet worden weergegeven.

De Guide-widget aanpassen

Met deze aanroep kunt u aanpassen hoe de Guide-widget eruitziet en werkt.

De CSS aanpassen

Wijzigt de CSS-elementen voor de Guide-widget. Bijvoorbeeld:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');

Als u deze snippet wilt gebruiken, vervangt u GUIDE_ELEMENT door een waarde uit de volgende tabel en vervangt u de CSS-voorbeeldcode tussen accolades { } door uw aangepaste CSS-code:

Guide-interface

GUIDE_ELEMENT-waarden

Guide-widget en -knoppen
  • GUIDE_CHANNEL_BUTTON

  • GUIDE_CHANNEL_BACK_BUTTON

  • GUIDE_SINGLE_MENU_CLOSE_BUTTON

  • GUIDE_MULTIPLE_MENU_CLOSE_BUTTON

  • GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON

  • GUIDE_FRAME_CONTENT

  • GUIDE_CHANNEL_ICON

  • GUIDE_CHANNEL_MENU_ICON

Portals
  • PORTAL_HEADER_iCON

  • PORTAL_HEADER

  • PORTAL_TITLE

  • PORTAL_SUBTITLE

  • GUIDE_CHANNEL_BUTTON_1

  • GUIDE_CHANNEL_BUTTON_2

  • GUIDE_CHANNEL_BUTTON_3

  • GUIDE_CHANNEL_BUTTON_4

  • GUIDE_MENU_BUTTON

  • KB_WIDGET_TITLE

  • KB_WIDGET_SEARCHBAR

  • KB_SEE_MORE_BUTTON

  • PORTAL_BODY

  • KB_WIDGET

  • CHANNELS_WIDGET

Artikelen
  • KB_HEADER

  • KB_BODY

Chats en e-mails

  • PRECONTACT_SURVEY

  • BEGIN_CHAT

  • SEND_EMAIL

  • INPUT

  • TEXTAREA

  • DROPDOWN

  • TREE

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRECONTACT_SURVEY_ICON

  • TREE_POPUP_BACK_BUTTON

  • CLOSE_TREE_POPUP

  • CLOSE

Proactieve aanbiedingen

  • OFFER_CLOSE_BUTTON

  • OFFER_HEADER

  • OFFER_BODY

  • OFFER_BUTTON_1

  • OFFER_BUTTON_2

  • OFFER_BUTTON_3

Grootte van kanaalknoppen aanpassen

Stelt de grootte voor kanaalknoppen in. Voer een waarde in ems of pixels in. De standaardgrootte voor knoppen is 3 em.

cxone('guide', 'setButtonSize', '80px');

Offset voor kanaalknoppen aanpassen

Stelt de offsetwaarde voor kanaalknoppen in. Voer een waarde in ems of pixels in.

cxone('guide', 'setOffsetX', '48px');
cxone('guide', 'setOffsetY', '3em');

Guide-menu openen

Opent het Guide-knoppenmenu.

cxone('guide', 'openMenu');

Guide-menu sluiten

Sluit het Guide-knoppenmenu.

cxone('guide', 'closeMenu');

Tekengrootte wijzigen

Stelt de standaardtekengrootte voor de Guide-widget in. Voer een waarde in pixels in. De standaardtekengrootte is 13 pixels. De hier ingestelde waarde bepaalt de em-grootte die overal in Guide wordt gebruikt.

cxone('guide','setFontSize',12);

Hoogte van Guide-widget wijzigen

Stelt de hoogte van de Guide-widget in. Voer een waarde in ems of pixels in. De standaardhoogte is 40 em. De maximale hoogte is 40 rem.

cxone('guide','setDesiredGuideHeight','30em');

Breedte van Guide-widget wijzigen

Stelt de breedte van de Guide-widget in. Voer een waarde in ems of pixels in. De standaardbreedte is 23,125 em.

cxone('guide','setDesiredGuideWidth','608px');

Guide op volledige schermgrootte weergeven

U kunt Guide op volledige schermgrootte weergeven. Guide-inhoud verschijnt niet in de Guide-widget maar in een venster.

cxone('guide','setFullDisplay');

Bij weergave op volledige schermgrootte kunt u de knop Minimaliseren het beste verbergen. Hiervoor gebruikt u de volgende opdrachten:

cxone('guide','setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');

De pre-contact webvragenlijst voor chat weglaten

Met deze API kunt u Guide instrueren om een chat te beginnen zonder de pre-contact webvragenlijst weer te geven.

cxone('guide','hidePreSurvey');

Gebruik de chat-API's om waarden voor pre-contact webvragenlijsten vooraf in te stellen. U kunt ze ook opgeven als parameters voor de hidePreSurvey-API. Bijvoorbeeld:

cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');

Een toegangspunt direct weergeven

Met deze API kunt u een toegangspunt handmatig in een venster weergeven. De standaardknop voor het toegangspunt wordt gebruikt.

Deze API dient voor specifieke situaties waarin iemand handmatig een toegangspunt in een venster wil weergeven. Dit wordt in de regel niet aanbevolen, en de API dient niet in combinatie met Guide-betrokkenheidsregels te worden gebruikt.

Als u deze API wilt gebruiken, moet u de ID van het weer te geven toegangspunt doorgeven. U kunt de toegangspunt-ID ophalen door naast het toegangspunt op Bewerken te klikken en vervolgens het laatste gedeelte van de pagina-URL te kopiëren.

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');