Chatkanalen aanpassen met behulp van JavaScript

U kunt Live chatGesloten Een chatgesprek waarin agents en klanten in realtime communiceren. en ChatberichtenGesloten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten. aanpassen met JavaScript. CXone verschaft standaardaanpassingen en de corresponderende JavaScript-API-aanroepen. U moet deze API-aanroepen opnemen met de scripttag waardoor de chat aan uw website wordt toegevoegd. U kunt deze functies alleen toevoegen als u toegang tot de code van uw website hebt. Op deze pagina wordt uitgelegd welke JavaScript-coderegels u precies moet toevoegen en waar. U dient vertrouwd te zijn met JavaScript of webontwikkeling om de informatie op deze pagina goed te kunnen gebruiken.

U kunt de volgende aspecten van uw chatkanalenGesloten Een manier waarop contacten kunnen communiceren met agents of bots, zoals spraak (telefoon), e-mail, chat, social media enzovoort. aanpassen:

  • Chatgedrag: Bepaal hoe het chatvenster zich gedraagt. Dit gaat bijvoorbeeld over het openen en sluiten van het chatvenster of het inschakelen van de game-modus. In de game-modus kunnen klanten het spel Snake spelen terwijl ze wachten op een agent.
  • Chatinformatie: Bepaal welke informatie in het chatvenster wordt weergegeven. Dit zijn dingen zoals de naam van de klant, een foto van de agent of de huidige activiteitsstatus.
  • Aangepaste velden, labels en woordgroepen: Definieer aangepaste velden of pas veldlabels aan. U kunt ook alternatieve tekst instellen voor de geautomatiseerde berichten die klanten te zien krijgen.
  • Uiterlijk van chatvenster: Bepaal het uiterlijk van het chatvenster. U kunt bijvoorbeeld de grootte en de positie van het venster op de webpagina wijzigen.
  • Aangepaste CSS: Configureer aangepaste CSS voor het chatvenster.
  • Proactive actions: Pas de gebruikerservaring aan metproactieve acties op basis van klantgedrag.
  • Overige functies: Andere dingen die u kunt configureren zijn:

Momenteel gebruiken alle JavaScript-API's een Brand Embassy-laadprogramma voor elke aanroep. Bepaalde aanroepen ondersteunen een nieuw CXone-laadprogramma. Op den duur gaan alle JavaScript-API's voor chat het CXone-laadprogramma gebruiken in plaats van Brand Embassy.

JavaScript-aanroepen toevoegen aan een chatkanaal

Als u dit nog niet hebt gedaan, configureer dan nu een kanaal voor Live chat of Chatberichten. Test het kanaal om er zeker van te zijn dat het goed werkt met de standaardinstellingen, voordat u aanpassingen maakt. Test 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.

Kopieer het script en de API-aanroepen precies zoals ze worden weergegeven. Eventuele incorrecte wijzigingen kunnen ertoe leiden dat uw kanaal niet meer werkt.

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

  3. Klik onder Uw kanalen op Websitescript.
  4. Kopieer de JavaScript-code van de pagina en test en plak deze in een teksteditor zoals Notepad++. Vergeet niet de openende en afsluitende <script>-tags op te nemen.
  5. Voeg de gewenste JavaScript-aanroepen toe in Notepad++, 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 API-aanroepen die u kunt gebruiken, worden op deze pagina beschreven.

  6. Kopieer het hele 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 stuur test-chatberichten om te controleren of uw aanpassingen werken zoals bedoeld.

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

JavaScript-aanroepen voor chatgedrag

Met de aanroepen in dit gedeelte kunt u het gedrag van chatvensters wijzigen.

Chatvenster openen

Opent automatisch een chatvenster. Het standaardgedrag is dat chatvensters worden geopend wanneer een klant op het chatpictogram klikt.


            brandembassy('openChatWindow');

Chatvenster sluiten

Sluit automatisch een chatvenster. Het standaardgedrag is dat chatvensters worden gesloten wanneer een klant op het chatpictogram klikt.


            brandembassy('hideChatWindow');

Chat altijd online

Opent het chatvenster als er agents beschikbaar zijn, zelfs als er geen agents online zijn.


            brandembassy('enableChatAlwaysOnline');

