Set Up Customer Chat Interface

Customer chat interface must be enabled by your account manager before you begin to use it. This chat client is just one element of the chat channel. Configuring chat for your contact center is a multi-step process.

These tasks are only needed if you want to deploy a custom chat experience. Choose whether you want to use a V1 or a V2 profile. You don't need both.

Create a Chat Profile

You can create multiple chat profiles for an extra-customized experience, however, you need only create one to set up the customer chat interface. Decide if you want to use a V1 or V2 chat profile, then follow the correlating task below.

Create V1 Chat Profile

Required permissions: Chat Profiles Create

V1 window settings

  1. Click the app selector and select ACD.
  2. Go to Contact Settings > Chat Profiles.
  3. Locate the chat profile you want to modify and click it to open it.
  4. Click Edit.
  5. Enter the Profile Name.
  6. For Interface, select V1 ASPX from the drop-down. Once you have saved a profile, you can no longer edit this field.
  7. Configure the Color Scheme.

    Field

    Details

    Color Scheme

    The system color scheme in use. You can use one of the following templates as is, or modify it to meet your company's needs.

    • Default — Gray with blue and white.
    • Color Scheme 1 — Blue with white.
    • Color Scheme 2 — Orange with yellow and white.
    • Color Scheme 3 — Red with gray and white.
  8. Configure the style settings for the chat window, using the Preview area to view your updates.

    Field

    Details

    Logo ImageYou cannot add a logo to an existing chat profile. If you create a chat profile without a logo and later decide you want to include a logo in the customer chat interface, you must create a new chat profile and assign it to the appropriate point of contact.
  9. Configure the settings for the chat dialogs, using the Preview area to view your updates. You can change the background color and font color for agent and contact dialogs, but only the font color for system messages. System messages are typically driven by Studio actions like Quemsg and appear in the chat interface with no container.
  10. Configure the settings for the chat status indicators and messages, using the Preview area to view your updates.
  11. Click Done.

Create a V2 Chat Profile

Required permissions: Chat Profiles Create

  1. Click the app selector and select ACD.
  2. Go to Contact Settings > Chat Profiles.
  3. To create a profile, click Create New.
  4. Enter a Profile Name.
  5. For Interface, select V2 (HTML5). Once you have saved a profile, you can no longer edit this field.
  6. Configure the Appearance fields as needed, using the Preview to view your updates.
  7. If you want to, enable and configure a pre-chat form.
    1. Select the Enable Pre-Chat Form checkbox.
    2. Modify the Welcome Message as needed.
    3. Configure the fields as needed by selecting Add Field.

    Contents submitted using this form are passed to the Begin action of your routing script as parameters starting with the entry P0.

  8. If you want to, enable and configure the Waiting Queue window.
    1. Select the Enable Waiting Queue checkbox.
    2. Enter a Waiting Message. If the Studio script associated with this profile uses the Quemsg action to let customers know their place in the queue, that message alternates with the message you configure here.
    3. If you want to, change the color of the background and tone of the text.

    4. If you want to, add a logo by selecting the Logo checkbox and then doing one of the following:

      • If you already uploaded the logo to CXone for another purpose, select Select Existing. Click Browse and locate the image in the Select File window. Click the image to select it. Click OK.
      • If you want to upload a new logo, select Upload New. Click Choose File and locate the image you want to upload. Click the image to select it. Click Open.

    5. If you want to, add a larger image by selecting the Hero image checkbox and then doing one of the following:

      • If you already uploaded the image to CXone for another purpose, select Select Existing. Click Browse and locate the image in the Select File window. Click the image to select it. Click OK.
      • If you want to upload a new image, select Upload New. Click Choose File and locate the image you want to upload. Click the image to select it. Click Open.

    You should size your logo or image before uploading it to CXone.Otherwise, the logo or hero image is stretched to fit the specified maximum size. Logos and images must be SVG or PNG file types.

  9. If you are creating a profile, click Save.

Add Point of Contacts to a Chat Profile

Required permissions: Chat Profiles Edit

  1. Click the app selector and select ACD.
  2. Go to Contact Settings > Chat Profiles.
  3. Locate the chat profile you want to assign to points of contact and click to open it.
  4. Click the Points of Contact tab.
  5. In the Add Points of Contact table, select the checkboxes corresponding to the points of contact to which you want to assign the chat profile. If you want to assign this profile to all points of contact, skip this step.
  6. Click Add Points of Contact. To assign the chat profile to all active chat points of contact, click Add All.

Embed and Customize Live Chat V2 (HTML5) in a Webpage

<script type = "text/javascript" src = 'http://hc8.ucnlabext.com/inContact/ChatClient/js/embed.min.js'></script>
 <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";}	
  }
  var dimensions = {top:20,left:200,height:50,width:600};
  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);
 icPatronChat.setDimension(dimensions);
</script>

  1. Click the app selector and select ACD.
  2. Go to Contact Settings > Point of Contact.
  3. Select an existing or create a new point of contact.
  4. Copy the code located at the bottom of the page.
  5. Paste the copied text at the end of the <body> section of your webpage.

  6. If you want to replace the default live chat icon that appears on your website, add the following to the script you pasted in your website:

    1. Add the following to the script, just below the <script type ="text/javascript"> line:

      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. Add the .badge2 class to your website's CSS and style the badge effects on the custom live chat button how you want them.

    3. Add the following highlighted code to the icPatronChat.init code block:

      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 an array of strings that pass to the Studio script at run time. It can send a maximum of 10 custom query parameters, including pre-chat form fields.

    4. Add the custom button with HTML, just after the </script> tag. The link must include onclick="icPatronChat.setStateWindowToggle()". See the following example:

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

    5. Save the webpage and test it. Make changes as necessary.

  7. If you want to customize the size and position of the live chat window on your website when a contact opens it, do the following to the script you pasted into your website: 

    1. Above the icPatronChat.init line, add the following code block:

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

    2. Set the top and left settings to the number of pixels from the top and left side of the browser window you want the top left corner of the chat window to be positioned on your website.
    3. Set the height and width settings to the number of pixels high and wide you want the window to be when a contact opens it.

    4. Add the following line just above the </script> tag. 

      icPatronChat.setDimension(dimensions);

    5. Save the webpage and test it. Make changes as necessary.

Add a Customer chat interface Pop-Out Window to a Webpage

These instructions work for both V1 (ASPX) and V2 (HTML5) chat profiles.

  1. Click the app selector and select ACD.
  2. Go to Contact Settings > Chat Profiles.
  3. Select an existing or create a new point of contact.
  4. Copy the Point of Contact URL.

  5. Add these lines of code to the end of the <body> section of your webpage. Replace the highlighted text with your 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>

    The parameters after the URL is an array of strings that pass to the Studio script at run time. You can include up to 10.