Interface voor klantchats configureren

Een chatprofiel maken

U kunt meerdere chatprofielen maken voor een speciaal aangepaste gebruikerservaring, maar u hoeft er maar één te maken om de interface voor klantchats te kunnen configureren. Beslis of u een V1 of V2 chatprofiel wilt gebruiken, en voer vervolgens de bijbehorende taak hieronder uit.

Een V1-chatprofiel maken

Vereiste machtigingen: Chatprofielen Maken

1. Klik op de app-kiezer en selecteer ACD.
2. Ga naar Contactinstellingen > Chatprofielen.
3. Vind het chatprofiel dat u wilt wijzigen en klik erop om het te openen.
4. Klik op Bewerken.
5. Voer de Profielnaam in.
6. Selecteer in de vervolgkeuzelijst Interface de optie V1 ASPX. Nadat u een profiel hebt opgeslagen, kunt u dit veld niet meer bewerken.
7. Configureer het Kleurenschema.
   Meer informatie over kleurenschema's

   Veld	Details
   Kleurenschema	Het systeem-kleurenschema dat momenteel in gebruik is. U kunt een van de onderstaande sjablonen kant-en-klaar gebruiken, of ze aanpassen aan uw wensen. Standaard – Grijs met blauw en wit. Kleurenschema 1 – Blauw met wit. Kleurenschema 2 – Oranje met geel en wit. Kleurenschema 3 – Rood met grijs en wit.

8. Configureer de stijlinstellingen voor het chatvenster. Bekijk in het Preview-gedeelte hoe het eruit komt te zien.
   Meer informatie over de Logo-afbeelding

   Veld	Details
   Logo-afbeelding	U kunt geen logo toevoegen aan een bestaand chatprofiel. Als u een chatprofiel zonder logo maakt en later beslist dat u toch een logo wilt gebruiken in de chat-interface, moet u een nieuw chatprofiel maken en dit aan het juiste contactpunt toewijzen.

9. Configureer de instellingen voor de chatdialogen. Bekijk in het Preview-gedeelte hoe het eruit komt te zien. U kunt de achtergrondkleur en de kleur van het lettertype veranderen voor agent- en contactdialogen, maar alleen de kleur van het lettertype voor systeemberichten. Systeemberichten worden meestal verzonden door Studio-acties zoals Quemsg en worden in de chat-interface zonder container weergegeven.
10. Configureer de instellingen voor de statusindicators en de berichten van de chat en bekijk het resultaat in de Preview.
11. Klik op Gereed.

Een V2-chatprofiel maken

Vereiste machtigingen: Chatprofielen Maken

1. Klik op de app-kiezer en selecteer ACD.
2. Ga naar Contactinstellingen > Chatprofielen.
3. Om een profiel aan te maken, klikt u op Nieuwe maken.
4. Voer een Profielnaam in.
5. Selecteer bij Interface de optie V2 (HTML5). Nadat u een profiel hebt opgeslagen, kunt u dit veld niet meer bewerken.
6. Pas eventueel de velden onder Uiterlijk aan en bekijk het resultaat in de Preview.
   Afbeelding weergeven

   
7. Als u dit wilt, kunt u een Pre-chat formulier inschakelen en configureren.
   Afbeelding weergeven

   
   1. Selecteer het selectievakje Pre-chat formulier inschakelen.
   2. Pas het Welkomstbericht aan uw wensen aan.
   3. Configureer de velden door Veld toevoegen te selecteren.

   De content die via dit formulier wordt verzonden, wordt aan de Begin-actie van uw routeringsscript doorgegeven als parameters die beginnen met P0.

8. Als u dit wilt kunt u het venster Wachtrij inschakelen en configureren.
   Afbeelding weergeven

   
   1. Selecteer het selectievakje Wachtrij inschakelen.
   2. Voer een Wachtbericht in. Als het aan dit profiel gekoppelde Studio-script de Quemsg-actie gebruikt om klanten te laten weten op welke positie ze in de wachtrij staan, dan wordt dat informatiebericht afgewisseld met het wachtbericht dat u hier instelt.
   3. Als u wilt, kunt u de kleuren van de achtergrond en de tekst aanpassen.

   4. Voeg eventueel een logo toe door de optie Logo te selecteren en dan één van de volgende dingen te doen:

      • Als u het gewenste logo al voor een ander doel naar CXone hebt geüpload, selecteert u Bestaande selecteren. Klik op Bladeren en vind de afbeelding in het venster Bestand selecteren. Klik op de afbeelding om deze te selecteren. Klik op OK.
      • Als u een nieuw logo wilt uploaden, selecteert u Nieuwe uploaden. Klik op Bestand kiezen en vind de afbeelding die u wilt uploaden. Klik op de afbeelding om deze te selecteren. Klik op Openen.

   5. Als u dat wilt, kunt u een grotere afbeelding toevoegen door het selectievakje Hero-afbeelding te selecteren en dan één van de volgende dingen te doen:

      • Als u de gewenste afbeelding al voor een ander doel naar CXone hebt geüpload, selecteert u Bestaande selecteren. Klik op Bladeren en vind de afbeelding in het venster Bestand selecteren. Klik op de afbeelding om deze te selecteren. Klik op OK.
      • Als u een nieuwe afbeelding wilt uploaden, selecteert u Nieuwe uploaden. Klik op Bestand kiezen en vind de afbeelding die u wilt uploaden. Klik op de afbeelding om deze te selecteren. Klik op Openen.

   U moet uw logo of afbeelding de juiste afmetingen geven voordat u het bestand naar CXoneuploadt. Anders wordt het logo of de afbeelding uitgerekt tot de opgegeven maximumgrootte. Logo's en afbeeldingen moeten van het bestandstype SVG of PNG zijn.