Autorisatiecode instellen

Stelt een autorisatiecode in voor een OAuth-flow. OAuth is een authenticatieprotocol. Hiermee kunt u een applicatie namens u met een andere applicatie laten communiceren zonder uw wachtwoorden bekend te maken. Dit moet worden aangeroepen voordat de chat wordt geïnitialiseerd.


            brandembassy('setAuthorizationCode', 'authorization_code');

Automatisch een nieuwe chatsessie starten

Hiermee maakt u een nieuwe ChatberichtenGesloten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.- of Live chatGesloten Een chatgesprek waarin agents en klanten in realtime communiceren.-sessie, als deze nog niet actief is. Gebruik deze aanroep op webpagina's met minder dataverkeer, om te voorkomen dat uw agents worden overspoeld met chats.

Digital Engagement maakt een nieuwe case aan en voegt deze toe aan de wachtrij wanneer het eerste bericht van de chatsessie wordt verzonden. Een verborgen, geautomatiseerd bericht wordt namens de klant verzonden wanneer de chatsessie begint. Hierdoor hoeven klanten minder lang op een agent te wachten. Chatsessies beginnen wanneer een klant op het chatpictogram klikt om een conversatie te beginnen, of wanneer het chatvenster wordt geopend voor een automatisch gestarte chatsessie. Het eerste bericht is verborgen voor de klant, maar de agent kan het wel zien.

U kunt de tekst van het eerste, verborgen bericht aanpassen.

Wanneer een chatsessie automatisch wordt gestart, wordt de pre-contact vragenlijst overgeslagen. Daarom moet u andere methoden gebruiken om informatie over klanten te verzamelen. U kunt uw agents de informatie bijvoorbeeld handmatig laten invoeren in de klantkaart. U kunt ook klantauthenticatie configureren met behulp van een OAuth-integratie.

De routering voor automatisch gestarte cases vindt plaats volgens de routeringswachtrijenGesloten Routeringswachtrijen bepalen naar welke agent een case moet worden gestuurd. De systeembeheerder maakt routeringswachtrijen om cases te kunnen doorsturen naar agents met expertise op dit gebied. die zijn geconfigureerd in Digital Experience. Voor Live chat-sessies wordt in het chatvenster het bericht Wachten op beschikbare medewerker weergegeven als er geen agents beschikbaar zijn.

Om een chatsessie automatisch te starten, gebruikt u deze aanroepen in de onderstaande volgorde:


            brandembassy('openChatWindow');

brandembassy('autoStartSession');

Als u extra aanroepen aan het script toevoegt, moet autoStartSession altijd de laatste aanroep in het script zijn. Voorbeeld:


            // set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');

// open chat window so user can start to chat
brandembassy('openChatWindow');

// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');

Het eerste geautomatiseerde klantbericht aanpassen

Digital Engagement maakt een nieuwe case aan en voegt deze toe aan de wachtrij wanneer het eerste bericht van de chatsessie wordt verzonden. Een verborgen, geautomatiseerd bericht wordt namens de klant verzonden wanneer de chatsessie begint. Hierdoor hoeven klanten minder lang op een agent te wachten. Chatsessies beginnen wanneer een klant op het chatpictogram klikt om een conversatie te beginnen, of wanneer het chatvenster wordt geopend voor een automatisch gestarte chatsessie. Het eerste bericht is verborgen voor de klant, maar de agent kan het wel zien.

Het standaardbericht is de tekst op de knop waarop de klant klikt om de conversatie te starten. U kunt de tekst van het eerste geautomatiseerde bericht op drie manieren aanpassen:

  • De standaard knoptekst overschrijven.

                brandembassy('sendFirstMessageAutomatically', 'Hello');
  • Het oorspronkelijke bericht dynamisch aanpassen.

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

Het eerste geautomatiseerde bericht zichtbaar maken voor klanten

Als u wilt dat de klant het eerste geautomatiseerde bericht kan zien, voegt u deze aanroep toe aan uw script:


            brandembassy('hideFirstSentMessage', false);

Het maken van een case uitstellen

