Chatkanalen aanpassen met JavaScript

U kunt livechat 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 Mpower 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.

Bekijk voorbeelden

The Jungle, een dochteronderneming van Classics, Inc., runt een cadeauwinkel als onderdeel van haar website. De beheerder, Mowgli Kipling, heeft de volgende API-aanroepen ingesteld om zijn chatagenten te helpen met het werken met klanten in cadeauwinkels:

• Aangepaste bezoekersvariabelen verzamelen informatie over de kleuren van artikelen die de contactpersoon bekijkt op de pagina's van de cadeauwinkel. Deze informatie is dan beschikbaar voor de agent zodra de klant een chat start.
• Voor elk product waarop een contactpersoon klikt, worden aangepaste bezoekersgebeurtenissen geregistreerd. Wanneer een klant op vijf producten heeft geklikt, maar niet op de knop Kopen, wordt een proactief popup-venster met de tekst "Moeite met beslissen?" geopend om de klant de chatoptie aan te bieden.

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

• Chatgedrag: Pas aan 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: Pas de informatie aan die 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 zinnen: Definieer aangepaste velden of pas veldlabels aan. U kunt ook alternatieve tekst instellen voor de geautomatiseerde berichten die klanten te zien krijgen.
• Uiterlijk van het chatvenster: Pas het uiterlijk van het chatvenster aan. U kunt bijvoorbeeld de grootte en de positie van het venster op de webpagina wijzigen.
• Aangepaste CSS: Definieer aangepaste CSS voor het chatvenster.
• Proactieve acties: Pas de ervaring aan met proactieve acties op basis van het klantgedrag.
• Andere 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.

            cxone('chat','enableChatAlwaysOnline');

            brandembassy('enableChatAlwaysOnline');

Voeg JavaScript-oproepen toe aan een chatkanaal

Als u dit nog niet hebt gedaan, stelt u een livechat of chatberichten-kanaal in. 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.

1. Klik op de app-kiezer en selecteerACD.

2. Ga naar Digital > Contactpunten Digitaal.

3. Klik onder Jouw kanalen op Websitescript.
4. Kopieer de JavaScript-code van de pagina en plak deze in een tekstbewerkingsprogramma zoals Notepad++. Vergeet niet de openende en afsluitende <script>-tags op te nemen.

5. In Notepad++, net boven de afsluitende</script> tag van de code die u hebt geplakt, voegt u de JavaScript aanroepen toe die u wilt gebruiken. 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 bekijken

   

6. Kopieer en plak het hele script, inclusief de openings- en sluitingstekst.<script> tags, into the header of a page of your website.

7. Bezoek de aangepaste pagina en stuur testchatberichten om te controleren of uw aanpassingen werken zoals bedoeld.

8. Wanneer het volledig is getest en werkt zoals verwacht, kopieer je het definitieve script naar de header van elke pagina waar de chatwidget moet staan.

Chatgedrag JavaScript Oproepen

Met de oproepen in deze sectie 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

Geeft het chatvenster weer alsof er agenten beschikbaar zijn, zelfs als er geen agenten online zijn.

            brandembassy('chat','enableChatAlwaysOnline');

Aangepaste velden van vorige chat behouden

U kunt kiezen of u wilt dat aangepaste velden behouden blijven of uit de lokale opslag worden verwijderd nadat de interactie is gestart. 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');

Postbackgegevens verzenden vanuit Adaptive Card

Studio acties en bots kunnen Adaptive Cards naar contactpersonen verzenden via chat. Digitale chat kan alleen postback-gegevens naar Studio of een bot verzenden als u een handler inschakelt. Een handler van Adaptive Cards functioneert in de bot- of Studio-actie en zorgt voor het beheren en beantwoorden van betrokkenheidsinteracties met Adaptive Cards. De handler wordt geactiveerd bij gebruikersinteractie met componenten van een Adaptive Card, 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 Adaptive Card voor rapportagedoeleinden kunnen opslaan. U kunt de standaardhandler ook overschrijven met een opdracht voor een aangepaste handler.

Voorbeeld bekijken

							<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 Adaptive Card handler-opdracht toevoegen:

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

Bericht verzenden:

            sendMessage(messageContent: MessageContent)

