Chatkanalen aanpassen met behulp van JavaScript

U kunt Live chat Een chatgesprek waarin agents en klanten in realtime communiceren. en Chatberichten 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 chatkanalen 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:
- De hostomgeving laten luisteren naar bepaalde gebeurtenissen.
- Digitale chatkanalen integreren met iOS- of Android-apps.
- OAuth-authenticatie inschakelen.

Momenteel ondersteunen alle JavaScript-API's een Brand Embassy-laadprogramma voor elke aanroep. Als u zelfstandige CXone-chat op uw website wilt gebruiken, ondersteunen al deze aanroepen tevens een nieuw CXone-laadprogramma. Op den duur gaan alle JavaScript-API's voor chat het CXone-laadprogramma gebruiken in plaats van Brand Embassy.

De structuur van de JavaScript-aanroep is afhankelijk van het laadprogramma dat u gebruikt. U kunt de twee structuren niet tegelijk gebruiken. Gebruik een van beide, afhankelijk van het laadprogramma dat u gebruikt.

Als u CXone Guide gebruikt om chat op uw website implementeren, gebruik dan het CXone-laadprogramma. Niet alle aanroepen op deze pagina worden in Guide ondersteund, maar in de CXone Guide-documentatie vindt u een overzicht van alle ondersteunde JavaScript-aanroepen.

Als u het CXone-laadprogramma gebruikt via digitale chat of Guide, dient u aanroepen met deze structuur te gebruiken:


            cxone('chat','enableChatAlwaysOnline');

Bij gebruik van het Brand Embassy-laadprogramma moeten aanroepen deze structuur hebben:


            brandembassy('enableChatAlwaysOnline');

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.

Klik op de app-kiezer en selecteer ACD.
Ga naar Digital > Digitale contactpunten.
Klik onder Uw kanalen op Websitescript.
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.
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.

Afbeelding weergeven
Kopieer het hele script, inclusief de openende en afsluitende <script>-tags, en plak dit in de header van een pagina op uw website.
Ga naar de gewijzigde pagina en stuur test-chatberichten om te controleren of uw aanpassingen werken zoals bedoeld.
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('chat','enableChatAlwaysOnline');

Aangepaste velden behouden van vorige chat

U kunt aangepaste velden naar wens behouden of na het initiëren van de interactie uit de lokale opslag verwijderen. Hierdoor kunt u selecteren welke aangepaste velden blijven verschijnen in alle interacties met een contact. 'field_id' heeft betrekking op de waarde van het veld Ident wanneer een aangepast veld wordt gemaakt.


        cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

Postback-gegevens verzenden van Adaptieve kaarten

Studio -acties en bots kunnen Adaptieve kaartens via chat naar contacten verzenden. Digitale chat kan alleen postback-gegevens naar Studio of een bot verzenden als u een handler inschakelt. Een handler van Adaptieve kaartens functioneert in de bot- of Studio-actie en zorgt voor het beheren en beantwoorden van betrokkenheidsinteracties met Adaptieve kaartens. De handler wordt geactiveerd bij gebruikersinteractie met componenten van een Adaptieve kaarten, bijvoorbeeld het klikken op een knop of het selecteren van een optie in een vervolgkeuzelijst. De handler decodeert de gebruikersinvoer en bepaalt het juiste antwoord of de juiste reactie. Voeg de standaardhandleropdracht en de sendMessage-opdracht toe zodat Studio of bots correct kunnen reageren of de gegevens van de Adaptieve kaarten voor rapportagedoeleinden kunnen opslaan. U kunt de standaardhandler ook overschrijven met een opdracht voor een aangepaste handler.

Voorbeeld weergeven


							<script>
								(function (i, s, o, r, g, v, a, m) {
								g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
								i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
								a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
								a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
								})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');

								cxone('init', '1032');
								cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
    
								cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
								let messageContent = {
								type: "TEXT",
								payload: {
								text: action.title
								},
								postback: action.id
								}
      
								chatSdkInstance.sendMessage(messageContent)
								});
							</script>

Standaard Adaptieve kaarten-handleropdracht:


            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

sendMessage-opdracht toevoegen:


            sendMessage(messageContent: MessageContent)