Digital Engagement maakt een nieuwe case aan en voegt deze toe aan de wachtrij wanneer het eerste bericht van de chatsessie wordt verzonden. Een verborgen, geautomatiseerd bericht wordt namens de klant verzonden wanneer de chatsessie begint. Hierdoor hoeven klanten minder lang op een agent te wachten. Chatsessies beginnen wanneer een klant op het chatpictogram klikt om een conversatie te beginnen, of wanneer het chatvenster wordt geopend voor een automatisch gestarte chatsessie. Het eerste bericht is verborgen voor de klant, maar de agent kan het wel zien.

U kunt instellen dat Digital Engagement wacht op het daadwerkelijke eerste bericht van de klant voordat er een case wordt aangemaakt. Daarvoor gebruikt u deze aanroep:


            brandembassy('sendFirstMessageAutomatically', false);

Game-modus inschakelen

Hiermee kunnen klanten het spel Snake spelen terwijl ze wachten op een agent.


            brandembassy('allowGameMode');

Geautomatiseerde tevredenheidsenquête

Een tevredenheidsenquête kan automatisch worden gedetecteerd en weergegeven in een popup. Zo kunnen deze enquêtes worden gedetecteerd en al dan niet worden weergegeven.


            brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

JavaScript-aanroepen voor chatinformatie

Met deze aanroepen kunt u de informatie aanpassen die beschikbaar is voor klanten tijdens een chatsessie.

Klant-ID ophalen

Retourneert de unieke identificatie van de klant in de chat.


            brandembassy('getCustomerIdentityId');

Pre-contact vragenlijst verbergen

De pre-contact vragenlijst wordt normaal gesproken geopend aan het begin van een ChatberichtenGesloten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.-sessie. Dit formulier verzamelt informatie over de klant, zoals de naam. Als u wilt, kunt u de pre-contact vragenlijst verbergen en het chatvenster laten verschijnen zodra een klant een chatsessie start.


            brandembassy('hidePreSurvey');

Wachtrijteller verbergen

De wachtrijteller laat een klant weten hoe snel er waarschijnlijk een agent beschikbaar zal zijn, op basis van de plaats waar de klant zich bevindt in de wachtrij van de agent. U kunt de wachtrijteller verbergen nadat het contact naar een agent is gerouteerd. Hierdoor kunnen agents klantkaarten uit hun inbox verwijderen zonder dat klanten dit merken.


            brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

De activiteitsstatus instellen

Hiermee wijzigt u het bericht in de activiteitenbalk. U kunt dit bijvoorbeeld gebruiken om uw responstijd voor een chatsessie aan te geven. Dit kan nuttig zijn omdat Chatberichten een asynchrone vorm van chatten zijn, dus klanten moeten soms wachten om van een agent te horen.


            brandembassy('setStatusMessage', 'We typically reply within 3 hours.');

De afbeelding van de agent instellen

