Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision | Next revisionBoth sides next revision | ||
lab2 [2019/01/09 18:46] – [CCX Chat] gerardorourke | lab2 [2019/01/09 21:52] – [CCX Chat] gerardorourke | ||
---|---|---|---|
Line 27: | Line 27: | ||
==== CCX Chat==== | ==== CCX Chat==== | ||
+ | |||
+ | === Classic Chat === | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <!-- Note: Ensure that the moment.js is available and correctly referenced in the client environment.--> | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <script language=" | ||
+ | function updateAuthor(theForm){ | ||
+ | if(theForm.extensionField_Name){ | ||
+ | if(theForm.extensionField_Name.value!="" | ||
+ | theForm.author.value=theForm.extensionField_Name.value; | ||
+ | theForm.extensionField_Name.name=" | ||
+ | return(true); | ||
+ | if(theForm.extensionField_Email){ | ||
+ | if(theForm.extensionField_Email.value!="" | ||
+ | theForm.author.value=theForm.extensionField_Email.value; | ||
+ | return(true); | ||
+ | return(true); | ||
+ | |||
+ | / | ||
+ | /* | ||
+ | Below code handles the display of Chat form based on the Chat Schedule configuration. The chat form is displayed to the client if the client’s browser current time is in the Business working hours else offline message is display.The Chat Schedule configuration handles client’s in different time zones as well as daylight saving provided the client’s system time settings are appropriate. | ||
+ | The Chat Schedeule code flow requires moment timezone library, if the library is not accessible then scheduling configuration is ignore and Chat form is always displayed to the client. | ||
+ | */ | ||
+ | |||
+ | /* convert client’s timezone to server time zone using moment timezone library to validate against Chat Schedule configuration.*/ | ||
+ | var serverTimezone = " | ||
+ | var currentDateInServerTimeZone = moment.tz(new Date(), serverTimezone); | ||
+ | var currDay = currentDateInServerTimeZone.day(); | ||
+ | var currDate = currentDateInServerTimeZone.format(" | ||
+ | var currWorkTimeMins = (currentDateInServerTimeZone.hours() * 60) + currentDateInServerTimeZone.minutes(); | ||
+ | /*Below variables hold the Chat Schedule Configuration details as provided in the AppAdmin Schedule Configuration Page*/ | ||
+ | var holidays = []; | ||
+ | var specialDays = []; | ||
+ | var routineDays = []; | ||
+ | function isOnHoliday() { | ||
+ | for (var i=0; i < holidays.length; | ||
+ | if(holidays[i] == currDate){ | ||
+ | return true; | ||
+ | } | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | function isOnSpecialDay() { | ||
+ | for (var i=0; i < specialDays.length; | ||
+ | if(specialDays[i].date == currDate){ | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | return specialDays[i]; | ||
+ | } | ||
+ | function isInWorkingHour(workTime) { | ||
+ | return currWorkTimeMins <= workTime.endTime && currWorkTimeMins >= workTime.startTime; | ||
+ | } | ||
+ | function isOperatingHour() { | ||
+ | var isOperatingHour= false; | ||
+ | if (!isOnHoliday()) { | ||
+ | var specialDate = isOnSpecialDay(); | ||
+ | if (specialDate) { | ||
+ | isOperatingHour = isInWorkingHour(specialDate.workTime); | ||
+ | else { | ||
+ | for (var i=0; i < routineDays.length; | ||
+ | if (routineDays[i].day == currDay) { | ||
+ | isOperatingHour = isInWorkingHour(routineDays[i].workTime); | ||
+ | break;}} | ||
+ | if (routineDays.length == 0){isOperatingHour = true; }} | ||
+ | } | ||
+ | return isOperatingHour | ||
+ | } | ||
+ | function onLoadInit() { | ||
+ | var displayChatForm= true; | ||
+ | /* Ignore Chat Schedule if moment timezone library is not available*/ | ||
+ | if (window.moment) { | ||
+ | displayChatForm = isOperatingHour(); | ||
+ | } | ||
+ | if(displayChatForm) { | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | else { | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | <body onload=" | ||
+ | <div id=" | ||
+ | <form action=" | ||
+ | <style type=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <select name=" | ||
+ | <option value=" | ||
+ | </ | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | <!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface. | ||
+ | Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.--> | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | <h2> Sorry, we are not available at the moment. </h2> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | ===Bubble Chat Code=== | ||
< | < | ||
<!-- Add this script tag without any modification to the target webpage --> | <!-- Add this script tag without any modification to the target webpage --> |