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.
![Gesloten](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
The Jungle, een dochteronderneming van Classics, Inc, runt een cadeauwinkel als onderdeel van de website. De beheerder, Mowgli Kipling, heeft de volgende API-aanroepen geconfigureerd, waarmee zijn chatagents de klanten van de cadeauwinkel beter kunnen helpen:
- Aangepaste bezoekersvariabelen verzamelen informatie over de beschikbare kleuren van artikelen die een klant bekijkt op de webpagina's van de cadeauwinkel. Deze informatie is dan beschikbaar voor de agent zodra de klant een chat start.
- Aangepaste bezoekersgebeurtenissen worden geregistreerd voor elk artikel waarop een klant klikt. 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 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 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.
- Klik op de app-kiezer
en selecteer ACD.
-
Ga naar Digital Experience > 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.
-
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('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 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 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 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. 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');
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
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 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');
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 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('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'
});
![Gesloten](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
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 medewerkers voor uw wachtrij zijn momenteel bezet. Er {queue, plural, one {is} other {zijn}} <strong>{queue, number}</strong> {queue, plural, one {persoon} other {personen}} vóór 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 bestanden hierheen om ze te verzenden |
dragAndDropDropzoneRejected | Bestand uploaden is mislukt :( |
EmailLabel | |
endChat | Chat beëindigen |
endChatTitle | Weet u zeker dat u deze chat wilt beëindigen? |
endGame | Game beëindigen |
ending | Chat wordt beëindigd... |
fileSendingFailed | Bestand verzenden is mislukt |
getTranscriptDescription | Stuur een transcriptie van deze chat naar dit e-mailadres: |
getTranscriptLink | Chattranscriptie ophalen |
invalidToken | Ongeldig token |
ipAddressBlocked | IP-adres is geblokkeerd |
loading | Bezig met laden... |
loadPreviousButton | Eerdere chats laden |
messageLabel | Bericht |
networkErrorText | Er is een netwerkfout opgetreden. Probeer het opnieuw. |
newCase | Nieuwe case |
noAgentOnlineForQueue | Er is momenteel geen medewerker beschikbaar voor uw wachtrij. |
offline | Offline |
offlineFormDesc | We zijn momenteel niet beschikbaar |
offlineFormSuccessMsgHead | Hartelijk dank! |
offlineFormSuccessMsgSub | Uw e-mail is verzonden. We nemen zo snel mogelijk contact met u op. |
online | Online |
onlineFormText | Mogen wij uw naam weten, voordat we de chat starten? Een van onze medewerkers zal u direct gaan helpen. |
pleaseSelect | Maak uw keuze... |
poweredBy | Mogelijk gemaakt door |
preparingSession | Sessie wordt voorbereid... |
replyBoxPlaceholder | Schrijf hier uw bericht, druk op <enter> om te verzenden |
retry | Herhalen |
sendFileTextSize | Upload een bestand van maximaal {filesize} |
sendFileTextSupportedFormat | Ondersteunde bestandsindelingen. |
sendFileTextSupportedFormatDesc | Afbeeldingen, video's, {fileFormats} |
sendMessageButton | Bericht verzenden |
sendNewEmail | Nieuwe e-mail verzenden |
sendTranscript | Transcriptie verzenden |
snakeWaiting | U staat op nummer {queue} in de wachtrij. |
startChatInPopup | Vraag het ons! |
startNewChat | Start een nieuwe chat |
statusReconnecting | Proberen verbinding te maken... |
surveySuccesfullySent | Bedankt voor uw feedback! |
systemChattingWith | U bent aan het chatten met {name} |
topic | Onderwerp |
transciptSentFailed | Verzenden is mislukt. |
transciptSuccesfullySent | Transcriptie is verzonden! |
tryAgainButton | Opnieuw proberen |
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 | Wachten... |
waitingDescription | Een van onze medewerkers zal binnenkort reageren. |
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('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}`);
![Gesloten](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
- ACTIVITY_BAR
- AGENT_MESSAGE
- AGENT_MESSAGE_BUBBLE
- AVATAR
- CONTENT
- CUSTOMER_MESSAGE
- CUSTOMER_MESSAGE_BUBBLE
- DELIMITER
- DROPDOWN_MENU
- HEADER
- INPUT
- IS_TYPING
- MESSENGER
- POPUP
- PRECONTACT_SURVEY
- PRECONTACT_SURVEY_DESCRIPTION
- PRIMARY_BUTTON
- REPLY_BOX
- SECONDARY_BUTTON
- SEND_BUTTON
- TEXTAREA
- TEXT_BUTTON
- WIDGET
- WINDOW
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; }
![Gesloten](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
![Een voorbeeld van de manier waarop CSS-code het chatvenster aanpast, waarbij de achtergrond van de berichten zwart is.](images/loc_chatapicustomcssex.png)
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
![Gesloten](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
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>