Hiermee verandert u dynamisch de agentafbeelding die wordt weergegeven in het chatvenster. Digital Engagement gebruikt standaard de foto uit het profiel van de agent. Wanneer u deze aanroep in uw script opneemt, gebruikt u de afbeelding waarnaar wordt verwezen door de URL in het codefragment. Vervang de voorbeeld-URL door de URL van de afbeelding die u wilt gebruiken voor de chat.


            brandembassy('setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

De klant-ID instellen

Stelt een unieke identificatiecode in voor de klant in de chat.


            brandembassy('setCustomerId', 'customer_id');

De klantnaam instellen

Klantnaam is een veld in de pre-contact vragenlijst die klanten moeten invullen voordat ze gaan chatten met een agent via een ChatberichtenGesloten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.-kanaal. Deze aanroep vult het veld dynamisch in.


            brandembassy('setCustomerName', 'Elizabeth');

De datumnotatie instellen

Kan worden ingesteld op absolute datumnotatie (12/03/2035) of relatieve datumnotatie (vandaag, maandag).


            brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

Landinstellingen instellen

Hiermee stelt u de landinstellingen in voor vertalingen in het chatvenster.


            brandembassy('setLocale', 'locale');

Case-informatie weergeven

Alleen voor ChatberichtenGesloten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.-kanalen. Toont case-informatie aan het contact.


            brandembassy('showCaseInfo');

De knop Transcriptie verzenden tonen of verbergen

Als u de knop Transcriptie verzenden zichtbaar maakt, moet u het chatkanaal zodanig configureren dat contacten de chattranscriptie naar zichzelf kunnen sturen. Configureer deze optie voor Chatberichten of Live chat.


            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

Systeemberichten tonen/verbergen

Toont of verbergt systeemberichten, zoals de geschiedenis van de agenttoewijzingen.


            brandembassy('hideSystemMessages');
brandembassy('showSystemMessages');

Algemene voorwaarden

U kunt vanuit het chatvenster een document met Algemene voorwaarden beschikbaar stellen aan contacten. Deze functie voegt een knop toe aan het venster. U kunt het label en de stijl van de knop aanpassen en instellen wat er gebeurt wanneer contacten erop klikken. De actie On-click kan de Algemene voorwaarden weergeven via:

  • Een intern venster
  • Een externe link

            // Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');

Om het uiterlijk van de knop of het interne venster aan te passen, gebruikt u de CSS API-aanroepen die op deze pagina worden beschreven.

API-aanroepen voor aangepaste velden, labels en woordgroepen

Aangepaste velden maken en invullen

De aangepaste velden die u kunt gebruiken met deze aanroep zijn dezelfde als die u kunt gebruiken in klantkaarten. Als u deze aanroep gebruikt voordat u een chatvenster opent, worden de velden in het pre-contact formulier ingevuld met de gegevens die u in de JavaScript-aanroep opneemt.

Zo definieert u de waarde van een aangepast case-veld:


            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Zo definieert u de waarde van een aangepast veld voor een klantkaart:


            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Chatlabels en woordgroepen aanpassen

U kunt veel labels en woordgroepen die in de digitale chatkanalen worden gebruikt, aan uw wensen aanpassen en de aanpassingen definiëren. Als u woordgroepen of schermlabels dynamisch wilt wijzigen, gebruikt u de onderstaande JavaScript-aanroepen.

Zo kunt u één bericht of label wijzigen:


            brandembassy('setTranslation', 'key', 'your translation');

Zo kunt u meerdere berichten of labels wijzigen:


            brandembassy('setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

Aangepaste veld en vertalen

U kunt aangepaste velden die in het chatvenster worden weergegeven, vertalen.


            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

Aanroepen voor het uiterlijk van het chatvenster

U kunt het uiterlijk van het chatvenster aanpassen.

Pictogram Chatvenster sluiten

Indien ingesteld op true, wordt een X-pictogram in het venster weergegeven in plaats van de optie Chat beëindigen in het instellingenmenu.


            brandembassy('enableCloseIcon', true);

Toegewezen agent verbergen


            brandembassy('hideAssignedAgent');

Header verbergen


            brandembassy('hideHeader');

Popups verbergen


            brandembassy('hidePopups');

Klant-avatar tonen


            brandembassy('showCustomerAvatar');

De verzendknop tonen


            brandembassy('showSendButton');

Grootte

Hiermee kunt u de breedte en hoogte van het chatvenster aanpassen. Gebruik absolute of relatieve eenheden die door de CSS-specificatie worden ondersteund.


            brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

Volledige scherm-modus


            brandembassy('setFullDisplay');
// OR
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

Positie en offset

Met de setPositionX-aanroep stelt u de linker- of de rechterkant van het scherm in als de beginpositie. De aanroepen setOffsetX en setOffsetY bepalen hoeveel pixels het chatvenster horizontaal en verticaal wordt verplaatst vanaf het beginpunt.


            // set horizontal starting position
brandembassy('setPositionX', 'right');
													
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20

Maximum aantal tekent instellen voor antwoordvak


            brandembassy('setReplyBoxLimit', '280'); // default = null

API-aanroepen voor aangepaste CSS met gegevenskiezers

U kunt het uiterlijk van het chatvenster aanpassen door uw eigen CSS toe te voegen. Geef op welk gedeelte van het chatvenster u wilt opmaken met een data-selector-attribuut. De onderstaande vervolgkeuzelijst bevat alle componenten die u kunt selecteren met het data-selector-attribuut. Door middel van gegevenskiezers kunt u het gedeelte van het chatvenster instellen waarop u de aangepaste CSS wilt toepassen. Voeg uw opmaak tussen accolades toe achter de data-selector. U moet al uw CSS in één JavaScript-aanroep toevoegen.

Gebruik deze JavaScript-aanroep als voorbeeld om aangepaste CSS met gegevenskiezers (ofwel data-selectors) toe te voegen:


            brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 
	[data-selector="CONTENT"] {background: green !important}`);

Gebruik aangepaste CSS-componenten uitsluitend met het attribuut data-selector. Gebruik geen Class-selectors of andere onderdelen van de JavaScript-code, zoals in dit voorbeeld:

.Widget__Widget___1qQCf { background: red; }

Venstercomponenten kunnen uit meerdere geneste blokken bestaan. De componentkiezers in dit gedeelte gebruiken de naam van de root van elke component. Als u CSS wilt toepassen op een van de geneste blokken van een component, gebruikt u de Developer Console om de component te inspecteren, zodat u het juiste blok kunt selecteren.

Proactieve acties

Met de aanroepen in dit gedeelte kunt u proactief met klanten communiceren in een chat, gebaseerd op hun gedrag.

Trigger uitvoeren

Start de Workflowautomatisering-trigger die wordt gedefinieerd door trigger_id.


            brandembassy('executeTrigger', 'trigger_id');

Bezoekersgebeurtenis instellen

Slaat het gedefinieerde klantgedrag (de gebeurtenis) op voor rapportagedoeleinden. Wanneer deze aanroep wordt gebruikt met de CXone Mobile SDK, wordt event_type vervangen door custom_event_type.


            brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

Bezoekervariabele instellen

Slaat de gedefinieerde klantgegevens op voor rapportagedoeleinden.


            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

Conversie opslaan

Slaat het klantgedrag op als een conversie voor rapportagedoeleinden.


            brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

Webbezoekerstags

De inhoud van dit gedeelte heeft betrekking op een product of functie in Controlled Release (CR). Als u geen deel uitmaakt van de CR-groep en meer informatie wilt, neem dan contact op met uw CXone-accountmanager.

U kunt tags toevoegen aan contacten die op uw website bepaald gedrag vertonen. Deze functie gebruikt tags uit Digital Experience en vereist Handleiding.

Zo voegt u een tag toe aan een contact:


            brandembassy('assignTag', 'tagID');

Zo verwijdert u een tag uit een contact:


            brandembassy('removeTag', 'tagID');

API-aanroepen voor integratie met externe applicaties

Met behulp van de API-aanroepen in dit gedeelte kunt u pushmeldingen ontvangen wanneer bepaalde chatgebeurtenissen plaatsvinden.

Actieve threads in het chatvenster herkennen


            brandembassy('getOngoingThreads');

Doorlopende contacten in het chatvenster herkennen


            brandembassy('getOngoingContact')

Pushmeldingen ontvangen voor specifieke chatgebeurtenissen

Een melding ontvangen voor één chatgebeurtenis:


            brandembassy('onPushUpdate', 'event', callback);

Een melding ontvangen voor meerdere chatgebeurtenissen:


            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

Een melding ontvangen voor alle chatgebeurtenissen:


            brandembassy('onAnyPushUpdate', callback);

Integratie met Android- of iOS-applicaties

U kunt digitale chat integreren met Android- of iOS-apps. De native applicatie moet WebView gebruiken, waar de JavaScript-initialisatiecode is toegevoegd. Deze voorbeeldcode gebruikt de JavaScript-aanroepen op deze pagina om het uiterlijk en het gedrag van de chatfunctie te wijzigen:


            <script async type=”text/javascript”>
  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');

  //init of Livechat
  brandembassy(‘init’, BRAND_HASH);

  // hiding unwanted UI elements
  brandembassy('hideHeader');
  brandembassy('hidePopups');
 
  // stretching livechat to full width and height
  brandembassy('setFullDisplay');

  // Customer's name
  brandembassy('setCustomerName', 'CUSTOMER_NAME');

  // Other optional Custom Fields
  brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
    
  // Start Chat
  brandembassy('openChatWindow');
  brandembassy('autoStartSession');

</script>