Opdracht voor aangepaste handler maken:


					{
					"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
					"acVerb": "null|string", // only if `verb` is provided in the Action
					"acActionId": "null|string" // only if id is provided in the Action
					"acData": { // `data` are provided in Action
					"firstName": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

Voorbeeld van inbound bericht weergeven


							{
							...,
							"messageContent": {
							"type": "TEXT",
							"payload": {
							"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
							},
							"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
							}
							}
					}

Voorbeeld van outbound bericht weergeven


							{
							"thread": {
							"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
							},
							"messageContent": {
							"type": "ADAPTIVE_CARD",
							"payload": {
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"type": "AdaptiveCard",
							"version": "1.4",
							"body": [
							{
							"type": "TextBlock",
							"text": "Present a form and submit it back to the originator"
							},
							{
							"type": "Input.Text",
							"id": "firstName",
							"label": "What is your first name?"
							},
							{
							"type": "Input.Text",
							"id": "lastName",
							"label": "What is your last name?"
							}
							],
							"actions": [
							{
							"type": "Action.Execute",
							"title": "Fire!",
							"data": {
							"_messageText": "Submitted something for you"
							}
							}
							]
							}
							}
					}

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 Chatberichten Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.- of Live chat 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 Experience 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 routeringswachtrijen 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. Bijvoorbeeld:


            // 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');

Gelijktijdige chatsessies toestaan

U kunt toestaan dat contacten meerdere chatsessies in dezelfde browser starten. Een contact dat deelneemt aan een actieve chat op één browsertabblad, kan dan een tweede chat beginnen in een nieuw browsertabblad of venster.

Als u dit gedrag wilt toestaan, moet u opgeven hoe de chatgegevens worden opgeslagen. U hebt twee opties:

localStorage: Gegevens blijven behouden in de browser nadat het tabblad of venster is gesloten. Dit is de standaardmethode voor opslag. Als meerdere chatsessies tegelijk open zijn op verschillende tabbladen, worden deze als één interactie beschouwd. Het chatgesprek en de chatervaring zijn op alle tabbladen hetzelfde.
sessionStorage: Gegevens worden voor elk individuele tabblad of venster opgeslagen, en dan gewist wanneer het tabblad of venster wordt gesloten. De gebruiker kan meerdere chatsessies maken op verschillende tabbladen of vensters. De chatsessie op elk tabblad wordt als een unieke interactie beschouwd.

Als u gelijktijdige chatsessies wilt toestaan, voegt u de sleutel storageType met de waarde sessionStorage toe, zoals weergegeven in het volgende voorbeeld.

Als u de optie localStorage gebruikt en toch de gespreksgeschiedenis wilt opschonen, maakt u een gebeurtenislistener die de customerID na afloop van de chat verwijdert.


brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

Gespreksgeschiedenis opschonen

U kunt de gespreksgeschiedenis na afloop van een chatgesprek verwijderen. Dit kan handig zijn als u gebruikmaakt van de standaardopslagoptie van de chat: localStorage. Met deze opslagoptie blijven gegevens zelfs na het sluiten van de browserinstanties bewaard. In dit geval kunt u de gespreksgeschiedenis specifiek verwijderen door de customerID in de lokale opslag te wissen. In het volgende voorbeeld wordt een gebeurtenislistener gemaakt om te luisteren naar de caseStatusChanged-gebeurtenis van de chat. Dit geeft aan dat een chatsessie is afgelopen. Hierna wordt de opdracht removeItem aangeroepen, waardoor de customerID uit de lokale opslag van de browser wordt verwijderd.


brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
});

Het eerste geautomatiseerde klantbericht aanpassen

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');

De berichttekst aanpassen op de pagina Vertalingen.

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

U kunt instellen dat Digital Experience 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 Chatberichten 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');

Geluid van chatmeldingen uitschakelen

Met de aanroep muteAudioNotification kunt u het geluid van chatmeldingen uitschakelen. Standaard is het geluid van chatmeldingen ingeschakeld. Dit moet worden geconfigureerd ongeacht andere chatgeluidinstellingen. U kunt de waarde wijzigen in 'false' om het geluid van chatmeldingen weer in te schakelen.


            brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');

Vertalingen in browsertaal opheffen

U kunt de browsertaalinstellingen van een gebruiker, of een aangepaste landinstelling overschrijven met een vaste vertaling. Zo kunt u bijvoorbeeld zorgen dat bepaalde tekst altijd in het Engels verschijnt, ongeacht de taalinstellingen van de browser van het contact.


            brandembassy('init', 'brandId', 123, 'locale');

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 Experience 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 Chatberichten 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 Chatberichten 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('chat','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 oproep, zijn dezelfde als die u kunt gebruiken in Klantenkaart. 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 klantenkaart:


            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'
});

Klik hier voor een overzicht van de berichten en labels die u kunt aanpassen.

Accolades worden gebruikt om variabelen aan te geven, die door het systeem worden vervangen door werkelijke gegevens. {caseNumber} wordt bijvoorbeeld vervangen door het casenummer van de chatsessie van de klant.