Aangepaste handler-opdracht 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 binnenkomend bericht bekijken

							{
							...,
							"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 uitgaand bericht bekijken

							{
							"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-stroom. 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');

Vooraf ingevulde velden voor enquêtes voorafgaand aan contact instellen

            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

Automatisch een nieuwe chatsessie starten

Maakt een nieuwe chatbericht 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 er nog geen 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.

Als u automatisch een chatsessie start, wordt het precontact-enquêteformulier 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.

Routing voor automatisch gestarte cases vindt plaats volgens de routingwachtrijen 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.

Als u automatisch een chatsessie wilt starten, gebruikt u deze aanroepen in de weergegeven volgorde:

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 inschakelen

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

Om dit gedrag mogelijk te maken, moet u opgeven hoe de chatgegevens worden opgeslagen. Je hebt twee opties:

• localStorage: Gegevens blijven in de browser bewaard 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 opgeslagen voor het individuele tabblad of venster en vervolgens 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.

Om gelijktijdige chatsessies mogelijk te maken, voegt u de sleutel storageType toe met de waarde sessionStorage, zoals in het volgende voorbeeld wordt getoond.

Als u de optie localStorage gebruikt en de gespreksgeschiedenis toch wilt wissen, kunt u een gebeurtenislistener maken die de customerID verwijdert nadat de chat is beëindigd.

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

Gesprekgeschiedenis wissen

Verwijdert de gespreksgeschiedenis nadat een chatgesprek is beëindigd. 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') 
		); 
	} 
}); 

Pas het eerste geautomatiseerde contactbericht aan

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.

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

• Overschrijf de standaardknoptekst.

                brandembassy('sendFirstMessageAutomatically', 'Hello');

• Verander het beginbericht dynamisch.

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

• Wijzig de berichttekst op de Vertalingenpagina.

Maak het eerste geautomatiseerde bericht zichtbaar voor contactpersonen

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

            brandembassy('hideFirstSentMessage', false);

Casecreatie vertragen

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 Digital Experience configureren om te wachten op het eerste bericht van de contactpersoon voordat een case wordt gemaakt met behulp van deze aanroep:

            brandembassy('sendFirstMessageAutomatically', false);

Spelmodus inschakelen

Hiermee kunnen contactpersonen 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 pop-up. 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'

Chatinformatie JavaScript Oproepen

Met deze oproepen kunt u de informatie aanpassen die beschikbaar is voor contactpersonen tijdens een chatsessie.

Klantidentiteits-ID ophalen

Geeft de unieke identificatie van de klant in de chat terug.

            brandembassy('getCustomerIdentityId');

Precontact-enquêteformulier verbergen

Het precontact-enquêteformulier wordt weergegeven aan het begin van een chatbericht 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 contactpersoon weten hoe snel een agent hem kan helpen, op basis van waar hij zich in de wachtrij van de agent bevindt. 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');

Chatmeldingsgeluid dempen

Hiermee kunt u het chatmeldingsgeluid 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');

Browsertaalvertalingen overschrijven

Overschrijft de browsertaalinstellingen van de gebruiker of een aangepaste landinstelling door een ingestelde 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');

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

Afbeelding van agent instellen

Wijzigt dynamisch de afbeelding van de agent die in het chatvenster wordt weergegeven. 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');

Klant-ID instellen

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

            brandembassy('setCustomerId', 'customer_id');

Klantnaam instellen

Klantnaam is een veld op het precontact-enquêteformulier, dat contactpersonen moeten invullen voordat ze met een agent kunnen chatten via een chatberichtenkanaal Een asynchrone chatfunctie, waarmee klanten op elk gewenst moment een chatbericht kunnen sturen en dan op een antwoord wachten.. Deze aanroep vult het veld dynamisch in.

            brandembassy('setCustomerName', 'Elizabeth');

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

Geef case-informatie weer

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 Transcript verzenden weergeven/verbergen

Als u de knop Transcript verzendenzichtbaar maakt, moet u het chatkanaal zo configureren dat contactpersonen het chattranscript naar zichzelf kunnen verzenden. Configureer deze optie voor Chatberichten of Live chat.

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

Systeemberichten weergeven/verbergen

Hiermee worden systeemberichten, zoals de toewijzingsgeschiedenis van agenten, weergegeven of verborgen.

            brandembassy('chat','hideSystemMessages');
brandembassy('showSystemMessages');

Gebruiksvoorwaarden

U kunt een document met gebruiksvoorwaarden beschikbaar stellen aan contactpersonen vanuit het chatvenster. 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 bij klikken kan de gebruiksvoorwaarden weergeven als:

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

Gebruik de CSS API-aanroepen die op deze pagina worden beschreven om het uiterlijk van de knop of het interne venster aan te passen.