9. Als u een profiel aan het maken bent, klikt u op Opslaan.

Contactpunten toevoegen aan een chatprofiel

Vereiste machtigingen: Chatprofielen Bewerken

1. Klik op de app-kiezer en selecteer ACD.
2. Ga naar Contactinstellingen > Chatprofielen.
3. Vind het chatprofiel waaraan u contactpunten wilt toevoegen en klik om profiel het te openen.
4. Klik op het tabblad Contactpunten.
5. Selecteer in de tabel Contactpunten toevoegen de selectievakjes die overeenkomen met de contactpunten die u aan het chatprofiel wilt toevoegen. Als u dit profiel aan alle contactpunten wilt toewijzen, slaat u deze stap over.
6. Klik op Contactpunten toevoegen. Om het chatprofiel aan alle actieve chatcontactpunten toe te wijzen, klikt u op Alle toevoegen.

V2 Live chat (HTML5) in een webpagina insluiten en aanpassen

1. Klik op de app-kiezer en selecteer ACD.
2. Ga naar Contactinstellingen > Contactpunt.
3. Selecteer een bestaand contactpunt of maak een nieuw contactpunt.
4. Kopieer de code die onder aan de pagina staat.
5. Plak de gekopieerde tekst aan het eind van het <body>-gedeelte van uw webpagina.

6. Als u het standaardpictogram voor Live chat op uw website wilt vervangen door een ander pictogram, voegt u de volgende tekst toe aan het script dat u in uw website hebt geplakt:

   Standaardpictogram voor Live chat weergeven

   

   1. Voeg de volgende tekst toe aan het script, direct onder de regel <script type ="text/javascript">:

      function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }

   2. Voeg de .badge2-klasse toe aan de CSS van uw website en pas de badge-effecten voor de aangepaste Live chat-knop aan uw wensen aan.

   3. Voeg de onderstaande, gemarkeerde code toe aan het codeblok icPatronChat.init:

      icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge); 
      

      params is een array van strings die tijdens runtime aan het Studio-script worden doorgegeven. Hiermee kunnen maximaal 10 aangepaste queryparameters worden verzonden, inclusief de velden van het Pre-chat formulier.

   4. Voeg de aangepaste knop met HTML toe, direct achter de </script>-tag. De link moet onclick="icPatronChat.setStateWindowToggle()" bevatten. Zie het voorbeeld:

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>

   5. Sla de webpagina op en test hem. Breng zo nodig wijzigingen aan.

7. Als u de grootte en de positie van het Live chat-venster op uw website wilt aanpassen, doet u het volgende in het script dat u in uw website geplakt hebt:

   Standaardgrootte van Live chat-venster bekijken

   

   1. Voeg boven de regel icPatronChat.init het volgende codeblok toe:

      var dimensions = {top:20,left:200,height:50,width:600};

   2. Stel de parameters top en left in op het aantal pixels vanaf de bovenkant en de linkerkant van het browservenster waar u wilt dat de linkerbovenhoek van het chatvenster komt te staan.
   3. Stel de parameters height en width in op de hoogte en de breedte die het venster moet hebben wanneer het door een contact wordt geopend.

   4. Voeg de onderstaande regel toe, direct boven de </script>-tag.

      icPatronChat.setDimension(dimensions);

   5. Sla de webpagina op en test hem. Breng zo nodig wijzigingen aan.

Een popout-venster voor Interface voor klantchats toevoegen aan een webpagina

Deze instructies werken voor zowel V1 (ASPX) als V2 (HTML5) chatprofielen.

1. Klik op de app-kiezer en selecteer ACD.
2. Ga naar Contactinstellingen > Chatprofielen.
3. Selecteer een bestaand contactpunt of maak een nieuw contactpunt.
4. Kopieer de URL van het contactpunt.

5. Voeg de onderstaande regels code toe aan het einde van het <body>-gedeelte van uw webpagina. Vervang daarbij de gemarkeerde tekst door uw URL.

   <script type = "text/javascript"> var popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </script>

   De parameters na de URL vormen een array van strings die tijdens runtime worden doorgegeven aan het Studio-script. U kunt maximaal 10 parameters toevoegen.