Sleutel	Standaardlabel/bericht
allAgentsForQueueAreBusy	Al onze agenten die zijn toegewezen aan uw wachtrij, zijn momenteel bezet. Er {queue, plural,one {is} other {zijn}} <strong>{queue, number}</strong> {queue, plural, one {persoon} other {anderen}} voor u in de wachtrij.
beginButton	Start de chat!
cancel	Annuleren
caseNumber	Case {caseNumber}
change	Wijzigen
chattedWith	U hebt gechat met
commonErrorText	Er is een onverwachte fout opgetreden. Probeer het later opnieuw.
done	Gereed
dragAndDropDropzone	Sleep hier bestanden om ze te versturen
dragAndDropDropzoneRejected	Bestand uploaden is mislukt :(
EmailLabel	E-mail
endChat	Chat beeindigen
endChatTitle	Weet u zeker dat u dit gesprek wilt beëindigen?
endGame	Einde game
ending	Chat wordt beëindigd...
fileSendingFailed	Bestand verzenden mislukt
getTranscriptDescription	Stuur een transcriptie van dit gesprek naar het volgende e-mailadres:
getTranscriptLink	Chattranscriptie ophalen
invalidToken	Ongeldig token
ipAddressBlocked	IP-adres is geblokkeerd
loading	Laden...
loadPreviousButton	Vorige gesprekken laden
messageLabel	Bericht
networkErrorText	Er is een netwerkfout opgetreden. Probeer het opnieuw.
newCase	Nieuwe zaak
noAgentOnlineForQueue	Er is momenteel geen vertegenwoordiger beschikbaar voor uw wachtrij.
offline	Offline
offlineFormDesc	We zijn momenteel niet beschikbaar
offlineFormSuccessMsgHead	Hartelijk dank!
offlineFormSuccessMsgSub	Uw e-mail is verzonden. We zullen zo snel mogelijk reageren.
online	Online
onlineFormText	Mogen wij uw naam weten, voordat we de chat starten? Een van onze medewerkers zal u direct gaan helpen.
pleaseSelect	Selecteren a.u.b...
poweredBy	Powered by
preparingSession	Sessie voorbereiden...
replyBoxPlaceholder	Schrijf hier uw bericht, druk op <enter> om te verzenden
retry	Probeer opnieuw
sendFileTextSize	Upload een bestand van maximaal {filesize}
sendFileTextSupportedFormat	Ondersteunde bestandsindelingen.
sendFileTextSupportedFormatDesc	Afbeeldingen, video's, {fileFormats}
sendMessageButton	Bericht verzenden
sendNewEmail	Nieuwe e-mail verzenden
sendTranscript	Afschrift verzenden
snakeWaiting	U staat op nummer {queue} in de wachtrij.
startChatInPopup	Vraag het ons!
startNewChat	Start een nieuwe chat
statusReconnecting	Poging om verbinding te maken...
surveySuccesfullySent	Bedankt voor uw feedback!
systemChattingWith	U bent aan het chatten met {name}
topic	Onderwerp
transciptSentFailed	Verzenden is mislukt.
transciptSuccesfullySent	Transcript is verzonden!
tryAgainButton	Probeer het opnieuw
unexpectedError	Onverwachte fout.
validationInvalidEmail	E-mailadres is niet geldig
validationMandatory	Dit veld is verplicht
validationShorterName	Gebruik een kortere naam a.u.b.
validationShortMessage	Uw bericht is te kort
waiting	Wachten...
waitingDescription	Een van onze vertergenwoordigers zal met u spreken.
waitingFooter	Druk op <spacebar> om de wachttijd te verkorten.
waitingForAgent	Wachten op medewerker...
waitingInQueue	Wachten op medewerker. U staat op nummer {queue} in de wachtrij.
yourNameLabel	Uw naam

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('chat','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('chat','setWindowWidth', '100%');
brandembassy('chat','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. Als u meerdere elementen wilt opmaken, moet u al uw CSS in één JavaScript-aanroep toevoegen. Als u dezelfde JavaScript-aanroep meermaals gebruikt, overschrijft de laatste JavaScript-aanroep alle voorgaande CSS. U kunt CSS ook rechtstreeks in CXone aanpassen.

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

Klik hier voor een lijst van compatibele gebeurtenissen

Gebruik een van de onderstaande items in plaats van 'event' in de voorbeelden verderop.

CaseToRoutingQueueAssignmentChanged
PageViewCreated
MessageCreated
MessageDeliveredToUser
MessageDeliveredToEndUser
MessageSeenByUser
MessageSeenByEndUser
MessageReadChanged
MessageAddedIntoCase
CaseInboxAssigneeChanged
CaseCreated
CaseStatusChanged
SenderTypingStarted
SenderTypingEnded
MessageNoteCreated
ContactRecipientsChanged

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>