Aangepaste velden, labels en zinnen

Aangepaste velden maken en invullen

De aangepaste velden die u met deze aanroep kunt gebruiken, zijn dezelfde als de velden 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.

Om de waarde van een aangepast veld voor een case te definiëren:

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

Om de waarde van een klantenkaartaangepast veld te definiëren:

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

Chatlabels en zinnen aanpassen

U kunt veel van de labels en zinnen aanpassen die digitale chatkanalen gebruiken, en ook de aanpassingen definiëren. Als u woordgroepen of schermlabels dynamisch wilt wijzigen, gebruikt u de onderstaande JavaScript-aanroepen.

Om één bericht of label te wijzigen:

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

Om meerdere berichten of labels te wijzigen:

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

Klik om de berichten en labels te bekijken die u kunt aanpassen.

Curtains geven variabelen aan die het systeem vervangt door werkelijke gegevens. {caseNumber} wordt bijvoorbeeld vervangen door het casenummer van de chatsessie van de klant.

Sleutel	Standaardlabel/Bericht
allAgentsForQueueAreBusy	Alle agenten die aan uw wachtrij zijn toegewezen, 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	Begin chat!
annuleren	Annuleren
caseNumber	Case #{caseNumber}
wijzigen	Wijzigen
chattedWith	Je hebt zojuist een chat gehad met
commonErrorText	Er is een onverwachte fout opgetreden. Probeer het later opnieuw.
klaar	Klaar
dragAndDropDropzone	Sleep en zet bestanden hier neer om ze te verzenden
dragAndDropDropzoneRejected	Onmogelijk om bestand te uploaden :(
EmailLabel	E-mail
endChat	Chat beëindigen
endChatTitle	Weet u zeker dat u dit gesprek wilt beëindigen?
endGame	Einde game
einde	Chat beëindigen...
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
laden	Laden ...
loadPreviousButton	Laad eerdere conversaties
messageLabel	Message
networkErrorText	Er is een netwerkfout opgetreden. Probeer het opnieuw.
newCase	Nieuwe case
noAgentOnlineForQueue	Er is momenteel geen agent beschikbaar voor uw wachtrij.
offline	Offline
offlineFormDesc	We zijn op dit moment niet bereikbaar
offlineFormSuccessMsgHead	Bedankt!
offlineFormSuccessMsgSub	Uw e-mail is succesvol verzonden. We zullen zo snel mogelijk reageren.
online	Online
onlineFormText	Om een chat te starten, vertel ons dan uw naam. Een van onze medewerkers zal u direct gaan helpen.
selecteer	Selecteer...
poweredBy	Powered by
preparingSession	Sessie voorbereiden...
replyBoxPlaceholder	Schrijf hier, druk op<enter> verzenden
opnieuw proberen	Opnieuw proberen
sendFileTextSize	Upload bestanden die kleiner zijn dan {filesize}
sendFileTextSupportedFormat	ondersteunde formaten.
sendFileTextSupportedFormatDesc	Afbeeldingen, Video's, {fileFormats}
sendMessageButton	Bericht verzenden
sendNewEmail	Nieuwe e-mail verzenden
sendTranscript	Transcript verzenden
snakeWaiting	Je staat {queue} in de wachtrij.
startChatInPopup	Vraag het ons!
startNewChat	Start een nieuwe chat
statusReconnecting	Probeer je verbinding te maken?
surveySuccesfullySent	Bedankt voor je feedback!
systemChattingWith	Je chat nu met {name}
topic	Topic
transciptSentFailed	Verzenden mislukt.
tranciptSuccesfullySent	Transcript succesvol verzonden!
tryAgainButton	Probeer het opnieuw
unexpectedError	Onverwachte fout.
validationInvalidEmail	E-mailadres is ongeldig
validationMandatory	Dit veld is verplicht
validationShorterName	Gebruik een kortere naam
validationShortMessage	Uw bericht is te kort
waiting	Waiting...
waitingDescription	Een van onze agenten zal binnenkort contact met u opnemen.
wachtendeVoettekst	Hit<spacebar> om het wachten te verkorten.
waitingForAgent	Wachten op agent...
waitingInQueue	Wachten op agent. U staat op nummer {queue} in de wachtrij.
yourNameLabel	Uw naam

Aangepaste velden vertalen

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

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

Chatvensterweergave-oproepen

U kunt het uiterlijk van het chatvenster wijzigen.

Pictogram Chat sluiten

Als dit op waar is ingesteld, wordt een X-pictogram weergegeven in het venster in plaats van de optie Chat beëindigen in het instellingenmenu.

            brandembassy('enableCloseIcon', true);

Toegewezen agent verbergen

            brandembassy('hideAssignedAgent');

Koptekst verbergen

            brandembassy('hideHeader');

Pop-ups verbergen

            brandembassy('hidePopups');

Klantavatar weergeven

            brandembassy('showCustomerAvatar');

De knop Verzenden weergeven

            brandembassy('chat','showSendButton');

Grootte

Past de breedte en hoogte van het chatvenster aan. Gebruik absolute of relatieve eenheden die door de CSS-specificatie worden ondersteund.

Volledige weergavemodus

Positie en offset

De setPositionX-aanroep definieert de linker- of rechterkant van het scherm als de startpositie. 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

Stel een tekenlimiet in voor het antwoordvak

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

Aangepaste CSS met gegevensselectoren

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

Gebruik deze JavaScript aanroep als referentie om aangepaste CSS met gegevensselectoren toe te voegen:

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

Beschikbare gegevensselectoren

• ACTIVITEITENBALK
• AGENT_BERICHT
• AGENT_BERICHTEN_BUBBLE
• AVATAR-
• INHOUD
• KLANTBERICHT
• KLANTBERICHTENBUBBEL
• SCHERMSCHEMA
• DROPDOWN_MENU
• KOP
• INVOER
• IS_TYPEN
• BOODSCHAPPER
• POP-UP
• VOORAFGAANDE ENQUÊTE
• VOORAFGAANDE ENQUÊTEBESCHRIJVING
• PRIMAIRE_KNOP
• ANTWOORDVAK
• SECONDAIRE_KNOP
• VERZENDKNOP
• TEKSTGEBIED
• TEKSTKNOP
• WIDGET
• VENSTER

Bekijk een voorbeeld van een aangepaste CSS API-aanroep

De volgende JavaScript-aanroep resulteert in chatballonnen met een zwarte achtergrond en witte tekst:

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

Deze afbeelding toont de resultaten van de voorbeeld-API-aanroep:

Proactieve acties

Met de oproepen in deze sectie kunt u proactief met klanten chatten op basis van hun gedrag.

Trigger uitvoeren

Start de Workflowautomatisering-trigger die is gedefinieerd door de trigger_id.

            brandembassy('executeTrigger', 'trigger_id');

Bezoekersgebeurtenis instellen

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

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

Bezoekersvariabele 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

Webbezoekerslabels

U kunt contactpersonen labelen die bepaald gedrag vertonen op uw website. Deze functie gebruikt tags uit Digital Experience en vereist Guide.

Een tag toevoegen aan een contactpersoon:

            brandembassy('assignTag', 'tagID');

Een tag verwijderen van een contactpersoon:

            brandembassy('removeTag', 'tagID');

Integreren met toepassingen van derden

Met de oproepen in deze sectie kunt u pushmeldingen ontvangen wanneer bepaalde chatgebeurtenissen plaatsvinden.

Actieve threads herkennen in het chatvenster

            brandembassy('getOngoingThreads');

Lopende contacten herkennen in het chatvenster

            brandembassy('getOngoingContact')

Pushmeldingen ontvangen voor specifieke chatgebeurtenissen

Klik om compatibele gebeurtenissen te bekijken

Gebruik een van de volgende invoergegevens om 'gebeurtenis' in de onderstaande voorbeelden te vervangen.

• CaseToRoutingQueueAssignmentGewijzigd

• Paginaweergave gemaakt

• Bericht aangemaakt

• Bericht afgeleverd aan gebruiker

• Bericht afgeleverd aan eindgebruiker

• Bericht Gezien Door Gebruiker

• Bericht Gezien Door Eindgebruiker

• BerichtGelezenGewijzigd

• BerichtToegevoegdInCase

• CaseInboxAssigneeGewijzigd

• CaseGemaakt

• Gevalstatus gewijzigd

• SenderTypingGestart

• SenderTypingEindigd

• MessageNoteGemaakt

• ContactRecipientsChanged

Om een melding voor één chatgebeurtenis te ontvangen:

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

Om een melding voor meer dan één chatgebeurtenis te ontvangen:

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

Om een melding voor alle chatgebeurtenissen te ontvangen:

            brandembassy('onAnyPushUpdate', callback);

Integreren met Android- of iOS-applicaties

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

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