Order: ${currentOrder.order_name}
${new Date(currentOrder.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
${currentOrder.fulfillment_status}
I want to return some items
${name} - we provide no questions asked returns on eligible items. Please select your reason for return and refund options and we'll get back to you with a confirmation.
`
let bodyHtml = `
${BreadCrumbHtml}${HelpHtml}
`
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
rvMessengerHeader.insertAdjacentHTML("afterend", bodyHtml);
RvBotView.orderBreadCrumbsEvent();
RvBotView.initiateReturnEvent();
},
initiateReturnEvent: function(){
let initateReturn = widgetContentFrame.body.querySelector('.initateReturn');
if( initateReturn ){
initateReturn.addEventListener("click", RvBotView.initateReturnFunc);
}
},
initateReturnFunc: function(){
let rvReturnOptions = widgetContentFrame.body.querySelector('.rvReturnOptions');
if(rvReturnOptions){
let orderIndex = RV_ORDER_BREADCRUMBS.currentOrderIndex;
let currentOrder = RV_CUSTOMER_ORDER[orderIndex];
let rvHelpMiddleWrap = widgetContentFrame.body.querySelector('.rvHelpMiddleWrap');
rvHelpMiddleWrap.innerHTML = "";
let rvHelpBottomWrap = widgetContentFrame.body.querySelector('.rvHelpBottomWrap')
rvHelpBottomWrap.innerHTML = "";
let products = currentOrder.products;
let productHtml = "";
for (let i = 0; i < products.length; i++){
let product = products[i];
let productImage = product.productImage;
let productImageHtml = ""
if( productImage && productImage.length > 0 ){
productImageHtml = `
`
}else{
productImageHtml = `
`
}
productHtml += `
${product.name} $${product.price}*${product.quantity}
$${product.price*product.quantity}
`
}
let middleHtml = `
${productHtml}
Reason for Return Select I have changed my mind Incorrect size or color Item not as described Didn't meet my expectation I don't need the product any more
Refund or Exchange Select I'd like to exchange this product I'd like a refund as store credit (immediate) I'd like a refund to my original Payment (2-5 days)
`
let endHtml = `
Proceed `
rvHelpMiddleWrap.innerHTML = middleHtml;
rvHelpBottomWrap.innerHTML = endHtml;
RvBotView.proceedWithReturnEvent();
}
},
proceedWithReturnEvent: function(){
let selectAllOption = widgetContentFrame.body.querySelector('.selectAllOption');
if( selectAllOption ){
selectAllOption.addEventListener("change", RvBotView.productReturnSelectAllFunc);
}
let multipleCheckBoxes = widgetContentFrame.body.querySelectorAll('.productSelect');
for( let i = 0; i < multipleCheckBoxes.length; i++ ){
multipleCheckBoxes[i].addEventListener("change", RvBotView.singleProductCheckboxFunc);
}
let proceedReturnDom = widgetContentFrame.body.querySelector('#proceedReturn');
if( proceedReturnDom ){
proceedReturnDom.addEventListener("click", RvBotView.returnFormSubmissionFunc);
}
},
returnFormSubmissionFunc: async function(){
let multipleCheckBoxes = widgetContentFrame.body.querySelectorAll('.productSelect');
let reasonforreturn = widgetContentFrame.body.querySelector('#reasonforreturn');
let refundOrExchange = widgetContentFrame.body.querySelector('#refundOrExchange');
let productArray = [];
let returnOption = reasonforreturn ? reasonforreturn.value : "";
let refundOption = refundOrExchange ? refundOrExchange.value : "" ;
for( let i = 0; i < multipleCheckBoxes.length; i++ ){
if ( multipleCheckBoxes[i].checked ){
let value = multipleCheckBoxes[i].value;
if( !productArray.includes(value) ){
productArray.push(value);
}
}
}
if( productArray.length == 0 ){
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "
Please Select the product First
";
}else if( returnOption == "" ){
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "
Please choose return option
";
}else if( refundOption == "" ){
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "
Please choose refund option
";
}else{
RV_RETURN_FORM = true;
RV_Load_Conversation = true;
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "";
await RvBotView.startConversationFunc(false);
let orderIndex = RV_ORDER_BREADCRUMBS.currentOrderIndex;
let currentOrder = RV_CUSTOMER_ORDER[orderIndex];
let products = currentOrder.products;
let productFaqMessage1 = `
Order
>
I want to return some items
`
let rvMsg = `
` + RV_Customer_Name +`, ` +RvBotView.rvGetCurrentTime() +`
${productFaqMessage1}
`
if( RV_MSG_BODY_HEIGHT != "" ){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
RV_Start_Conversation = true;
Is_Agent_Flag = "changed"
await RvBotView.rvSendMessage(encodeURIComponent(productFaqMessage1), "", "user");
RvBotView.updateCurrentConversation(rvMsg, "bot");
let name = "";
if(currentOrder.first_name){
name += currentOrder.first_name
}
if(currentOrder.last_name){
name += " " + currentOrder.last_name
}
let productHtml = "";
let requestProduct = []
for( let i = 0; i < productArray.length; i++ ){
let currentProduct = products[productArray[i]];
requestProduct.push(currentProduct);
productHtml += `
${currentProduct.name} * ${currentProduct.quantity}
$${currentProduct.price*currentProduct.quantity}
`
}
let url = "/api/v1/requestOrder";
let data = {"Order_Id":currentOrder.order_id,"Order_Number":currentOrder.order_number,"Customer_Name":name, "Customer_Email": currentOrder.email, "Website_Id": Website_Id, "Order_type": "return", "products":requestProduct, "Visitor_Chat_Id": Visitor_Chat_Id, "Conversation_Id": Conversation_Id, "reason_for_return": returnOption, "refund_option": refundOption}
if( currentOrder.order_name ){
data.Order_Name = currentOrder.order_name;
}
RvBotView.rvXmlJsonRequest(url, data);
url = "/api/v1/OrderStatsActivity";
data = `Website_Id=${Website_Id}&Type=return order&Visitor_Id=${VisitorId}&order_id=${currentOrder.order_id}&Visitor_Chat_Id=${Visitor_Chat_Id}`;
RvBotView.rvXmlRequest(url, data);
let productFaqMessage2 = `
`
rvMsg = `
`
if( RV_MSG_BODY_HEIGHT != "" ){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
await RvBotView.rvSendMessage(encodeURIComponent(productFaqMessage2), "", "user");
RvBotView.updateCurrentConversation(rvMsg, "bot");
let productFaqMessage3 = `
Order: ${currentOrder.order_name}
${new Date(currentOrder.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
${currentOrder.fulfillment_status}
Amount
$ ${currentOrder.total_price}
Qty
${currentOrder.products.length}
Selected Items
${productHtml}
`
rvMsg = `
`
if( RV_MSG_BODY_HEIGHT != "" ){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
await RvBotView.rvSendMessage((productFaqMessage3), "", "user");
RvBotView.updateCurrentConversation(rvMsg, "bot");
let msg = `Your Return request has been submitted succesfully. The team typically replies in ${botsetting.Bot_Agent_Reply_Time ? botsetting.Bot_Agent_Reply_Time : "in a day" }`;
var rvMessage = `
${msg}
`;
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
RV_Customer_Email = currentOrder.email;
RvBotView.updateEmailLead(RV_Customer_Email);
msg = "you will notified here and on email ("+currentOrder.email+") when they reply.";
rvMessage = `
`;
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
RvBotView.rvCollectMessage();
}
},
singleProductCheckboxFunc: function(){
if( widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack')){
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "";
}
},
productReturnSelectAllFunc: function(e){
if( widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack')){
widgetContentFrame.body.querySelector('.rvHelpMiddleWrap .errorFeedBack').innerHTML = "";
}
let options;
if( e.target.checked ){
options = true;
e.target.parentNode.querySelector('.selectAllText').innerHTML = "Unselect All";
}else{
options = false;
e.target.parentNode.querySelector('.selectAllText').innerHTML = "Select All";
}
let multipleCheckBoxes = widgetContentFrame.body.querySelectorAll('.productSelect');
for( let i = 0; i < multipleCheckBoxes.length; i++ ){
multipleCheckBoxes[i].checked = options;
}
},
loadMap: function(address){
const myLatLng = { lat: address.latitude, lng: address.longitude };
const map = new widgetFrame.contentWindow.google.maps.Map(widgetContentFrame.body.querySelector("#map"), {
zoom: 15,
center: myLatLng,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
});
let contentString = "Shipping Address
";
if( address.province ){
contentString += address.province+ ", "
}
if( address.country ){
contentString += address.country
}
const infowindow = new widgetFrame.contentWindow.google.maps.InfoWindow({
content: contentString,
});
const marker = new widgetFrame.contentWindow.google.maps.Marker({
position: myLatLng,
map,
//title: `Shipping Address
${address.province && address.province+" ,"}${ address.country && address.country}`
});
marker.addListener("click", () => {
infowindow.open({
anchor: marker,
map,
shouldFocus: false,
});
});
},
orderBreadCrumbsEvent: function(){
let orderBreadCrumbs = widgetContentFrame.body.querySelectorAll('.orderBreadCrumbs');
if(orderBreadCrumbs){
for( let i = 0; i < orderBreadCrumbs.length; i++ ){
orderBreadCrumbs[i].addEventListener("click", RvBotView.orderBreadCrumbsClicked);
}
}
},
orderBreadCrumbsClicked: function(e){
let breadCrumbsValue = e.target.dataset.value;
switch (breadCrumbsValue){
case "home":
RvBotView.goBackHomeBtnClicked();
break;
case "order":
RvBotView.loadCustomerOrder();
break;
case 'particularOrder':
RvBotView.loadParticularOrder();
break;
case 'help':
RvBotView.rvHelpEventFunc();
break;
case 'collectionList':
collectionBreadCrumb = {}
RvBotView.loadProductFaqFunc();
break;
case 'articleList':
let indexValue = collectionBreadCrumb.collectionIndex;
collectionBreadCrumb = {};
RvBotView.collectionClickedFunction(indexValue);
break;
}
},
loadProductFaqEvent: function(){
let productFaqDom = widgetContentFrame.body.querySelector('#rvProdFaqArticle');
if(productFaqDom){
productFaqDom.addEventListener("click", RvBotView.loadProductFaqFunc);
}
let otherAritcleDom = widgetContentFrame.body.querySelector('#rvProdFaqOtherArticle');
if(otherAritcleDom){
otherAritcleDom.addEventListener("click", RvBotView.loadProductFaqFunc);
}
},
loadProductFaqFunc: function(e){
if( RV_ARTICLE_TYPE == "" ){
articleType = e.target.dataset.value;
RV_ARTICLE_TYPE = articleType
}else{
articleType = RV_ARTICLE_TYPE
}
if( RV_Collection_Article && RV_Collection_Article[articleType] && RV_Collection_Article[articleType].length > 0 ){
RvBotView.rvInnerPageFooterLoad();
let widgetHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader > div');
widgetHeader.innerHTML = "";
if(widgetContentFrame.body.querySelector('.rvHomeScreenWrap')){
widgetContentFrame.body.querySelector('.rvHomeScreenWrap').remove();
}
if(widgetContentFrame.body.querySelector('.rvMessengerHeader .breadCrumbHtml')){
widgetContentFrame.body.querySelector('.rvMessengerHeader .breadCrumbHtml').remove();
}
if(widgetContentFrame.body.querySelector('.rvInnerPageWrap')){
widgetContentFrame.body.querySelector('.rvInnerPageWrap').remove();
}
//widgetHomeContent.innerHTML = "";
widgetContentFrame.body.querySelector('.rvMessengerHeader').style.height = "55px";
chatToggleFrame.classList.remove('position2','position3','position1');
chatToggleFrame.classList.add('position4');
let articleHeader = ``
widgetHeader.innerHTML = articleHeader;
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
let collectionsList = "";
for(let i = 0; i < RV_Collection_Article[articleType].length; i++){
collectionsList += `
${RV_Collection_Article[articleType][i]['Title']}
`
}
let rvHeaderTitle = "";
if( RV_ARTICLE_TYPE == "Product FAQs"){
rvHeaderTitle = "Product Questions"
}else{
rvHeaderTitle = "Start a Conversation"
}
var productFaqHtml = `
`;
rvMessengerHeader.insertAdjacentHTML('afterend', productFaqHtml);
let rvArticleInnerWrapper = widgetContentFrame.body.querySelector('.rvArticleWrapper .rvArticleInnerWrapper')
if(rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper')){
rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper').remove();
}
let BreadCrumbHtml = `
`
rvArticleInnerWrapper.insertAdjacentHTML("afterbegin", BreadCrumbHtml);
RvBotView.goBackHomeButton();
RvBotView.orderBreadCrumbsEvent();
if( Website_Id == 114 && articleType === "Product FAQs" && RV_Collection_Article[articleType].length === 1 ){
RvBotView.collectionClickedFunction('0');
return ""
}
RvBotView.collectionClickEvent();
}else{
RV_ARTICLE_TYPE = ""
}
},
collectionClickEvent: function(){
var collectionList = widgetContentFrame.body.querySelectorAll('.rvArticleWrapper .rvArticleColList');
if( collectionList && collectionList.length > 0 ){
for(let i = 0; i < collectionList.length; i++ ){
collectionList[i].addEventListener("click", RvBotView.collectionClicked);
}
}
},
collectionClicked: function(e){
RvBotView.collectionClickedFunction(e.target.dataset.value)
},
collectionClickedFunction: function(indexValue){
if( !collectionBreadCrumb.hasOwnProperty('collectionIndex') || ( collectionBreadCrumb.hasOwnProperty('collectionIndex') && collectionBreadCrumb.collectionIndex == "" ) ){
var collectionIndex = indexValue;
collectionBreadCrumb.collectionIndex = collectionIndex;
var currentCollection = RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex];
var collectionArticles = RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].articles;
if( collectionArticles.length > 0 ){
var rvConversationHeader = widgetContentFrame.body.querySelector('.rvConversationHeader');
let rvArticleInnerWrapper = widgetContentFrame.body.querySelector('.rvArticleWrapper .rvArticleInnerWrapper')
if(rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper')){
rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper').remove();
}
if(rvConversationHeader.querySelector('.breadCrumbHtml')){
rvConversationHeader.querySelector('.breadCrumbHtml').remove();
}
let rvHeaderTitle = "";
if( RV_ARTICLE_TYPE == "Product FAQs"){
rvHeaderTitle = "Product Questions"
}else{
rvHeaderTitle = "Start a Conversation"
}
var breadCrumbHtml = `
`;
let BreadCrumbHtml = `
${RV_ARTICLE_TYPE}
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Title}
`
rvConversationHeader.insertAdjacentHTML("beforeend", breadCrumbHtml);
var rvProductFaqHeader = widgetContentFrame.body.querySelector('.rvProductFaqHeader');
if( rvProductFaqHeader.querySelector('.productFaqTitle') ){
rvProductFaqHeader.querySelector('.productFaqTitle').innerHTML = RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Title;
}
if(rvProductFaqHeader.querySelector('.productFaqDescription')){
rvProductFaqHeader.querySelector('.productFaqDescription').remove();
}
if( !currentCollection.Article_Show_First ){
let rvCollectionDescription = `
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Description.replace(/\n/g, "
`
rvProductFaqHeader.querySelector('.productFaqTitle').insertAdjacentHTML("afterend", rvCollectionDescription);
}
var collectionList = widgetContentFrame.body.querySelectorAll('.rvArticleWrapper .rvArticleColList');
if( collectionList && collectionList.length > 0 ){
for(let i = 0; i < collectionList.length; i++ ){
collectionList[i].remove();
}
}
let articleList = "";
for(let i = 0; i < collectionArticles.length; i++){
articleList += `
${collectionArticles[i]['Title']}
`
}
let rvProductFaqWrap = widgetContentFrame.body.querySelector('.rvArticleWrapper .rvProductFaqWrap');
widgetContentFrame.body.querySelector('.rvArticleWrapper .rvArticleInnerWrapper').insertAdjacentHTML("afterbegin", BreadCrumbHtml);
rvProductFaqWrap.insertAdjacentHTML("beforeend", articleList);
if( currentCollection.Article_Show_First ){
let rvCollectionDescription = `
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Description.replace(/\n/g, "
`
rvProductFaqWrap.insertAdjacentHTML("beforeend", rvCollectionDescription);
}
RvBotView.collectionClickEvent();
//RvBotView.breadCrumbClickEvent();
RvBotView.orderBreadCrumbsEvent();
widgetContentFrame.body.querySelector('.rvInnerPageWrap').scrollTop = 0;
let url = "/api/v1/updateArtColStats";
let data = `Article_Type=${RV_ARTICLE_TYPE}&Collection_Id=${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Collection_Id}&Website_Id=${Website_Id}&type=clicked&Visitor_Id=${VisitorId}&Visitor_Chat_Id=${Visitor_Chat_Id}`;
RvBotView.rvXmlRequest(url, data);
}else{
collectionBreadCrumb.collectionIndex = "";
}
}else{
var articleIndex = indexValue;
collectionBreadCrumb.articleIndex = articleIndex;
let collectionIndex = collectionBreadCrumb.collectionIndex;
var article = RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].articles[articleIndex];
if( article ){
var rvConversationHeader = widgetContentFrame.body.querySelector('.rvConversationHeader');
let rvArticleInnerWrapper = widgetContentFrame.body.querySelector('.rvArticleWrapper .rvArticleInnerWrapper')
if(rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper')){
rvArticleInnerWrapper.querySelector('.breadCrumbInnerWrapper').remove();
}
if(rvConversationHeader.querySelector('.breadCrumbHtml')){
rvConversationHeader.querySelector('.breadCrumbHtml').remove();
}
let rvHeaderTitle = "";
if( RV_ARTICLE_TYPE == "Product FAQs"){
rvHeaderTitle = "Product Questions"
}else{
rvHeaderTitle = "Start a Conversation"
}
var breadCrumbHtml = `
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Title}
`;
let BreadCrumbHtml = `
${RV_ARTICLE_TYPE}
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Title}
${article.Title}
`
rvArticleInnerWrapper.insertAdjacentHTML("afterbegin", BreadCrumbHtml);
rvConversationHeader.insertAdjacentHTML("beforeend", breadCrumbHtml);
var rvProductFaqHeader = widgetContentFrame.body.querySelector('.rvProductFaqHeader');
if( rvProductFaqHeader.querySelector('.productFaqTitle') ){
rvProductFaqHeader.querySelector('.productFaqTitle').innerHTML = article.Title;
if(rvProductFaqHeader.querySelector('.productFaqDescription')){
rvProductFaqHeader.querySelector('.productFaqDescription').remove();
}
let rvCollectionDescription = `
${article.Content_Json}
`
rvProductFaqHeader.querySelector('.productFaqTitle').insertAdjacentHTML("afterend", rvCollectionDescription);
}
var collectionList = widgetContentFrame.body.querySelectorAll('.rvArticleWrapper .rvArticleColList');
if( collectionList && collectionList.length > 0 ){
for(let i = 0; i < collectionList.length; i++ ){
collectionList[i].remove();
}
}
let articleOptionHtml = `
`
let rvProductFaqWrap = widgetContentFrame.body.querySelector('.rvArticleWrapper .rvProductFaqWrap');
rvProductFaqWrap.insertAdjacentHTML("beforeend", articleOptionHtml);
//RvBotView.breadCrumbClickEvent();
RvBotView.articleOptionsEvent();
RvBotView.orderBreadCrumbsEvent();
widgetContentFrame.body.querySelector('.rvInnerPageWrap').scrollTop = 0;
let url = "/api/v1/updateArtColStats";
let data = `Article_Type=${RV_ARTICLE_TYPE}&Collection_Id=${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].Collection_Id}&Article_Id=${RV_Collection_Article[RV_ARTICLE_TYPE][collectionIndex].articles[articleIndex].Article_Id}&Website_Id=${Website_Id}&type=clicked&Visitor_Id=${VisitorId}&Visitor_Chat_Id=${Visitor_Chat_Id}`;
RvBotView.rvXmlRequest(url, data);
}else{
collectionBreadCrumb.articleIndex = "";
}
}
},
articleOptionsEvent: function(){
let rvArticleReturnHome = widgetContentFrame.body.querySelector('.rvArticleColList .rvArticleReturnHome');
if( rvArticleReturnHome ){
rvArticleReturnHome.addEventListener("click", RvBotView.rvArticleReturnHomeClicked);
}
let rvArticleSendMsg = widgetContentFrame.body.querySelector('.rvArticleColList .rvArticleSendMsg');
if( rvArticleSendMsg ){
rvArticleSendMsg.addEventListener("click", RvBotView.rvArticleSendMsgClicked);
}
let productFaqDescription = widgetContentFrame.body.querySelector('.productFaqDescription')
if( productFaqDescription ){
let aList = productFaqDescription.querySelectorAll('a');
if( aList && aList.length > 0 ){
for(let i = 0; i < aList.length; i++ ){
aList[i].setAttribute('target', '_blank');
}
}
}
},
rvArticleReturnHomeClicked: function(){
RvBotView.goBackHomeBtnClicked();
},
rvArticleSendMsgClicked: function(){
RV_Start_Conversation = true;
Is_Agent_Flag = "changed"
RvBotView.startConversationFunc(true, true);
let url = "/api/v1/updateArtColStats";
let data = `Article_Type=${RV_ARTICLE_TYPE}&Collection_Id=${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Collection_Id}&Article_Id=${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].articles[collectionBreadCrumb.articleIndex].Article_Id}&Website_Id=${Website_Id}&type=chat&Visitor_Id=${VisitorId}&Visitor_Chat_Id=${Visitor_Chat_Id}`;
RvBotView.rvXmlRequest(url, data);
},
breadCrumbClickEvent: function(){
var breadCrumbHtmlDom = widgetContentFrame.body.querySelector('.rvMessengerHeader .breadCrumbHtml');
if( breadCrumbHtmlDom ){
breadCrumbHtmlDom.addEventListener('click', RvBotView.breadCrumbClicked);
}
},
breadCrumbClicked: function(e){
var breadCrumbValue = e.target.dataset.value;
if( breadCrumbValue == "collectionList" ){
collectionBreadCrumb = {}
RvBotView.loadProductFaqFunc();
}else{
let indexValue = collectionBreadCrumb.collectionIndex;
collectionBreadCrumb = {};
RvBotView.collectionClickedFunction(indexValue);
}
},
loadOldConversation: function(){
var rvConversationSummary = widgetContentFrame.body.querySelectorAll('.openOldConversation');
if( rvConversationSummary.length > 0 ){
for( let i = 0; i < rvConversationSummary.length; i++ ){
rvConversationSummary[i].addEventListener('click', RvBotView.loadOldConversationEvent);
}
}
var createNewActiveConversation = widgetContentFrame.body.querySelector('#createNewActiveConversation');
if( createNewActiveConversation ){
createNewActiveConversation.addEventListener('click', RvBotView.startNewConversation);
}
},
loadOldConversationEvent: function(event){
index = event.target.dataset.conversation;
Rv_Current_Conversation = RV_MSG[index];
Conversation_Id = Rv_Current_Conversation.Conversation_Id;
RvBotView.fetchCurrentConversation();
},
rvGetCurrentDate: function(){
let rvDt = new Date();
// if(botTimezone !="" && botTimezone != undefined){
// var date = new Date().toLocaleString("en-US", {timeZone: botTimezone});
// var rvDt = new Date(date)
// }
let rvDate = rvDt.getDate(),
rvMonth = rvDt.getMonth() + 1,
rvYear = rvDt.getFullYear();
if (rvDate.toString().length == 1) {
rvDate = "0" + rvDate;
}
if (rvMonth.toString().length == 1) {
rvMonth = "0" + rvMonth;
}
var rvCurrentDate = rvYear + "-" + rvMonth + "-" + rvDate;
return rvCurrentDate;
},
rvSendMessage: async function(rvMsg, botstatus, type, emit = '', Workflow_Id = "", Workflow_Next_Block = "", activateUser = "", noEmail = false){
let apiMessage = "";
if ( Visitor_Chat_Id != "" && !RV_Start_Conversation ) {
if( rvMsg != '' && typeof socket !== "undefined" && socket !== ""){
if(chatType == 'file'){
socket.emit("message", {
Conversation_Id: Conversation_Id,
customer_name: RV_Customer_Name,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: previewImg,
type: type,
chatType: chatType,
fileFormat:fileFormat,
fileSize: fileSize,
createdDate: new Date(),
createdAt: new Date(),
bot_type: botstatus === "workflow" ? true : false
});
}else{
socket.emit("message", {
Conversation_Id: Conversation_Id,
customer_name: RV_Customer_Name,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: rvMsg,
type: type,
createdDate: new Date(),
createdAt: new Date(),
bot_type: botstatus === "workflow" ? true : false
});
}
}
}
if( RV_MSG_BODY_HEIGHT != "" ){
var rvMessage = "";
rvMessage += typingLoader;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
}
if(chatType == 'file'){
apiMessage = previewImg
}else{
apiMessage = rvMsg
}
let url = "/api/v1/send-message";
let data = `Conversation_Id=${Conversation_Id}&type=${type}&Visitor_Chat_Id=${Visitor_Chat_Id}&message=${apiMessage}&Website_Id=${Website_Id}&time=${RvBotView.rvGetCurrentDate() + " " + RvBotView.rvGetCurrentTime()}&VisitorId=${VisitorId}¤t_option=${currentOption}&name=${rvGetCookies("rv_name")}&email=${rvGetCookies("rv_email")}&rv_agent_option=${RVAgentOption}`;
if(chatType == 'file'){
data += `&chatType=${chatType}&fileFormat=${fileFormat}&fileSize=${fileSize}`
}
if( Is_Agent_Flag == "changed" ){
data += `&is_live_chat=true`
Is_Agent_Flag = ""
}
if( botstatus == "no" ){
data += `&dialog=no`
}
if( type == "activity" && emit != "" ){
data += `&vistor_status=${emit}`
}
if( activateUser == 1 ){
data += `&logged_in=1`
}
if( botstatus == "workflow" ){
data += `&Agent_Bot_Workflow_Id=${Workflow_Id}`
if( Workflow_Next_Block != ""){
data += `&Workflow_Next_Block=${Workflow_Next_Block}`
}
}
if( noEmail ){
data += `&no_email=true`
}
var divNotify = document.createElement("div");
var textNotify = ""
try{
divNotify.innerHTML = decodeURIComponent(apiMessage);
}catch(e){
divNotify.innerHTML = apiMessage;
}
textNotify = divNotify.textContent || divNotify.innerText || "";
data += `&textNotify=${textNotify}`
if( RV_Start_Conversation || Conversation_Id == "" ){
data += `&new_conversation=1¤t_page_url=`+window.location.href
RV_Start_Conversation = false
if( collectionBreadCrumb.hasOwnProperty('collectionIndex') && collectionBreadCrumb.collectionIndex != "" && RV_ARTICLE_TYPE != "" ){
let collectionId = RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Collection_Id;
data += `&collection_id=${collectionId}`
}
}
let res = await RvBotView.rvXmlRequest(url, data);
if( res.status == true ){
chatType = ''
if (rvGetCookies("customer_id") == "" || rvGetCookies("customer_id") == null ) {
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
Website_Id = res.Website_Id;
if( rvMsg != '' && type != "activity" && typeof socket !== "undefined" && socket !== ""){
socket.emit("message", {
Conversation_Id: res.Conversation_Id,
customer_name: RV_Customer_Name,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: rvMsg,
type: type,
createdDate: new Date(),
createdAt: new Date(),
bot_type: botstatus === "workflow" ? true : false
});
}
}
if( Conversation_Id == "" || Conversation_Id == null ){
Conversation_Id = res.Conversation_Id;
let curConversation = res.conversation;
curConversation.Last_Msg = rvMsg;
curConversation.message = {
type: type,
message: rvMsg,
Conversation_Id: Conversation_Id,
Website_Id: Website_Id,
createdAt: curConversation.createdAt,
updatedAt: curConversation.updatedAt
};
Rv_Current_Conversation = curConversation;
RV_MSG.unshift(curConversation);
if( typeof socket !== "undefined" && socket !== "" ){
socket.emit("new_user",
{
Website_Id: res.Website_Id,
Visitor_Chat_Id: res.Visitor_Chat_Id,
Conversation_Id: Conversation_Id,
bot_type: botstatus === "workflow" ? true : false
}
);
}
}else{
RvBotView.updateCurrentConversation(rvMsg, type)
}
RvBotView.removeTyping();
if( res.Conversation_Id !== null && res.Conversation_Id !== "" ){
let ConversationObj = {Conversation_Id: res.Conversation_Id, timestamp: new Date().getTime()}
if( botstatus === "workflow" ){
ConversationObj.Workflow_Id = Workflow_Id
if( Workflow_Next_Block !== "" ){
ConversationObj.Workflow_Next_Block = Workflow_Next_Block
}
}
localStorage.setItem("Conversation_Id", JSON.stringify(ConversationObj));
}
if( currentOption == "faq" && botstatus != "no" ){
RvBotView.faqResponseDisplay(res.dialogflow_response);
}else if(currentOption == "workflow"){
RvBotView.workflowResponseDisplay(res.workflow_response, true, rvMsg, Workflow_Id)
}
}
},
faqResponseDisplay: function(dialogFlowResponse){
if (Object.keys(dialogFlowResponse).length > 0) {
//removeTyping();
var rvMsg = dialogFlowResponse.messages,
getCurTime = RvBotView.rvGetCurrentTime();
for (let i = 0; i < rvMsg.length; i++) {
let msg = rvMsg[i].replace(/\n/g, "
");
msg = RvBotView.convertMsgHtml(msg);
var name = botsetting.Agent_Bot_Name;
setTimeout(
function () {
var rvMessage;
if (i == 0) {
rvMessage = `
` + msg + `
`;
} else {
rvMessage = `
`;
}
if( RV_MSG_BODY_HEIGHT != "" ){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
}
RvBotView.updateCurrentConversation(msg, "bot");
if (i == 0) {
RvBotView.play();
}
}, i * 1000, i, RV_MSG_BODY_HEIGHT, msg, typingLoader
);
if(typeof socket !== "undefined" && socket !== ""){
socket.emit("message", {
Conversation_Id: Conversation_Id,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: msg,
type: "Bot",
createdDate: new Date(),
createdAt: new Date(),
bot_type: true
});
}
}
if (rvMsg.length > 0) {
var dd = divWidget;
if (dd.style.display == "none") {
var node = notificationContentFrame.body.getElementsByClassName("new-message");
var htmlContent = node[0].innerHTML;
var nsum = parseInt(htmlContent) + rvMsg.length;
pxSetCookie("1", "notify-value", nsum);
node[0].innerHTML = nsum;
notificationFrame.style.display = "block";
}
}
} else {
RvBotView.removeTyping();
}
},
updateCurrentConversation: function(msg, type, userId = "", checkConversationId = "", closed = false){
if( RV_MSG[0] && RV_MSG[0].Conversation_Id != Conversation_Id ){
let i;
for( i = 0; i < RV_MSG.length; i++ ){
if( RV_MSG[i].Conversation_Id == Conversation_Id || RV_MSG[i].Conversation_Id == checkConversationId ){
break;
}
}
if( i < RV_MSG.length ){
let spliceConversation = RV_MSG[i];
RV_MSG.splice( i, 1 );
RV_MSG.unshift(spliceConversation);
}
}
if( ( RV_MSG[0] && RV_MSG[0].Conversation_Id == Conversation_Id ) || ( RV_MSG[0] && RV_MSG[0].Conversation_Id == checkConversationId ) ){
if( !closed ){
RV_MSG[0].Last_Msg = msg;
RV_MSG[0].updatedAt = new Date().toISOString();
RV_MSG[0].message.type = type
RV_MSG[0].message.message = msg;
if( userId != "" ){
RV_MSG[0].Assign_To = userId;
RV_MSG[0].message.userId = userId;
RV_MSG[0].Last_Admin_Replied = userId
}
}else{
RV_MSG[0].closed = 1;
}
}
if( Rv_Current_Conversation.hasOwnProperty("Conversation_Id") && userId != ""){
if( Rv_Current_Conversation.Assign_To != userId ){
Rv_Current_Conversation.Last_Admin_Replied = userId;
RvBotView.assignAgentToConversation(userId);
}
}
},
workflowResponseDisplay: async function(workflowResponse, status = true, rvMsg = null, Workflow_Id = null ){
if( rvMsg === "Main Menu" && Workflow_Id === "" && parseInt(Website_Id) === 164 ){
if( websitePages.length > 0 ){
let msg = `
${botsetting.Bot_Agent_Description.replace(/\n/g, "
`,
getCurTime = RvBotView.rvGetCurrentTime(),
name = botsetting.Agent_Bot_Name;
RvBotView.updateCurrentConversation(msg, "bot");
var rvMessage = `
${msg}
`;
if( RV_MSG_BODY_HEIGHT != ""){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
RvBotView.rvResetMsgScroll();
}
RvBotView.play();
linkedFlag = false;
setTimeout(
function () {
RvBotView.removeTyping();
let buttonInnerHtml = "";
for (i = 0; i < websitePages.length; i++) {
let btn = websitePages[i];
buttonInnerHtml += `
${btn.Trigger_Message} `;
}
if( Forms.length > 0 ){
for(let i =0;i < Forms.length;i++){
if(Forms[i].Position == "quick link"){
buttonInnerHtml += `
${Forms[i].Button_Text} `
}
}
}
var msg1 = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
let domButtons = widgetContentFrame.querySelectorAll(".rve_dg_btn_options");
for (let k = 0; k < domButtons.length; k++) {
domButtons[k].addEventListener("click", RvBotView.innerMainMenuClickEvent);
}
}, 1000, RV_MSG_BODY_HEIGHT, websitePages, RV_WORKFLOW_ROUTE
);
}
}else{
let rvMsg = workflowResponse.content,
rvBtn = workflowResponse.buttons,
redirectURL = workflowResponse.redirect_url ? workflowResponse.redirect_url : null,
getCurTime = RvBotView.rvGetCurrentTime(),
msgArray = [],
msg = "",
linkedFlag = true;
currentWorkflowId = workflowResponse.Agent_Bot_Workflow_Id;
if( status ){
for (let i = 0; i < rvMsg.length; i++) {
msg = "";
switch (rvMsg[i].type){
case "text":
msg = rvMsg[i].message.replace(/\n/g, "
");
msg = RvBotView.convertMsgHtml(msg);
msg = `
${msg}
`;
break;
case "image":
msg = `
`
break;
case "gallery":
let gallery = rvMsg[i].gallery;
let galleryInner = '';
let style = "block";
for (let i = 0; i < gallery.length; i++) {
let buttonInnerHtml = "", msg1 = "";
let btnDetails = gallery[i].buttonDetails
for (let j = 0; j < btnDetails.length; j++) {
linkedFlag = false
let btn = btnDetails[j];
buttonInnerHtml += `
${btn.text} `;
}
if( btnDetails.length > 0 ){
msg1 = `
`;
}
if( i == 0 ){
style="block";
}else{
style="none";
}
galleryInner += `
`
}
if( gallery.length > 0 ){
msg = `
`
}
}
msgArray.push(msg);
RvBotView.updateCurrentConversation(msg, "bot");
let name = botsetting.Agent_Bot_Name;
setTimeout(
function () {
if (i == 0) {
var rvMessage = `
${msgArray[i]}
`;
} else {
var rvMessage = `
`;
}
if( msgArray[i] != "" && RV_MSG_BODY_HEIGHT != ""){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
RvBotView.rvResetMsgScroll();
}
if (i == 0) {
RvBotView.play();
}
}, i * 1000, i, RV_MSG_BODY_HEIGHT, msgArray, name, typingLoader
);
if(typeof socket !== "undefined" && socket !== ""){
socket.emit("message", {
Conversation_Id: Conversation_Id,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: msg,
type: "Bot",
createdDate: new Date(),
createdAt: new Date(),
bot_type: true
});
}
}
if (msgArray.length > 0) {
var dd = divWidget;
if (dd.style.display == "none") {
var node = toggleContentFrame.getElementsByClassName("new-message");
var htmlContent = node[0].innerHTML;
var nsum = parseInt(htmlContent) + msgArray.length;
pxSetCookie("1", "notify-value", nsum);
node[0].innerHTML = nsum;
node[0].style.display = "block";
}
}
}else{
rvMsg = [];
}
if (rvBtn.length > 0) {
linkedFlag = false;
setTimeout(
function () {
RvBotView.removeTyping();
let buttonInnerHtml = "";
for (i = 0; i < rvBtn.length; i++) {
let btn = rvBtn[i];
buttonInnerHtml += `
${btn.buttonText} `;
}
var backLength = 2;
if( parseInt(Website_Id) === 164 ){
buttonInnerHtml += `
Main Menu `
backLength = 1;
}
if( RV_WORKFLOW_ROUTE.length > 1 && parseInt(Website_Id) !== 164 ){
buttonInnerHtml += `
Main Menu `
}
if( RV_WORKFLOW_ROUTE.length > backLength ){
buttonInnerHtml += `
Back `
}
var msg1 = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
}, (rvMsg.length + 1) * 1000, RV_MSG_BODY_HEIGHT, rvBtn, RV_WORKFLOW_ROUTE
);
} else {
setTimeout(function () {
RvBotView.removeTyping();
}, (rvMsg.length + 1) * 1000);
}
setTimeout(
function () {
let domButtons = widgetContentFrame.querySelectorAll(".rve_dg_btn_options");
for (let k = 0; k < domButtons.length; k++) {
domButtons[k].addEventListener("click", RvBotView.rveDgClickEvent);
}
}, (rvMsg.length + 1) * 1000
);
if(!linkedFlag){
RvBotView.updateCurrentConversation("", "", "", Conversation_Id, true);
}
if( redirectURL ){
setTimeout(
async function(){
localStorage.removeItem("Conversation_Id");
currentOption = ""
RV_WORKFLOW_ROUTE = [];
RV_WORKFLOW_ROUTE_OBJ = {};
if( redirectURL.indexOf('rvhttp://') !== -1 ){
if( redirectURL.indexOf('rvhttp://form:') !== -1 ){
let formId = redirectURL.replace('rvhttp://form:', '');
formId = parseInt(formId)
let currentFormArray = Forms.filter(obj => obj.Form_Id == formId );
if( currentFormArray.length !== 0){
await RvBotView.rvOpenWidgetControl();
await RvBotView.rvInnerPageFooterLoad();
RvBotView.collectionData(formId);
}
}else if( redirectURL.indexOf('rvhttp://surveyform:') !== -1 ){
currentSurveyFormId = redirectURL.replace('rvhttp://surveyform:', '');
currentSurveyFormId = parseInt(currentSurveyFormId)
if( typeof surveyForms[currentSurveyFormId] !== "undefined" ){
currentSurveyForm = surveyForms[currentSurveyFormId]
currentSurveyFormStepIndex = 0
await RvBotView.rvOpenWidgetControl();
await RvBotView.rvInnerPageFooterLoad();
RV_Load_Conversation = true;
await RvBotView.startConversationFunc(false);
RvBotView.updateSurveyFormStats('Chat Message')
RvBotView.displaySurveyFormStep()
}
}else if( redirectURL.indexOf('rvhttp://vieworderstatus') !== -1 ){
RvBotView.orderStatusFunc()
}else if( redirectURL.indexOf('rvhttp://quicklinks') !== -1 ){
rvSetCookies(3, "rv_quick_link_Html", true)
RV_HOME_CONTENT = `
${RvBotView.quickLinkHtmlGenerate(false)}
`
RvBotView.goBackHomeBtnClicked()
}
}else{
window.location.href = redirectURL
}
}, (rvMsg.length+1) * 1000
)
}
}
},
innerMainMenuClickEvent: async function(e){
if( !e.target.dataset.form ){
let msg = e.target.dataset.msg
workflowIndex = e.target.dataset.value,
websitePage = websitePages[workflowIndex],
getCurTime = RvBotView.rvGetCurrentTime(),
name = ( RV_Customer_Name && RV_Customer_Name == null ) ? RV_Customer_Name : 'me';
msg = websitePage.Trigger_Message.replace(/\n/g, "
");
var rvMessage =`
${name}, ${getCurTime}
${msg}
`;
RvBotView.removeTyping();
if( widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper") && widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").querySelectorAll('.rvConvMsg') && widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").querySelectorAll('.rvConvMsg').length > 0 ){
var galleryParentNode = widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").parentNode
var galleryButtonNode = galleryParentNode.querySelectorAll('.rvConvMsg');
for (let m = 0; m < galleryButtonNode.length; m++) {
galleryButtonNode[m].remove();
}
var userIntent = `
`
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", userIntent);
RvBotView.rvResetMsgScroll();
}else if( widgetContentFrame.body.querySelector('.rve_dg_btn_Wrapper') ){
widgetContentFrame.body.querySelector('.rve_dg_btn_Wrapper').parentNode.innerHTML = rvMessage;
}
RvBotView.rvResetMsgScroll();
RV_WORKFLOW_ROUTE_OBJ = {};
RV_WORKFLOW_ROUTE = [];
await RvBotView.rvSendMessage( msg, "workflow", "user", "", websitePage.Agent_Bot_Workflow_Id, "", 0);
RvBotView.updateCurrentConversation(msg, "user");
currentWorkflowId = websitePage.Agent_Bot_Workflow_Id;
}else{
let formId = parseInt(e.target.dataset.value);
let currentFormArray = Forms.filter(obj => obj.Form_Id == formId );
if( currentFormArray.length !== 0){
await RvBotView.rvOpenWidgetControl();
await RvBotView.rvInnerPageFooterLoad();
RvBotView.collectionData(formId);
}
}
},
rveDgClickEvent: async function(e, msg = null, nextBlockId = null){
if( e ){
msg = e.target.dataset.msg
nextBlockId = e.target.dataset.value;
}
if( nextBlockId === "" ){
currentWorkflowId = RV_WORKFLOW_ROUTE[0]
RV_WORKFLOW_ROUTE = [];
}else if( RV_WORKFLOW_ROUTE.indexOf(nextBlockId) != -1 ){
let indexOfBlockId = RV_WORKFLOW_ROUTE.indexOf(nextBlockId);
RV_WORKFLOW_ROUTE.splice(indexOfBlockId+1, RV_WORKFLOW_ROUTE.length);
let objectKeys = Object.keys(RV_WORKFLOW_ROUTE_OBJ);
for(let i = 0; i < objectKeys.length; i++ ){
let key = objectKeys[i];
if( RV_WORKFLOW_ROUTE_OBJ[key].indexOf(nextBlockId) != -1 ){
currentWorkflowId = key;
}
}
}else{
if( RV_WORKFLOW_ROUTE.length === 0 ){
RV_WORKFLOW_ROUTE.push(currentWorkflowId)
}
RV_WORKFLOW_ROUTE.push(nextBlockId);
if(!RV_WORKFLOW_ROUTE_OBJ.hasOwnProperty(currentWorkflowId)){
RV_WORKFLOW_ROUTE_OBJ[currentWorkflowId] = [];
}
RV_WORKFLOW_ROUTE_OBJ[currentWorkflowId].push(nextBlockId)
}
if( RV_WORKFLOW_ROUTE.length > 1 && widgetContentFrame.body.querySelector('.rvGoBackHome') && !widgetContentFrame.body.querySelector('.rvGoBackHomeBtn') ){
widgetContentFrame.body.querySelector('.rvGoBackHome').insertAdjacentHTML("beforebegin", `
${RV_Back_Home_Button}
`);
RvBotView.goBackHomeBtnFunc()
}else if( RV_WORKFLOW_ROUTE.length <= 1 && widgetContentFrame.body.querySelector('.rvGoBackHomeBtn') ){
widgetContentFrame.body.querySelector('.rvGoBackHomeBtn').remove()
}
if (msg) {
msg = msg.replace(/\n/g, "
");
var msg1 = `
` + RV_Customer_Name + `, ` + RvBotView.rvGetCurrentTime() + `
` + RvBotView.convertMsgHtml(msg) + `
`;
RvBotView.removeTyping();
if( widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper") && widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").querySelectorAll('.rvConvMsg') && widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").querySelectorAll('.rvConvMsg').length > 0 ){
var galleryParentNode = widgetContentFrame.body.querySelector(".rvecGalleryBtnWrapper").parentNode
var galleryButtonNode = galleryParentNode.querySelectorAll('.rvConvMsg');
for (let m = 0; m < galleryButtonNode.length; m++) {
galleryButtonNode[m].remove();
}
var userIntent = `
`
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", userIntent);
RvBotView.rvResetMsgScroll();
}else if( widgetContentFrame.body.querySelector('.rve_dg_btn_Wrapper') ){
widgetContentFrame.body.querySelector('.rve_dg_btn_Wrapper').parentNode.innerHTML = msg1;
}
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
RvBotView.rvResetMsgScroll();
if( msg === "Main Menu" && parseInt(Website_Id) === 164 ){
await RvBotView.rvSendMessage( msg, "workflow", "user", "", "");
}else{
if( nextBlockId === "" ){
await RvBotView.rvSendMessage( msg, "workflow", "user", "", currentWorkflowId);
}else{
await RvBotView.rvSendMessage( msg, "workflow", "user", "", currentWorkflowId, nextBlockId);
}
}
RvBotView.updateCurrentConversation(msg, "user");
}
},
rvHomeScreenScroll: function (){
var rvHomeScreen = widgetContentFrame.body.querySelector('.rvHomeScreen');
if( rvHomeScreen ){
rvHomeScreen.onscroll = function() {
if(widgetContentFrame.body.querySelector('.rvMsgHeaderOpacity')){
let scrollTop, opacity;
if( rvHomeScreen.scrollTop == 0 ){
scrollTop = 0;
opacity = 1;
}else{
scrollTop = rvHomeScreen.scrollTop / 2;
opacity = 1 / ( scrollTop / 4 );
if( opacity < 0 ){
opacity = 0;
}
if( scrollTop > 120 ){
scrollTop = 120
}
}
widgetContentFrame.body.querySelector('.rvMsgHeaderOpacity').style.opacity = opacity;
widgetContentFrame.body.querySelector('.rvMsgHeaderOpacity').style.transform = `translateY(-${scrollTop}px)`;
}
}
}
},
addStartConversationEvent: function (){
var startConversationBtn = widgetContentFrame.body.querySelector('#startConversation');
if(startConversationBtn){
startConversationBtn.addEventListener("click", RvBotView.beforeStartNewConversation);
}
},
beforeStartNewConversation: function(){
let flag = false
if( RV_MSG.length > 0 ){
let currentDate = new Date();
for( let i = 0; i < RV_MSG.length; i++ ){
let conversationLastMsgDate = new Date(RV_MSG[i].updatedAt);
if( typeof RV_MSG[i].Is_Livechat !== "undefined" && RV_MSG[i].Is_Livechat === 1 && ( typeof RV_MSG[i].closed === "undefined" || ( typeof RV_MSG[i].closed !== "undefined" && RV_MSG[i].closed === 0 ) ) && currentDate.getMonth() === conversationLastMsgDate.getMonth() && currentDate.getFullYear() === conversationLastMsgDate.getFullYear() && currentDate.getDay() === conversationLastMsgDate.getDay() ){
flag = true
break;
}
}
if( flag ){
RvBotView.loadActiveConversation()
}else{
RvBotView.startNewConversation()
}
}else{
RvBotView.startNewConversation()
}
},
loadActiveConversation: function(){
RvBotView.rvInnerPageFooterLoad()
let widgetHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader > div');
widgetHeader.innerHTML = "";
if(widgetContentFrame.body.querySelector('.rvHomeScreenWrap')){
widgetContentFrame.body.querySelector('.rvHomeScreenWrap').remove();
}
if(widgetContentFrame.body.querySelector('.rvMessengerHeader .breadCrumbHtml')){
widgetContentFrame.body.querySelector('.rvMessengerHeader .breadCrumbHtml').remove();
}
if(widgetContentFrame.body.querySelector('.rvInnerPageWrap')){
widgetContentFrame.body.querySelector('.rvInnerPageWrap').remove();
}
//widgetHomeContent.innerHTML = "";
widgetContentFrame.body.querySelector('.rvMessengerHeader').style.height = "75px";
chatToggleFrame.classList.remove('position2','position3','position4');
chatToggleFrame.classList.add('position1');
avatar = RvBotView.conversationAvatarCreation();
assignedUser = RvBotView.conversationAssignedUser();
let timeText = "Back in";
if( RVAgentOption ){
timeText = "";
}
var activeConversationHeader = ``
widgetHeader.innerHTML = activeConversationHeader;
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
let messageList = "";
let totalActiveConversation = 0
let currentDate = new Date();
for(let i = 0; i < RV_MSG.length; i++ ){
let conversationLastMsgDate = new Date(RV_MSG[i].updatedAt);
if( typeof RV_MSG[i].Is_Livechat !== "undefined" && RV_MSG[i].Is_Livechat === 1 && ( typeof RV_MSG[i].closed === "undefined" || ( typeof RV_MSG[i].closed !== "undefined" && RV_MSG[i].closed === 0 ) ) && currentDate.getMonth() === conversationLastMsgDate.getMonth() && currentDate.getFullYear() === conversationLastMsgDate.getFullYear() && currentDate.getDay() === conversationLastMsgDate.getDay() ){
let currentMsg = RV_MSG[i];
let assignedUser = avatar = name = "";
avatar = RvBotView.conversationAvatarCreation(currentMsg);
name = RvBotView.conversationLastSend(currentMsg);
assignedUser = RvBotView.conversationAssignedUser(currentMsg);
messageList += `
${avatar}
${assignedUser} • ${RvBotView.rvConvertDateTime(currentMsg.updatedAt)}
${name ? name+" : " : ""}${( currentMsg && typeof currentMsg.message != "undefined" && currentMsg.message != null ) && RvBotView.rvStripHtml(currentMsg.message.message)}
`
totalActiveConversation++
}
}
var previousMsgHtml = `
Create New Conversation
Previous Conversation${totalActiveConversation > 0 ? "s" : ""}
`
var messageWrapHtml = `
${previousMsgHtml}
${messageList}
`;
rvMessengerHeader.insertAdjacentHTML('afterend', messageWrapHtml);
RvBotView.goBackHomeButton();
RvBotView.loadOldConversation();
},
startNewConversation: function( videoResponse = false ){
if( !videoResponse ){
RV_Start_Conversation = true;
}else{
RV_Start_Conversation = false;
}
Is_Agent_Flag = "changed";
RV_Start_Live_Chat = true;
currentOption = "live_chat"
RvBotView.rvInnerPageFooterLoad();
RvBotView.startConversationFunc();
},
constructMessage: function (ConversationMessages){
let messageHtml = "";
for (var i = 0; i < ConversationMessages.length; i++) {
let msg, flag = false
if(!/<\/?[a-z][\s\S]*>/i.test(ConversationMessages[i].message) ){
msg = ConversationMessages[i].message.replace(/\n/g, "
");
msg = RvBotView.convertMsgHtml(msg);
flag = true
}else{
msg = ConversationMessages[i].message
}
var setTime = RvBotView.rvGetCurrentTime(ConversationMessages[i].createdAt);
if (ConversationMessages[i].type == "user") {
if( flag ){
if( typeof ConversationMessages[i].chatType !== "undefined" && ConversationMessages[i].chatType == "file"){
if(ConversationMessages[i].fileFormat == 'pdf' || ConversationMessages[i].fileFormat == 'doc' || ConversationMessages[i].fileFormat == 'docx' || ConversationMessages[i].fileFormat == "vnd.openxmlformats-officedocument.wordprocessingml.document" ){
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat} `;
}else{
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat}
`
}
}else if( typeof ConversationMessages[i].chatType !== "undefined" && ConversationMessages[i].chatType == "audio_response" && typeof ConversationMessages[i].Audio_URL !== "undefined" && ConversationMessages[i].Audio_URL !== "" && ConversationMessages[i].Audio_URL !== null ){
msg = `
`
}else if( typeof ConversationMessages[i].chatType !== "undefined" && ConversationMessages[i].chatType == "video_response" && typeof ConversationMessages[i].Video_URL !== "undefined" && ConversationMessages[i].Video_URL !== "" && ConversationMessages[i].Video_URL !== null ){
msg = `
`
}else{
msg = `
${msg.replace(/(?:\r\n|\r|\n)/g, '
`
}
}else{
if( typeof ConversationMessages[i].chatType !== "undefined" ){
if(ConversationMessages[i].chatType == "file"){
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat}
`
}else if( ConversationMessages[i].chatType === "audio_response" && typeof ConversationMessages[i].Audio_URL !== "undefined" && ConversationMessages[i].Audio_URL !== "" && ConversationMessages[i].Audio_URL !== null ){
msg = `
`
}else if( ConversationMessages[i].chatType == "video_response" && typeof ConversationMessages[i].Video_URL !== "undefined" && ConversationMessages[i].Video_URL !== "" && ConversationMessages[i].Video_URL !== null ){
msg = `
`
}
}
}
messageHtml += `
${RV_Customer_Name}, ${setTime}
${msg}
`;
}else{
let name = "admin";
let dpImage = botsetting.Bot_Agent_Avatar
if ( ConversationMessages[i].type && ConversationMessages[i].type.toLowerCase() == "bot") {
name = botsetting.Agent_Bot_Name;
}else if( ConversationMessages[i].userId && ConversationMessages[i].userId != "" ){
let msgUser = ConversationMessages[i].userId;
if( AgentDetails[msgUser] ){
name = AgentDetails[msgUser].firstName;
if(AgentDetails[msgUser].lastName){
name += " "+AgentDetails[msgUser].lastName;
}
if( AgentDetails[msgUser].dp && AgentDetails[msgUser].dp !== "" ){
dpImage = AgentDetails[msgUser].dp;
}
}
}
if( flag ){
if(ConversationMessages[i].chatType == "file"){
if(ConversationMessages[i].fileFormat == 'pdf' || ConversationMessages[i].fileFormat == 'doc' || ConversationMessages[i].fileFormat == 'docx' || ConversationMessages[i].fileFormat == "vnd.openxmlformats-officedocument.wordprocessingml.document" ){
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat}
`
}else{
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat}
`
}
}else{
msg = `
${msg}
`
}
}else{
if(ConversationMessages[i].chatType == "file"){
msg = `
${ConversationMessages[i].fileSize} ${ConversationMessages[i].fileFormat}
`
}
}
messageHtml += `
${msg}
`;
}
}
return messageHtml;
},
fetchCurrentConversation: async function( status = true ){
var widgetHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader > div');
widgetHeader.innerHTML = "";
if(widgetContentFrame.body.querySelector('.rvHomeScreenWrap')){
widgetContentFrame.body.querySelector('.rvHomeScreenWrap').remove();
}
if( widgetContentFrame.body.querySelector('.rvInnerPageWrap') ){
widgetContentFrame.body.querySelector('.rvInnerPageWrap').remove();
}
let timeText = "Back in";
if( RVAgentOption ){
timeText = "";
}
widgetContentFrame.body.querySelector('.rvMessengerHeader').style.height = "75px";
chatToggleFrame.classList.remove('position2','position3','position4');
chatToggleFrame.classList.add('position1');
let assignedUser = avatar = "";
avatar = RvBotView.conversationAvatarCreation(Rv_Current_Conversation);
assignedUser = RvBotView.conversationAssignedUser(Rv_Current_Conversation);
var conversationHeader = ``
widgetHeader.innerHTML = conversationHeader;
let rvLoader = `
`
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
rvMessengerHeader.insertAdjacentHTML("afterend", rvLoader);
let url = "/api/v1/getConversationMessage";
let data = `Website_Id=${Website_Id}&Conversation_Id=${Conversation_Id}`
let res = await RvBotView.rvXmlRequest(url, data)
let ConversationMessages = []
let currentConv = ""
if( res.status == true ){
ConversationMessages = res.Data;
currentConv = res.Conversation;
}
let ConversationObj = {Conversation_Id: Conversation_Id, timestamp: new Date().getTime()}
if( typeof currentConv.Agent_Bot_Workflow_Id !== "undefined" ){
ConversationObj.Workflow_Id = currentConv.Agent_Bot_Workflow_Id
if( typeof currentConv.Latest_Next_Flow !== "undefined" && currentConv.Latest_Next_Flow !== null ){
ConversationObj.Workflow_Next_Block = currentConv.Latest_Next_Flow
}
}
localStorage.setItem("Conversation_Id", JSON.stringify(ConversationObj));
if( Object.keys(Rv_Current_Conversation).length == 0 && currentConv !== "" && ConversationMessages.length > 0 ){
currentConv.message = ConversationMessages[ConversationMessages.length - 1];
Rv_Current_Conversation = currentConv;
avatar = RvBotView.conversationAvatarCreation(Rv_Current_Conversation);
assignedUser = RvBotView.conversationAssignedUser(Rv_Current_Conversation);
var conversationHeader = ``
widgetHeader.innerHTML = conversationHeader;
}
let messageHtml = await RvBotView.constructMessage(ConversationMessages);
rvInnerPageWrap = widgetContentFrame.body.querySelector('.rvInnerPageWrap');
rvInnerPageWrap.remove();
let chatConversationBottom = closedConversationClass = workflowClass = "" ;
if( typeof Rv_Current_Conversation.Is_Livechat !== "undefined" && Rv_Current_Conversation.Is_Livechat == 1 && typeof Rv_Current_Conversation.closed != "undefined" && Rv_Current_Conversation.closed == 1){
closedConversationClass = "closedConversationWrap";
chatConversationBottom = `
`
}else{
if( typeof Rv_Current_Conversation.Is_Livechat == "undefined" || Rv_Current_Conversation.Is_Livechat == 0 ){
workflowClass = "workflowConversation"
chatConversationBottom = ``;
}else{
chatConversationBottom = `
`
}
}
var chatConversationHtml = `
${chatConversationBottom}`
rvMessengerHeader.insertAdjacentHTML('afterend', chatConversationHtml);
RV_MSG_BODY_HEIGHT = widgetContentFrame.body.querySelector('#rvMessengerHeight');
RV_MSG_BODY = widgetContentFrame.body.querySelector('.rvConversationMessage');
var slideHtml = `
❮ ❯ `
var galleryOuterContainers = widgetContentFrame.getElementsByClassName('rvecGalleryOuterContainer');
var galleryInnerContainers = widgetContentFrame.getElementsByClassName('rvecGalleryInnerContainer');
if(galleryInnerContainers.length > 0){
for (let galleryIndex = 0; galleryIndex < galleryInnerContainers.length; galleryIndex++) {
let galleryInnerContainerObj = galleryInnerContainers[galleryIndex];
let galleryOuterContainerObj = galleryOuterContainers[galleryIndex];
let slides = galleryInnerContainerObj.children;
if( slides.length > 0 ){
galleryOuterContainerObj.insertAdjacentHTML('beforeend', slideHtml)
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[0].style.display = "block";
}
}
if(widgetContentFrame.querySelector('.rvReplyInputBox > textarea')){
widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
}
RvBotView.goBackHomeButton();
RvBotView.rvResetMsgScroll();
RvBotView.clickChatMessageLink();
if( closedConversationClass != "" ){
RvBotView.reOpenConversationEvent();
}
RvBotView.continueLoadOldConversation( status );
},
continueLoadOldConversation: async function( status ){
if( typeof Rv_Current_Conversation.Is_Livechat != "undefined" && Rv_Current_Conversation.Is_Livechat == 1 && ( typeof Rv_Current_Conversation.closed == "undefined" || ( typeof Rv_Current_Conversation.closed != "undefined" && Rv_Current_Conversation.closed == 0 ) ) ){
if( status ){
if( No_Help_Array.includes(rvWebsiteId) ){
RvBotView.rvCollectMessage()
}else{
if( !rvGetCookies("rv_email") ) {
if(RV_ORDER_EMAIL !== "" ){
rvSetCookies(31, "rv_email", RV_ORDER_EMAIL)
RV_Customer_Email = RV_ORDER_EMAIL
RvBotView.updateEmailLead(RV_Customer_Email);
RvBotView.rvCollectNameInformation();
}else{
RvBotView.rvCollectEmailInformation();
}
}else if( !rvGetCookies("rv_name") ) {
RvBotView.rvCollectNameInformation();
}else if( typeof Rv_Current_Conversation.Assign_To == "undefined" || ( typeof Rv_Current_Conversation.Assign_To != "undefined" && Rv_Current_Conversation.Assign_To == "" ) ){
RvBotView.rvCollectMessage()
}else{
RvBotView.sendMessageEvent();
}
}
}else{
RvBotView.sendMessageEvent();
}
}else if( typeof Rv_Current_Conversation.Is_Livechat != "undefined" && Rv_Current_Conversation.Is_Livechat == 0 && ( typeof Rv_Current_Conversation.closed == "undefined" || ( typeof Rv_Current_Conversation.closed != "undefined" && Rv_Current_Conversation.closed == 0 ) ) ){
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
if( typeof Rv_Current_Conversation.Latest_Workflow_Id !== "undefined" && Rv_Current_Conversation.Latest_Workflow_Id !== "" ){
let url = "/api/v1/getWorkflowDetail";
let data = `Conversation_Id=${Conversation_Id}&Visitor_Chat_Id=${Visitor_Chat_Id}&Website_Id=${Website_Id}&Agent_Bot_Workflow_Id=${Rv_Current_Conversation.Latest_Workflow_Id}`;
if( typeof Rv_Current_Conversation.Latest_Next_Flow !== "undefined" && Rv_Current_Conversation.Latest_Next_Flow != ""){
data += `&Workflow_Next_Block=${Rv_Current_Conversation.Latest_Next_Flow}`
}
let res = await RvBotView.rvXmlRequest(url, data);
if( res.status == true ){
RvBotView.workflowResponseDisplay(res.workflow_response, false)
}
}
}
},
reOpenConversationEvent: function (){
let rvStartConversation = widgetContentFrame.querySelector('.rvStartConversation');
if(rvStartConversation){
rvStartConversation.addEventListener("click", RvBotView.openClosedConversation);
}
},
openClosedConversation: async function(event){
if( Conversation_Id != "" ){
event.target.parentNode.classList.add("loader");
event.target.setAttribute("disabled", "disabled");
let url = "/api/v1/openClosedConversation";
let data = `Website_Id=${Website_Id}&Conversation_Id=${Conversation_Id}`
let res = await RvBotView.rvXmlRequest(url, data)
if( res.status == true ){
RvBotView.openClosedConversationFunc();
}else{
event.target.removeAttribute("disabled");
event.target.parentNode.classList.remove("loader");
}
}
},
openClosedConversationFunc: function(){
let rvReplyInputBox = widgetContentFrame.querySelector('.rvReplyInputBox');
if( rvReplyInputBox ){
if( widgetContentFrame.querySelector('.rvConversationMessage') ){
widgetContentFrame.querySelector('.rvConversationMessage').classList.remove('closedConversationWrap');
}
rvReplyInputBox.classList.remove('closedConversation');
rvReplyInputBox.classList.remove('loader');
rvReplyInputBox.innerHTML = `
`
if(widgetContentFrame.querySelector('.rvReplyInputBox > textarea')){
widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
}
Rv_Current_Conversation.closed = 0;
for( let i = 0; i < RV_MSG.length; i++ ){
if( RV_MSG[i].Conversation_Id == Conversation_Id ){
RV_MSG[i].closed = 0;
break;
}
}
RvBotView.continueLoadOldConversation();
}
},
startConversationFunc: async function( flag = true, breadCrumbsArgs = false, openTextWidget = true, faqWidgetOption = false){
var widgetHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader > div');
widgetHeader.innerHTML = "";
if(widgetContentFrame.body.querySelector('.rvHomeScreenWrap')){
widgetContentFrame.body.querySelector('.rvHomeScreenWrap').remove();
}
if( widgetContentFrame.body.querySelector('.rvInnerPageWrap') ){
widgetContentFrame.body.querySelector('.rvInnerPageWrap').remove();
}
if( widgetContentFrame.body.querySelector('.rvReplyInputBox') ){
widgetContentFrame.body.querySelector('.rvReplyInputBox').remove()
}
let timeText = "Back in";
if( RVAgentOption ){
timeText = "";
}
//widgetHomeContent.innerHTML = "";
widgetContentFrame.body.querySelector('.rvMessengerHeader').style.height = "75px";
chatToggleFrame.classList.remove('position2','position3','position4');
chatToggleFrame.classList.add('position1');
var conversationHeader = ``
if( !flag ){
conversationHeader = ``
}
widgetHeader.innerHTML = conversationHeader;
var rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
RvBotView.goBackHomeButton();
//RvBotView.sendMessageEvent();
RvBotView.rvResetMsgScroll();
RvBotView.clickChatMessageLink();
if( flag ){
if( ( botsetting.Pre_Chat_Options === "outside" || botsetting.Pre_Chat_Options === "both" ) && RVAgentOption === false && botsetting.Pre_Chat_Form.offline.Form_Fields.length > 0 ){
RvBotView.generatePreChatForm(botsetting.Pre_Chat_Form.offline)
}else if( ( botsetting.Pre_Chat_Options === "inside" || botsetting.Pre_Chat_Options === "both" ) && RVAgentOption === true && botsetting.Pre_Chat_Form.online.Form_Fields.length > 0 ){
RvBotView.generatePreChatForm(botsetting.Pre_Chat_Form.online)
}else{
var chatConversationHtml = `
`
rvMessengerHeader.insertAdjacentHTML('afterend', chatConversationHtml);
RV_MSG_BODY_HEIGHT = widgetContentFrame.body.querySelector('#rvMessengerHeight');
RV_MSG_BODY = widgetContentFrame.body.querySelector('.rvConversationMessage');
if( breadCrumbsArgs ){
let productFaqMessage = `
Start a Conversation
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Title}
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].articles[collectionBreadCrumb.articleIndex].Title}
`
let rvMsg = `
` + RV_Customer_Name +`, ` +RvBotView.rvGetCurrentTime() +`
${productFaqMessage}
`
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage(encodeURIComponent(productFaqMessage), "", "user");
RvBotView.updateCurrentConversation(productFaqMessage, "user");
}
RvBotView.initiateConversation();
}
}else if(RV_Load_Conversation){
var chatConversationHtml = `
`
rvMessengerHeader.insertAdjacentHTML('afterend', chatConversationHtml);
RV_MSG_BODY_HEIGHT = widgetContentFrame.body.querySelector('#rvMessengerHeight');
RV_MSG_BODY = widgetContentFrame.body.querySelector('.rvConversationMessage');
if(openTextWidget){
widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
}
if( !flag && parseInt(Website_Id) === 164 ){
widgetContentFrame.querySelector('.rvReplyInputBox').style.opacity = 0
}else{
widgetContentFrame.querySelector('.rvReplyInputBox').style.opacity = 1
}
if(faqWidgetOption){
let msg = "Please enter your queries"
let rvMsg = `
${msg}
`
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
RV_Start_Conversation = true;
await RvBotView.rvSendMessage(msg, "no", "bot");
RvBotView.sendMessageEvent();
}
}
},
sendMessageEvent: function (){
if(widgetContentFrame.querySelector('.rvReplyInputBox > textarea')){
widgetContentFrame.querySelector('.rvReplyInputBox > textarea').removeAttribute('disabled');
widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.remove('disabled');
}
var textArea = widgetContentFrame.body.querySelector('.rvReplyInputBox textarea');
if( textArea ){
textArea.addEventListener("keydown", async function (e) {
var rvMsg = this.value;
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
if (!event.shiftKey) {
e.preventDefault();
if (rvMsg) {
rvMsg = rvMsg.replace(/\n/g, "
");
var msg = `
` + RV_Customer_Name +`, ` +RvBotView.rvGetCurrentTime() +`
` +RvBotView.convertMsgHtml(rvMsg) +`
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg);
let message = this.value;
textArea.value = "";
await RvBotView.rvSendMessage(message, "", "user");
RvBotView.updateCurrentConversation(message, "user");
RvBotView.rvResetMsgScroll();
//if( msgRead ){
RvBotView.rvEcUserNotify();
//}
}
return false;
}
}
});
textArea.addEventListener("keyup", function (e) {
var rvMsg = this.value;
if (rvMsg) {
widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton").classList.add("active");
if (Visitor_Chat_Id == "" && typeof socket !== "undefined" && socket !== "") {
socket.emit("user_typing", {
Conversation_Id: Conversation_Id,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
type: "typing",
typing: true,
});
}
RvBotView.rvActiveButtonCall();
} else {
var rvBtnActive = widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton.active");
if( rvBtnActive ){
rvBtnActive.removeEventListener("click", RvBotView.sendMsgBtnClick);
widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton").classList.remove("active");
}
}
});
}
var getValueQuery = widgetContentFrame.body.querySelector(".handleImageUpload")
if(getValueQuery){
getValueQuery.addEventListener("change", RvBotView.handleImageUpload);
}
},
rvActiveButtonCall: function() {
var rvBtnActive = widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton.active");
rvBtnActive.addEventListener("click", RvBotView.sendMsgBtnClick);
},
sendMsgBtnClick: async function(){
var msg = widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value;
if (RV_Customer_Name == null) {
name = "me";
}
if(chatType == 'file' && previewImg !=''){
// if (msg) {
// msg = msg.replace(/\n/g, "
");
// var msg1 = `
` + name + `, ` + RvBotView.rvGetCurrentTime() +`
` + RvBotView.convertMsgHtml(msg) +`
`;
// RvBotView.removeTyping();
// RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
// RvBotView.rvResetMsgScroll();
// widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value = "";
// await RvBotView.rvSendMessage(msg, "", "user");
// RvBotView.updateCurrentConversation(msg, "user");
// this.classList.remove("active");
// if( msgRead ){
// RvBotView.rvEcUserNotify();
// }
// }
if (previewImg) {
previewImg = await RvBotView.rvImageUpload(previewImg);
msg = previewImg;
var msg1 = ''
if(fileFormat == 'pdf' || fileFormat == 'doc' || fileFormat == 'docx' || fileFormat == "vnd.openxmlformats-officedocument.wordprocessingml.document" ){
msg1 = `
` + name + `, ` + RvBotView.rvGetCurrentTime() +`
${fileSize} ${fileFormat}
`;
}else{
msg1 = `
` + name + `, ` + RvBotView.rvGetCurrentTime() +`
${fileSize} ${fileFormat}
`;
}
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value = "";
await RvBotView.rvSendMessage(msg, "", "user");
let imgFrame = widgetContentFrame.body.querySelector(".small-upload")
imgFrame.style.display = "none";
RvBotView.updateCurrentConversation(msg, "user");
this.classList.remove("active");
//if( msgRead ){
RvBotView.rvEcUserNotify();
//}
previewImg = ''
}
}else{
if (msg) {
msg = msg.replace(/\n/g, "
");
var msg1 = `
` + name + `, ` + RvBotView.rvGetCurrentTime() +`
` + RvBotView.convertMsgHtml(msg) +`
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value = "";
await RvBotView.rvSendMessage(msg, "", "user");
RvBotView.updateCurrentConversation(msg, "user");
this.classList.remove("active");
//if( msgRead ){
RvBotView.rvEcUserNotify();
//}
}
}
},
rvImageUpload: async function(Img){
let url = "/api/v1/imageuploadStorage";
let data = {attachment:Img,type:'image'};
let res = await RvBotView.rvXmlJsonRequest(url, data,'micro3');
if( res.status == 'success' ){
previewImg = res.data.attachment;
return previewImg;
}
},
goBackHomeButton: function (){
var homeButton = widgetContentFrame.body.querySelector('.rvGoBackHome');
homeButton.addEventListener("click", RvBotView.goBackHomeButtonClicked);
},
goBackHomeBtnFunc: function(){
var homeButton = widgetContentFrame.body.querySelector('.rvGoBackHomeBtn');
homeButton.addEventListener("click", RvBotView.goBackHomeBtnClicked);
},
goBackHomeBtnClicked: function(){
var widgetHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader > div');
widgetHeader.innerHTML = RV_HOME_HEADER;
if( !widgetContentFrame.body.querySelector('.rvHomeScreenWrap') ){
var rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
rvMessengerHeader.insertAdjacentHTML('afterend', RV_HOME_CONTENT);
}
widgetContentFrame.body.querySelector('.rvMessengerHeader').style.height = "275px";
chatToggleFrame.classList.remove('position1','position3','position4');
chatToggleFrame.classList.add('position2');
if( widgetContentFrame.body.querySelector('.rvConversationMessage') ){
widgetContentFrame.body.querySelector('.rvConversationMessage').remove();
}
if( widgetContentFrame.body.querySelector('.rvReplyInputBox') ){
widgetContentFrame.body.querySelector('.rvReplyInputBox').remove();
}
if( widgetContentFrame.body.querySelector('.rvInnerPageWrap') ){
widgetContentFrame.body.querySelector('.rvInnerPageWrap').remove();
}
if( widgetContentFrame.body.querySelector('#calendlyWidget') ){
widgetContentFrame.body.querySelector('#calendlyWidget').remove();
}
RvBotView.rvHomePageFooterLoad();
//RvBotView.rvDisplayLastMsg();
RvBotView.homeScreenFunction();
localStorage.removeItem("Conversation_Id");
RV_MSG_BODY_HEIGHT = "";
RV_MSG_BODY = "";
collectionBreadCrumb = {};
RV_ORDER_BREADCRUMBS = {};
Conversation_Id = "";
Rv_Current_Conversation = {}
RV_ARTICLE_TYPE = "";
collectionBreadCrumb = {};
RV_WORKFLOW_ROUTE = [];
RV_WORKFLOW_ROUTE_OBJ = {};
RV_Current_Chat_Option = "Website Chat";
RV_Load_Conversation = false
RV_Pre_Chat_Form_Stats = ''
},
goBackHomeButtonClicked: function(){
if( parseInt(Website_Id) === 164 && currentOption === "workflow" && RV_WORKFLOW_ROUTE.length > 1 ){
if( RV_WORKFLOW_ROUTE.length === 2 ){
RvBotView.rveDgClickEvent(null, "Main Menu", "")
}else{
RvBotView.rveDgClickEvent(null, "Back", RV_WORKFLOW_ROUTE[RV_WORKFLOW_ROUTE.length - 2])
}
return
}
RvBotView.goBackHomeBtnClicked()
},
quickLinkHtmlGenerate: function( flag = true ){
let quickLinksHtml = "",
quickLinkWholeHtml = "";
if( RV_ORDER_STATUS ){
quickLinksHtml += `
Check your order status
Track and manage your orders
`
}
if(No_Help_Array.includes(rvWebsiteId)){
if( botsetting.Other_Article ){
quickLinksHtml += `
`
}
if( botsetting.Faq_Article ){
let productTitle = "Product FAQs"
if( RV_SERVER_URL === "roundvue.com" ){
productTitle = "FAQs"
}
quickLinksHtml += `
${productTitle}
Browse our FAQs
`
}
}else{
if( parseInt(Website_Id) !== 164 || rvGetCookies("rv_quick_link_Html") ){
if( botsetting.Faq_Article ){
let productTitle = "Product FAQs"
if( RV_SERVER_URL === "roundvue.com" ){
productTitle = "FAQs"
}
quickLinksHtml += `
${productTitle}
Browse our FAQs
`
}
if( botsetting.Other_Article ){
quickLinksHtml += `
`
}
}
if( parseInt(Website_Id) === 164 && flag ){
for(let i =0;i < websitePages.length;i++){
quickLinksHtml += `
${websitePages[i].Trigger_Message}
`
}
}
}
for(let i =0;i < Forms.length;i++){
if(Forms[i].Position == "quick link"){
quickLinksHtml += `
`
}
}
if( quickLinksHtml != "" ){
quickLinkWholeHtml = `
`
}
return quickLinkWholeHtml;
},
rvLoadWidgetHTML: function( setting, botsetting){
// let chatIconImg = chatIcon,
// chatIconClass = "defaultRVLogoIcon";
// if( parseInt(Website_Id) === 164 ){
let chatIconImg = customChatIcon,
chatIconClass = "customRVLogoIcon";
chatToggleFrame.classList.add("customSizeToggleRV");
triggerFrame.classList.add("customSizeToggleRV");
// }
if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { // DOM
widgetContentFrame = widgetFrame.contentDocument;
toggleContentFrame = chatToggleFrame.contentDocument;
triggerContentFrame = triggerFrame.contentDocument;
}else { // IE win
widgetContentFrame = widgetFrame.contentWindow.document;
toggleContentFrame = chatToggleFrame.contentWindow.document;
triggerContentFrame = triggerFrame.contentWindow.document;
}
RvBotView.rvEcLoadScript("https://cdn.socket.io/4.4.1/socket.io.js");
let botPositionClass = "";
if(botsetting.Bot_Agent_Position == "Left"){
botPositionClass = 'botPositionLeft';
}else{
botPositionClass = 'botPositionRight';
}
widgetFrame.classList.add(botPositionClass);
chatToggleFrame.classList.add(botPositionClass);
triggerFrame.classList.add(botPositionClass);
notificationFrame.classList.add(botPositionClass);
divWidget.classList.add(botPositionClass);
var toggleFrameStyle = document.createElement("style");
toggleFrameStyle.innerText = RvBotView.chatToggleCssFile();
toggleContentFrame.head.appendChild(toggleFrameStyle);
var chatToggleHtml = `
`;
toggleContentFrame.body.insertAdjacentHTML("beforeend", chatToggleHtml);
chatToggleFrame.style.display="block";
var widgetFrameStyle = document.createElement("style");
widgetFrameStyle.innerText = RvBotView.widgetCssFile();
// var widgetFontAwesome = document.createElement("link");
// widgetFontAwesome.rel = "stylesheet";
// widgetFontAwesome.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css";
// widgetFontAwesome.crossorigin = "anonymous";
// widgetFontAwesome.integrity = "sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==";
// widgetFontAwesome.referrerpolicy = "no-referrer";
widgetContentFrame.head.appendChild(widgetFrameStyle);
widgetContentFrame.body.insertAdjacentHTML("beforeend", '
');
toggleContentFrame.body.insertAdjacentHTML("beforeend", '
');
let welcomeTitle = botsetting.Welcome_Title
let replaceText = botsetting.Welcome_Title_Fallback ? botsetting.Welcome_Title_Fallback : "There";
if( botsetting.Welcome_Title && botsetting.Welcome_Title.indexOf("$firstName") != -1 ){
if( RV_Customer_Name != "me" ){
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$firstName', 'g'), RV_Customer_Name);
}else{
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$firstName', 'g'), replaceText);
}
}
if( botsetting.Welcome_Title && botsetting.Welcome_Title.indexOf("$lastName") != -1 ){
if( RV_Customer_Name != "me" ){
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$lastName', 'g'), RV_Customer_Name);
}else{
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$lastName', 'g'), replaceText);
}
}
if( botsetting.Welcome_Title && botsetting.Welcome_Title.indexOf("$name") != -1 ){
if( RV_Customer_Name != "me" ){
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$name', 'g'), RV_Customer_Name);
}else{
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$name', 'g'), replaceText);
}
}
if( botsetting.Welcome_Title && botsetting.Welcome_Title.indexOf("$email") != -1 ){
if( RV_Customer_Email != "" ){
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$email', 'g'), RV_Customer_Email);
}else{
welcomeTitle = botsetting.Welcome_Title.replace(new RegExp('\\$email', 'g'), replaceText);
}
}
let timeText = "Back in";
let timeValue = RvBotView.getNextAvailableTime();
if( RVAgentOption ){
timeText = "";
timeValue = "We typically reply in a few minutes";
if( parseInt(Website_Id) === 164 ){
timeValue = "Available Now"
}
let i = 0;
for (const [key, value] of Object.entries(AgentDetails)) {
if( i == 3 ){
break;
}
if( value.Online_Status !== "Offline" ){
i++;
if( value.dp && value.dp != "" ){
agentInformationHtml += `
`
}else{
let initials = "";
if( value.firstName ){
initials = value.firstName.substring(0,1).toUpperCase();
}
if( value.lastName ){
initials += value.lastName.substring(0,1).toUpperCase();
}
agentInformationHtml += `
`;
}
}
}
if( i === 0 ){
agentInformationHtml += `
`
if( parseInt(Website_Id) === 164 ){
timeValue = "Available Now"
}else{
timeValue = "Back in few minutes"
}
}
}else{
agentInformationHtml += `
`
}
if( timeValue === "undefined" ){
timeValue = "in a day"
}
RV_HOME_HEADER = ``
// let conversationWholeHtml = `
//
//
//
//
//
//
//
//
//
//
//
//
//
// ${RV_BTN_TEXT}
//
//
//
//
//
//
//
//
// `
// let homeScreenHtml = ''
// if(No_Help_Array.includes(rvWebsiteId)){
// homeScreenHtml = quickLinkWholeHtml+conversationWholeHtml
// }else{
// homeScreenHtml = conversationWholeHtml+quickLinkWholeHtml
// }
let calendlyMeetingCard = botsetting.Calendly_Option ? botsetting.Calendly_Option.Book_Meeting_status : false
if (calendlyMeetingCard) {
calendlyRvHtml = `
${botsetting.Calendly_Option.meetingButton}
`
}
RV_HOME_CONTENT = `
${calendlyRvHtml ? calendlyRvHtml : "" }${RvBotView.quickLinkHtmlGenerate()}
`
var chatWidgetHtml = `
`
widgetContentFrame.body.insertAdjacentHTML("beforeend", chatWidgetHtml);
var triggerFrameStyle = document.createElement("style");
triggerFrameStyle.innerText = RvBotView.triggerMsgCss();
triggerFrame.contentWindow.document.head.appendChild(triggerFrameStyle);
var notificationFrameStyle = document.createElement("style");
notificationFrameStyle.innerText = RvBotView.notificationCssFile();
notificationContentFrame.head.appendChild(notificationFrameStyle);
var notificationWidgetHtml = `
0
`;
notificationContentFrame.body.insertAdjacentHTML("beforeend", notificationWidgetHtml);
},
rvHomePageFooterHtml: function(){
return ``
},
rvInnerPageFooterLoad: function(){
var rvFooterInnerWrap = widgetContentFrame.body.querySelector('.rvFooterInnerWrap');
if( rvFooterInnerWrap ){
rvFooterInnerWrap.innerHTML = RV_Main_Footer
}
},
rvRemoveFooterLoad: function () {
var rvFooterInnerWrap = widgetContentFrame.body.querySelector('.rvFooterInnerWrap');
if (rvFooterInnerWrap) {
rvFooterInnerWrap.innerHTML = ""
}
},
rvHomePageFooterLoad: function(){
var rvFooterInnerWrap = widgetContentFrame.body.querySelector('.rvFooterInnerWrap');
if( rvFooterInnerWrap ){
rvFooterInnerWrap.innerHTML = RvBotView.rvHomePageFooterHtml()
RvBotView.rvDisplayLastMsg()
}
},
play: function(){
var audio = widgetContentFrame.getElementById("audio");
audio.play();
},
overAllCssFile: function() {
// Your CSS as text
var styles = `
.rvecIframeBot {border: none;}
#rvecChatToggleFrame{position:fixed;bottom: ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : '30px'};font-size:14px;line-height:1.5;z-index: 999999999999;width: 60px;height: 60px;overflow:hidden;/*right: 30px;*/box-shadow: 0 0 40px rgb(0 0 0 / 10%);border-radius: 50%;}
#rvecChatToggleFrame.customSizeToggleRV{width: 90px; height:90px;}
#rvecNotificationFrame.botPositionLeft{left: calc( ${botsetting.Bot_Agent_Right_Spacing ? botsetting.Bot_Agent_Right_Spacing : '0px'} + 40px );}
#rvecChatToggleFrame.botPositionLeft{transform:scaleX(-1)}
#rvecChatToggleFrame.botPositionLeft,#rvecChatTriggerFrame.botPositionLeft,#RVWidgetFrame.botPositionLeft{left: ${botsetting.Bot_Agent_Right_Spacing ? botsetting.Bot_Agent_Right_Spacing : '30px'}}
#rvecNotificationFrame.botPositionRight,#rvecChatToggleFrame.botPositionRight,#rvecChatTriggerFrame.botPositionRight,#RVWidgetFrame.botPositionRight{right: ${botsetting.Bot_Agent_Right_Spacing ? botsetting.Bot_Agent_Right_Spacing : '30px'}}
#rvecChatWidgetFrame{/*position:fixed;bottom:90px;right:30px;max-width:390px;width:100%;display:none;-webkit-animation:ptwchatbox_anim .3s;-moz-animation:ptwchatbox_anim .3s;animation:ptwchatbox_anim .3s;z-index: 999999999999;box-shadow: 0 0 40px rgb(0 0 0 / 10%);*/}
#rvecNotificationFrame{position:fixed;bottom: 60px;right: 30px;width:20px;height:20px;display:none;z-index: 99999999999999999999999;}
@-webkit-keyframes ptwchatbox_anim{0%{-webkit-transform:translateY(10px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}
@-moz-keyframes ptwchatbox_anim{0%{-moz-transform:translateY(10px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}
@keyframes ptwchatbox_anim{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
#rvecChatTriggerFrame {position: fixed;z-index: 999999999999;bottom: calc( ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : "30px" } + 60px );/*right: 30px;*/width: 290px;}
#rvecChatTriggerFrame.customSizeToggleRV{bottom: calc( ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : "30px" } + 90px );}
#RVWidgetFrame{z-index: 2147483000;position: fixed;bottom: calc( ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : "30px" } + 70px );right: 20px;height: calc(100% - calc( ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : "30px" } + 90px ) );width: 400px;min-height: 250px;max-height: 704px;box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;opacity: 1;border-radius: 8px;overflow: hidden;transition: width 200ms ease 0s, height ease 0s, max-height ease 0s;display:none;}
#RVWidgetFrame > iframe{width: 100%;height: 100%;position: absolute;}
#RVParentFrame > .rvExitIntentPopupWrapper{position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 9999999999999;background: rgba(33, 33, 33, 0.8);transform: translateY(60%) scale(0);transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);overflow-y:auto;}
#RVParentFrame > .rvExitIntentPopupWrapper::-webkit-scrollbar{width:6px;height:6px}
#RVParentFrame > .rvExitIntentPopupWrapper::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}
#RVParentFrame > .rvExitIntentPopupWrapper::-webkit-scrollbar-thumb{background-color:${botsetting.Bot_Agent_Background_Color};border-radius:10px}
#RVParentFrame > .rvExitIntentPopupWrapper{scrollbar-color:${botsetting.Bot_Agent_Background_Color} #f1f1f1;scrollbar-width:thin}
#RVParentFrame > .rvExitIntentPopupWrapper.visible{transform: translateY(0) scale(1);}
#RVParentFrame > .rvExitIntentPopupWrapper > #rvExitPopupWrapper{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#RVParentFrame > .rvExitIntentPopupCloseWrapper{position: fixed;top: 10px;right: 10px;z-index: 99999999999999;transform: translateY(60%) scale(0);transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);}
#RVParentFrame > .rvExitIntentPopupCloseWrapper.visible{transform: translateY(0) scale(1);}
#RVParentFrame > .rvExitIntentPopupCloseWrapper > svg.close{width: 35px;height: 35px;cursor: pointer;padding: 7px;border: 1px solid #fff;border-radius: 50%;}
#RVParentFrame > .rvExitIntentPopupCloseWrapper > svg.close path {fill: #fff;}
#RVParentFrame > .rvExitIntentPopupWrapper .rvExitPopupButtonLoader{opacity: 0.4;cursor: no-drop !important;}
.rvChatBotExLink{cursor:pointer;}
#rvVideoWidgetDiv {position: fixed !important;z-index: 999999 !important;outline: none !important;border-radius: 15px !important;padding: 0 !important;opacity: 0;transition: 0.5s !important;bottom:${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : '30px'}}
#rvVideoWidgetDiv:hover{transform: scale(1.02);}
#rvVideoWidgetDiv.Right{right:-250px;}
#rvVideoWidgetDiv.Left{left:-250px;}
#rvVideoWidgetInnerWrap {display: flex;align-items: flex-end;justify-content: flex-end;position: relative;}
#rvVideoTagWidgetWrap {position: relative;box-sizing: border-box !important;border-radius: 100%;transition: 0.3s;cursor: pointer !important;width: 242px;height: 152px;}
.rvVideoWidgetCloseWrap {display: flex;flex-direction: column;align-items: flex-end;position: absolute;top: -8px !important;right: -8px !important;}
.rvVideoWidgetCloseButton {z-index: 2147483649 !important;display: flex !important;justify-content: center !important;align-items: center !important;font-size: 13px;width: 22px !important;height: 22px !important;border-radius: 20px !important;color: #353535 !important;cursor: pointer !important;background: #2f3137 !important;box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);transition: 0.7s;transform-origin: center !important;}
#rvVideoPlaybackCloseDiv:hover, .rvVideoWidgetCloseButton:hover{transform: rotate(180deg);}
video#rvWidgetVideoTag {pointer-events: none !important;position: absolute !important;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) !important;object-position: 50% 50%;width: 100% !important;height: 100% !important;min-width: 100% !important;min-height: 100% !important;cursor: pointer !important;object-fit: cover !important;margin-top: 0 !important;visibility: visible !important;border-radius: 10px !important;box-shadow: 0px 4px 20px rgb(0 0 0 / 15%) !important;}
#rvVideoPlaybackDiv{position: fixed !important;top: auto !important;box-sizing: border-box !important;box-shadow: 0px 0px 60px rgb(0 0 0 / 15%) !important;z-index: 2147483649 !important;border-radius: 10px !important;transition: 0.3s !important;line-height: 0 !important;width: 640px !important;height: 360px !important;min-width: 640px !important;min-height: 360px !important;max-width: 960px !important;max-height: 540px !important;bottom: ${botsetting.Bot_Agent_Left_Spacing ? botsetting.Bot_Agent_Left_Spacing : '27px'}}
#rvVideoPlaybackDiv.Left{left: ${botsetting.Bot_Agent_Right_Spacing ? botsetting.Bot_Agent_Right_Spacing : '25px'} }
#rvVideoPlaybackDiv.Right{right: ${botsetting.Bot_Agent_Right_Spacing ? botsetting.Bot_Agent_Right_Spacing : '25px'} }
#rvVideoPlaybackCloseDiv{z-index: 2147483649 !important;display: flex !important;justify-content: center !important;align-items: center !important;position: absolute !important;width: 26px !important;height: 26px !important;border-radius: 20px !important;top: -8px !important;right: -8px !important;color: #353535 !important;cursor: pointer !important;background: #2f3137 !important;box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);transition: 0.7s;transform-origin: center !important;}
#rvVideoPlaybackCloseDiv svg{margin-left: 0.5px;width: 11px !important;height: 10px !important;}
#rvVideoPlaybackOuterDiv{position: static !important;line-height: 0 !important;overflow: hidden !important;}
#rvecVideoPlaybackFrame{position: absolute !important;bottom: 0 !important;left: 0 !important;width: 100% !important;height: 100% !important;background-color: white !important;border: none !important;box-sizing: border-box !important;border-radius: 10px !important;overflow: hidden !important;margin: 0 !important;padding: 0 !important;}
@media only screen and (max-width: 450px) {
#rvVideoPlaybackDiv{width: 100% !important;min-width: 100% !important;height: 540px !important;box-shadow: none !important;bottom: 0;}
#rvVideoPlaybackDiv.Right{right: 0}
#rvVideoPlaybackDiv.Left{left: 0}
#rvVideoPlaybackCloseDiv{right:1px !important;top:-8px important;}
#rvecChatToggleFrame.customSizeToggleRV{width: 60px; height:60px;}
}
@media only screen and (max-device-width: 460px){
#RVWidgetFrame{bottom:0;top:0;height:100%;box-shadow:none;max-height:100%;border-radius:0;width:100%;}
#RVWidgetFrame.botPositionRight{right:0 !important;}
#RVWidgetFrame.botPositionLeft{left:0 !important;}
#rvecChatToggleFrame.botPositionLeft,#rvecChatTriggerFrame.botPositionLeft,#RVWidgetFrame.botPositionLeft{left: 3px}
#rvecNotificationFrame.botPositionRight,#rvecChatToggleFrame.botPositionRight,#rvecChatTriggerFrame.botPositionRight,#RVWidgetFrame.botPositionRight{right: 3px}
#rvecChatToggleFrame{bottom:3px}
#rvecChatTriggerFrame{bottom:60px;transition: 0.5s ease-in;}
#rvecChatToggleFrame.widgetOpen{top:5px;width:40px;height:40px;left:initial;right:8px;}
#rvecChatToggleFrame.widgetOpen.position1{top:16px;}
#rvecChatToggleFrame.widgetOpen.position3{top:21px;}
#rvecChatWidgetFrame{right: 0 !important;left:0 !important;}
#rvecChatToggleFrame.customSizeToggleRV{width: 60px; height:60px;}
}
@media only screen and (max-device-width: 410px){
#RVWidgetFrame{width:100%;}
}
@media only screen and (max-height: 450px) and (min-aspect-ratio: 13/9) {
#rvVideoPlaybackDiv{height: 66vh !important;min-height: 66vh !important;width: 66vw !important;min-width: 66vw !important;}
}
`;
return styles;
},
videoPlayerCssFile: function(){
var styles = `
@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
body{margin: 0;font-family: Poppins,sans-serif;font-size: 14px;line-height: 1.5;text-align: center;background-color: transparent;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-touch-callout: none;-webkit-tap-highlight-color: rgba(0,0,0,0);height: 100%;margin: 0;overflow: hidden;overscroll-behavior: none;-webkit-user-select: none;user-select: none;-moz-user-select: none;-o-user-select: none;}
#rvPlayerMainContainer{align-items: center;background-color: #fff;border-radius: 10px;display: flex;height: 100%;justify-content: center;position: relative;width: 100%;max-width: 960px;margin: 0 auto;padding-top: 0;}
#rvPlayerMainContainer.Horizontal{max-width: 960px;}
#rvPlayerMainContainer #rvPlayerWrapper{height: 100%;width: 100%;border-radius: 10px;flex: 1 1;left: 0;overflow: hidden;padding-top: 0;position: fixed;top: 0;}
#rvPlayerLoaderWrapper{align-items: center;display: flex;justify-content: center;position: absolute;width: 100%;}
.rvExitVisibiltyTransition{opacity: 0 !important;transition: all .25s !important;visibility: hidden !important;}
.rvEntryVisibiltyTransition{opacity: 1 !important;transition: all .25s !important;visibility: visible !important;}
#rvPlayerLoaderInnerWrap{position: absolute;inset: 0px;display: grid;place-content: center;}
#rvPlayerLoaderInnerWrap svg{-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-name: spin;animation-name: spin;-webkit-animation-timing-function: linear;animation-timing-function: linear;}
#rvOverlayControlsContainer {display: flex;flex-direction: column;-webkit-box-pack: justify;justify-content: space-between;border-radius: 10px;width: 100%;height: 100%;transition: all 0.3s ease 0s;z-index: 10;}
#rvControlsHeader {height: 100%;min-height: 30px;display: flex;-webkit-box-pack: center;justify-content: center;z-index: 41;transition: all 0.3s ease 0s;opacity: 0;}
#rvPlayerMainContainer:hover #rvControlsHeader{ opacity: 1}
#rvControlsInnerWrapper {height: 40px;padding: 16px 24px;width: 100%;display: grid;grid-template-columns: auto 1fr auto auto;column-gap: 16px;-webkit-box-align: center;align-items: center;z-index: 30;}
#rvReloadWrap{display: grid;-webkit-box-align: center;place-items: center;border-radius: 500px;cursor: pointer;filter: initial;transition: all 0.2s ease-in-out 0s;width: 20px;height: 17px;cursor:pointer;}
#rvMuteWrapper {display: grid;-webkit-box-align: center;place-items: center;border-radius: 500px;cursor: pointer;filter: initial;transition: all 0.2s ease-in-out 0s;cursor:pointer}
#rvVideoSpeedWrapper {display: grid;-webkit-box-align: center;place-items: center;cursor: pointer;filter: initial;transition: all 0.2s ease-in-out 0s;padding: 10px;background: rgba(255, 255, 255, 0.5);color: rgb(255, 255, 255);font-weight: 600;font-size: 14px;width: 27px;border-radius: 8px;}
#rvInnerPlayerWrapper {display: grid;height: 100%;grid-template-rows: 3fr;grid-area: 1 / 1 / auto / auto;}
#rvPlayerPlayBtnWrapper {display: flex;position: fixed;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;width: 100%;height: 100%;bottom: 0px;left: 0px;border-radius: 10px;transition: all 250ms ease 0s;z-index: 1;}
#rvPlayerPlayBtnWrapper.active{background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));transition: all 250ms ease 0s;z-index: 10000;}
#rvPlayerPlayBtnInnerWrap {z-index: 20;display: flex;-webkit-box-pack: center;justify-content: center;place-items: center;flex-direction: column;-webkit-box-align: center;cursor: pointer;opacity: 1;transform: scale(0.9);transition: all 250ms ease 0s;width: 100%;}
#rvPlayButton {transition: all 0.3s ease-in-out 0s;visibility: visible;opacity: 0;transform: scale(1);cursor: pointer;}
#rvPlayerPlayBtnWrapper.active #rvPlayButton, #rvPlayerPlayBtnWrapper.active #rvPlayButtonText{opacity:1}
#rvPlayButtonText {position: absolute;top: 90px;margin-top: 20px;width: 100%;color: rgb(255, 255, 255);font-size: 18px;line-height: 21px;opacity: 0;transform: scale(1);transition: all 250ms ease 0s;}
#rvVideoSeekBarInnerWrap {position: relative;width: 100%;height: 6px;background-color: rgb(212, 212, 212);border-radius: 3px;cursor:pointer;}
#rvVideoSeekBarOuterWrapper {width: 100%;height: 20px;text-align: right;margin-top: 12px;}
span#rvVideoSeekBarOuterWrapperSpan {background-color: #fff;position: absolute;top: 0;left: 0;height: 6px;width: 0;border-radius: 3px;}
#rvTimeVideoWrapper {color: #fff;font-size: 12px;line-height: 14px;margin-top: 5px;}
#rvVideoPlayerTag {border-radius: 10px;position: fixed;min-height: 100%;object-position: 50% 50%;object-fit: cover;top: 0px;left: 0px;min-width: 100%;background: transparent;width: 100%;}
#rvVideoControlBack {display: flex;flex-direction: column;opacity: 1;transition: all .3s;z-index: 40;}
#rvVideoAnswerContainer {-webkit-box-pack: center;justify-content: center;-webkit-box-align: stretch;align-items: stretch;width: 100%;max-width: 800px;margin: 0px auto;max-height: 300px;overflow-y: auto;padding-bottom: 28px;display: flex;flex-flow: row wrap;}
.rvAnswerButton {cursor: pointer;background-color: rgba(0, 0, 0, 0.6);border: 1px solid rgba(255, 255, 255, 0.3);padding: 0px 12px 0px 16px;border-radius: 44px;box-sizing: border-box;color: white;transition: opacity 0.3s ease 0s;margin: 5px;justify-content: normal;min-width: 200px;max-width: 268px;flex: 1 1 0%;display: flex;-webkit-box-align: center;align-items: center;min-height: 50px;height: fit-content;min-width: calc(20% + 7em);}
.rvChoiceBtnText {margin-left: 16px;margin-right: 10px;line-height: 18px;font-size: 16px;font-weight: 500;text-align: left;letter-spacing: 0.02em;}
.rvChoiceCharWrapper {min-width: 18px;min-height: 18px;display: flex;flex-direction: column;justify-content: center;background-color: #fff;color: #2F3137;border-radius: 50%;line-height: 18px;font-size: 12px;font-weight: 600;align-items: center;}
.videoRecordOuterWrap {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1000000;border-radius: 10px;background: black;}
.videoRecordInnerWrap {background: transparent;display: grid;height: 100%;overflow: visible;width: 100%;}
video#videoRecorderStream {width: 100%;height: 100%;grid-area: 1 / 1 / auto / auto;border-radius: 10px;object-fit: cover;overflow: hidden;transition: opacity 250ms ease 0s;transform: rotateY(180deg);}
.videoTopOptionWrapper {display: grid;grid-area: 1 / 1 / auto / auto;z-index: 3;width: 100%;position: absolute;top: 0;left: 0;right: 0;}
.videoTopOptionInnerWrapper {display: flex;padding: 16px;justify-items: center;gap: 10px;align-self: start;}
.videoDeviceInputWrapper {grid-area: 1 / 1 / auto / auto;display: grid;grid-template-columns: auto auto 1fr auto auto;justify-items: center;gap: 10px;align-self: start;}
.videoInputWrapper {display: flex;flex-direction: column;z-index: 4;position: relative;}
.videoInputInnerWrap {display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;width: 40px;height: 40px;cursor: pointer;border-radius: 100%;border: none;background-color: rgba(9, 10, 11, 0.3);transition: all 0.2s ease 0s;}
.toolTipText {display: none;position: absolute;border-radius: 4px;left: 50%;transform: translateX(-20%);padding: 6px;color: white;background: black;font-size: 14px;font-family: sans-serif;line-height: 1;z-index: 100;white-space: nowrap;bottom: -36px;}
.audioInputWrapper .toolTipText{transform:translateX(-50%)}
.audioInputWrapper {display: flex;flex-direction: column;z-index: 4;position: relative;}
.audioInputInnerWrap {display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;height: 40px;cursor: pointer;border: none;background-color: rgba(9, 10, 11, 0.3);transition: all 0.2s ease 0s;width: 100%;border-radius: 100px;gap: 8px;padding: 0px 6px;}
.audioTestContainerWrapper {display: flex;gap: 8px;}
.audioTestInnerWrap {width: 1px;height: 14px;background-color: rgb(179, 182, 188);}
.audioTestInnerWrap.activeVolume{background-color: #fff}
.videoUploadInputWrapper {display: flex;flex-direction: column;width: 100%;align-items: end;}
.videoInnerUploadLabel {display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;width: 40px;height: 40px;cursor: pointer;border-radius: 100%;border: none;background-color: rgba(9, 10, 11, 0.3);transition: all 0.2s ease 0s;}
.videoRecordContainer {display: grid;align-self: end;height: 100%;justify-items: center;grid-area: 1 / 1 / auto / auto;overflow: hidden;z-index: 0;}
.audioBottomOptionWrapper, .videoBottomOptionWrapper {position: absolute;bottom: 0;left: 0;display: flex;right: 0;justify-content: center;gap: 16px;padding: 16px;align-items: center;z-index: 999;}
.audioRecordOptionWrapper, .videoRecordOptionWrapper {cursor: pointer;display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;border-radius: 500px;width: 80px;height: 80px;transition: all 0.3s ease 0s;background: rgb(205 17 47);pointer-events: auto;}
.audioRecordCancelWrapper, .videoRecordCancelWrapper {cursor: pointer;display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;border-radius: 500px;transition: all 0.3s ease 0s;background: rgba(9, 10, 11, 0.6);width: 54px;height: 54px;}
.toolTipText:before {content: " ";left: 20px;border-style: solid;border-color: transparent transparent black;border-image: initial;height: 0px;width: 0px;position: absolute;pointer-events: none;border-width: 6px;margin-left: -6px;bottom: 100%;}
.audioInputWrapper .toolTipText:before{left: 50px;}
.audioInputWrapper:hover .toolTipText, .videoInputWrapper:hover .toolTipText {display: inherit;}
.toolTipText p {margin: 0;}
.audioInputOptionWrap, .videoInputOptionWrap {margin-top: 45px;background: white;position: absolute;padding: 4px;box-shadow: rgb(232 234 252) 0px 3px 11px 0px, rgb(178 178 178 / 10%) 0px 3px 3px -2px, rgb(154 154 154 / 10%) 0px 1px 8px 0px;border-radius: 4px;animation: 0.3s ease 0s 1 normal none running fadeIn;}
.audioTopOptionInnerWrapper .audioInputOptionWrap{left:-170px;}
.audioInputOptionWrap li.deviceLabel.activeDevice, .videoInputOptionWrap li.deviceLabel.activeDevice{background-color: rgb(243, 245, 255);}
.audioInputOptionWrap li p, .videoInputOptionWrap li p{max-width: 50ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-weight: 400;line-height: 1.5;padding: 6px 0px;margin: 5px;text-align: left;}
.audioInputOptionWrap ul, .videoInputOptionWrap ul {padding: 0;margin: 0;}
.audioInputOptionWrap li.deviceLabel, .videoInputOptionWrap li.deviceLabel{background-color: white;cursor: pointer;transition: all 0.2s ease 0s;list-style:none;}
.audioRecorderCounter, .videoRecorderCounter{z-index: 1000;grid-area: 1 / 1 / auto / auto;display: grid;-webkit-box-align: center;place-items: center;background: rgba(0, 0, 0, 0.62);font-family: sans-serif;pointer-events: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: none;}
.audioRecorderCounter .counterText, .videoRecorderCounter .counterText{color: rgb(255, 255, 255);font-weight: 600;font-size: 20em;line-height:1}
.videoRecordTimerWrapper {position: absolute;top: 0;left: 0;right: 0;grid-area: 1 / 1 / auto / auto;width: 100%;z-index: 2;display: grid;place-items: center;-webkit-box-align: center;align-self: start;}
.videoRecordTimerInner {margin: 16px;padding: 8px;border-radius: 8px;width: fit-content;color: white;background: rgb(205 17 47);}
.innerOptionWrapper {grid-area: 1 / 1 / auto / auto;z-index: 100;display: flex;flex-direction: column;gap: 16px;place-self: end center;margin-bottom: 20px;-webkit-box-align: center;align-items: center;background: rgba(9, 10, 11, 0.5);border-radius: 16px;padding: 16px;}
.innerOptionWrap {display: flex;align-items: center;gap: 15px;color: #fff;}
.optionText {font-weight: 700;line-height: 14px;font-size: 14px;color: #fff;}
.optionValueWrapper {display: flex;align-items: center;margin-left: 10px;gap: 10px;}
.noOptionValue,.yesOptionValue {display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;height: 46px;width: 46px;cursor: pointer;border-radius: 16px;background: #fff;}
.yesOptionValue {background: rgb(1, 190, 129);}
.yesOptionValue path {fill: #fff;}
.noOptionValue {background-color: rgb(254, 225, 230);}
.noOptionValue path {fill: rgb(250, 83, 110);}
.audioRecordMuteUnmuteWrapper, .videoRecordMuteUnmuteWrapper {display: grid;grid-area: 1 / 1 / auto / auto;place-self: start end;place-items: center;-webkit-box-align: center;height: 40px;width: 40px;margin: 12px;z-index: 10000;border-radius: 500px;background-color: rgba(0, 0, 0, 0.7);cursor: pointer;}
.permissionErrorHtml {font-size: 18px;inset: 0px;z-index: 1000000;background: black;position: absolute;padding: 16px;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;flex-direction: column;color: white;}
.permissionErrorHtml p{margin:0;width: 50%;}
.audioResultContainer{display:none;}
button.permissionErrorButton {font-weight: 400;padding: 0px 20px;color: white;width: fit-content;min-width: 200px;height: 40px;border-radius: 20px;cursor: pointer;background-color: rgba(10, 10, 10, 0.2);border: 1px solid rgba(255, 255, 255, 0.4);margin-top:20px;}
div#audioRecordOuterWrap {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1000000;border-radius: 9px;background: black;}
.audioRecordInnerWrap, .audioRecordContainer {display: grid;height: 100%;width: 100%;}
canvas.audioRecorderStream {grid-area: 1 / 1 / auto / auto;width: 100%;height: 100%;border-radius: 8px;}
.audioTopOptionWrapper {display: grid;grid-area: 1 / 1 / auto / auto;z-index: 3;width: 100%;}
.audioTopOptionInnerWrapper {grid-area: 1 / 1 / auto / auto;display: grid;padding: 16px;grid-template-columns: 1fr;justify-items: center;gap: 10px;align-self: start;}
.audioTopOptionWrapper .audioInputInnerWrap {display: flex;-webkit-box-align: center;place-items: center;-webkit-box-pack: center;justify-content: center;height: 40px;cursor: pointer;border: none;background-color: rgba(9, 10, 11, 0.3);transition: all 0.2s ease 0s;idth: 100%;border-radius: 100px;gap: 8px;padding: 0px 6px;}
@media only screen and (max-width: 768px){.rvAnswerButton {max-width: 300px;}}
@media only screen and (max-height: 645px){.rvAnswerButton {max-width: 300px;}}
@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
.meshLoader {z-index: 1000;grid-area: 1 / 1 / auto / auto;display: grid;-webkit-box-align: center;place-items: center;background: rgba(0, 0, 0, 0.62);font-family: sans-serif;pointer-events: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;height: inherit;width: inherit;}
.meshLoader .loaderCircle {width: 30px;height: 30px;position: absolute;background: rgb(205 17 47);border-radius: 50%;margin: -15px;-webkit-animation: mesh 3s ease-in-out infinite -1.5s;animation: mesh 3s ease-in-out infinite -1.5s;}
.meshLoader > div .loaderCircle:last-child {-webkit-animation-delay: 0s;animation-delay: 0s;}
.meshLoader > div {position: absolute;top: 50%;left: 50%;}
.meshLoader > div:last-child {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
@keyframes mesh {0% {-webkit-transform-origin: 50% -100%;transform-origin: 50% -100%;-webkit-transform: rotate(0);transform: rotate(0);}50% {-webkit-transform-origin: 50% -100%;transform-origin: 50% -100%;-webkit-transform: rotate(360deg);transform: rotate(360deg);}50.1% {-webkit-transform-origin: 50% 200%;transform-origin: 50% 200%;-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform-origin: 50% 200%;transform-origin: 50% 200%;-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@media only screen and (max-width: 450px), screen and (hover: none) and (pointer: coarse) {
.rvControlsBack{border-radius: 0;padding-left: 0;padding-right: 0;}
#rvControlsHeader{border-radius: 0;}
.rvPlayerWrapperMobile{background: black;padding-top: 0;height: 100%;width: 100%;}
.rvControlsBottom{background: none;position: fixed;width: 100%;bottom: 10px;color: black;height: 50%;color: black;border-color: black;}
.rvLabelBottom {position: fixed;width: 100%;bottom: 0;color: black;}
.rvIconBlack {display: block;width: 20px;margin-right: 5px;}
#rvPlayerWrapper{border-radius: 0;position: static;padding-top: 0;}
.rvVideoControls{border-radius: 0;}
#rvVideoAnswerContainer{max-height: 240px;white-space: nowrap;overflow: auto;}
.rvAnswerButton{white-space: normal;width: 100%;max-width: 100%;justify-items: stretch;margin-left: 15px;margin-right: 15px;}
}
@media screen and (orientation: landscape) and (max-height: 450px){
#rvOverlayControlsContainer {max-height: 100%;}
}
@media (max-width: 450px){
#rvVideoPlayerTag{border-radius:0;}
}
`
return styles;
},
chatToggleCssFile: function(){
var styles = `
@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
body{margin: 0;font-family: Poppins,sans-serif;font-size: 14px;line-height: 1.5;}
.ptw_chat_toggle{z-index: 1;width:100%;height:100%;border-radius:50%;background-color:#2f26d0;// box-shadow: 0 0 40px rgb(0 0 0 / 10%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;cursor:pointer;-webkit-animation:ptwchattoggle_anim .3s;-moz-animation:ptwchattoggle_anim .3s;animation:ptwchattoggle_anim .3s;}
.ptw_chat_toggle .customRVLogoIcon img{ width:100%; height: 100%; border-radius: 50%; }
@-webkit-keyframes ptwchattoggle_anim{0%{-webkit-transform:scale(.5);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
@-moz-keyframes ptwchattoggle_anim{0%{-moz-transform:scale(.5);opacity:0}100%{-moz-transform:scale(1);opacity:1}}
@keyframes ptwchattoggle_anim{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.ptw_chat_toggle>span{display:none}
.ptw_chat_toggle>.ptw_chat_bubble_arrow{content:"";position:absolute;top:60%;right:75%;display:block;border-top:20px solid transparent;border-bottom:0 solid transparent;border-right:20px solid #2f26d0;-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);transform:rotate(-25deg)}
.rvChatIconWrapper i{font-size: 30px;}
@media only screen and (max-device-width: 460px){
.widgetOpen .ptw_chat_toggle{background-color:rgba(0,0,0,0.3);width: 100%;height: 100%;}
.widgetOpen .rvChatIconWrapper i{font-size:20px;}
}
`
return styles;
},
notificationCssFile: function(){
var styles = `
.new-message.active {animation: 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running shake;}
.new-message {font-size: 12px;background: rgb(247, 46, 56);z-index: 2;line-height: 1;}
.new-message, #dnd-indicator {position: absolute;top: 0;font-weight: 700;color: rgb(255, 255, 255);right: 0;pointer-events: none;border-radius: 10px;display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;width: 20px;height: 20px;}
`
return styles;
},
widgetCssFile: function(){
var styles = `
@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
body{margin:0;font-family: Poppins,sans-serif;font-size: 14px;line-height: 1.5;overflow: hidden;display: block;}
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;border: none;padding: 4px 1em 4px 0;margin: 0;width: 100%;font-family: inherit;font-size: 14px;cursor: inherit;line-height: inherit;z-index: 1;outline: none;}
select::-ms-expand {display: none;}
.select {display: grid;grid-template-areas: "select";align-items: center;position: relative;min-width: 15ch;max-width: 30ch;border: 1px solid #777;border-radius: 0.25em;padding: 0.25em 0.5em;font-size: 1.25rem;cursor: pointer;line-height: 1.1;background-color: #fff;background-image: linear-gradient(to top, #f9f9f9, #fff 33%);}
.select select, .select::after {grid-area: select;}
.select:not(.select--multiple)::after {content: "";justify-self: end;width: 0.8em;height: 0.5em;background-color: #777;-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);clip-path: polygon(100% 0%, 0 0%, 50% 100%);}
.accessHeaderDesc{padding-top:5px;font-size:14px;font-weight: 400;}
select:focus + .focus {position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: 2px solid blue;border-radius: inherit;}
.form-group .iti.iti--allow-dropdown{width: 100%;}
.form-group .iti.iti--allow-dropdown .form-control{padding-left: 50px;}
select[multiple] {padding-right: 0;height: 6rem;}
select[multiple] option {white-space: normal;outline-color: blue;}
.select--disabled {cursor: not-allowed;background-color: #eee;background-image: linear-gradient(to top, #ddd, #eee 33%);}
.rvMessenger{display: flex;flex-direction: column;-webkit-box-pack: start;justify-content: flex-start;position: absolute;top:0;left:0;right:0;bottom:0;inset: 0px;overflow: hidden;background-color: #fff;}
.logoutButtonWrap {width: 100%;text-align: right;}
button#logoutButton {padding: 10px 14px;background: #6539b3;color: #fff;border: 0;border-radius: 5px;background-color: rgba(0, 0, 0, 0.52);cursor: pointer;}
.rvMsgHead{position: relative;color: white;transition: height 160ms ease-out 0s;background-image: linear-gradient(135deg,hsla(0,0%,100%,0),rgba(0,0,0,.32));height: 295px;background-color: ${botsetting.Bot_Agent_Background_Color}}
.rvMsgHeaderView{position: absolute;top: 0px;left: 0px;right: 0px;padding: 24px 30px 87px;box-sizing: border-box;transition: transform 0.3s ease-out 0s, opacity 0.3s ease-out 0s;transform: scale(1);}
.rvMsgHeaderOpacity{transform: translateY(0px);opacity: 1;}
.rvMsgImgWrap{height:32px;/*padding-bottom:16px;*/}
.rvMsgImgWrap img{max-width: 100%;max-height: 100%;margin: auto 0px;display: block;}
.rvMsgContWrap .title{font-size: 32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.rvMsgContWrap .paraContent{color: rgba(255, 255, 255, 0.7);display: block;font-size: 1em;line-height: 1.5em;overflow-wrap: break-word;white-space: pre-line;}
.rvHomeScreenWrap{position: relative;flex: 1 1 0%;background-color: white;box-shadow: rgb(0 0 0 / 20%) 0px 21px 4px -20px inset;}
.rvConversationMessage{padding: 20px;background-color: #fff;overflow: scroll;}
.rvHomeScreen{z-index: 2147483002;position: fixed;top: 0;left:0;right:0;bottom:0;inset: 0px;overflow-y: auto;padding-top:251px;margin-bottom:95px;}
.rvHomeScreenInnerWrap{display: flex;flex-direction: column;box-sizing: border-box;padding: 0px 16px 35px;min-height: 100%;}
.rvTransition{transition: transform 0.3s ease-out 0s, opacity 0.3s ease-out 0s;transform: scale(1);}
.rvHomeScreenCard{max-width: 100%;margin-bottom: 17px;background-color: rgb(255, 255, 255);border-radius: 3px;font-size: 14px;line-height: 1.4;color: rgb(0, 0, 0);overflow: hidden;position: relative;box-shadow: ${botsetting.boxShadow};}
.rv-5qt81h {/*height: 139.781px;*/transition: height 250ms ease 0s;}
.rv-s0sg41 {padding: 26px 24px 16px;}
.rv-vmab6f {/*margin-bottom: 4px;*/}
.rv-start-conversation-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 14px 20px 0 20px;}
button#seeAllConversation {line-height: 1.2;padding: 0 2px;white-space: nowrap;color: var(--theme-color);display: -webkit-box;display: -ms-flexbox;display: flex;line-height: 1;font-size: 14px;color: ${botsetting.Bot_Agent_Button_Color};cursor: pointer;background: #fff;border: none;outline: none;box-shadow: none;}
.rv-66oquk {line-height: 1.5;word-break: break-word;font-size: 16px;font-weight: 600;text-align: left;margin-bottom: 0px;}
.rv-aga1a1 {display: flex;flex-flow: row nowrap;-webkit-box-align: center;align-items: center;align-content: stretch;position: relative;outline-offset: -5px;padding: 0 24px;margin: 0px -24px;position:relative;cursor:pointer;}
.rv-aga1a1:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;}
.startConversationWrap{display: flex;flex-flow: row nowrap;-webkit-box-align: center;align-items: center;align-content: stretch;position: relative;outline-offset: -5px;padding: 10px 0 0;text-align:center;}
.rv-aga1a1 .rvAgentPicture{margin-left:0;}
.rv-aga1a1:hover{background-color: ${botsetting.Bot_Agent_Button_Color}0f;}
.rv-messenger-screen-conversations-list .rv-aga1a1{margin: 0;padding: 0;}
.rv-messenger-screen-conversations-list .rv-conversation-wrapper{padding: 20px 24px;width: calc( 100% - 48px );}
.rv-conversation-wrapper {padding: 20px 0;cursor: pointer;-webkit-transition: background-color .3s;transition: background-color .3s;border-bottom: 1px solid #eee;width: 100%;display: flex;flex-flow: row nowrap;-webkit-box-align: center;align-items: center;align-content: stretch;}
.rv-aga1a1::before {/*content: "";position: absolute;height: 100%;left: 0px;right: 0px;top: 0px;border-top: 2px solid transparent;*/}
.rv-aga1a1 * {cursor: pointer;}
.rv-qh16t7 {flex: 0 0 auto;left: 15px;}
.rv-7nfnba {margin: 0px auto;border-radius: 50%;display: inline-block;vertical-align: middle;cursor: default;width: 36px;height: 36px;line-height: 36px;font-size: 18px;}
.rv-7nfnba img {width: 36px;height: 36px;border-radius: 50%;}
.rv-7sdh8r {flex: 1 1 0%;padding-left: 8px;padding-right: 8px;min-width: 0px;}
.rv-15r69cz {font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: rgb(115, 115, 118);margin-bottom: 0px;}
.rv-15fzge {margin-left: 4px;}
.rv-1esx35 {color: rgb(58, 60, 76);font-size: 13px;display: flex;}
.rv-1fvrbgz {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: rgb(0, 0, 0);}
.rv-ea67jx {transform: rotate(180deg);}
.rv-6a43gu.homeIcon{width: 25px;height: 25px;}
.rv-6a43gu {margin: 0px auto;width: 9px;height: 15px;}
.rvFlex{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.rvDisplayFlex{display: -webkit-box;display: -ms-flexbox;display: inline-flex;}
.text-center{text-align:center;}
.rvAgentsInformation{padding: 6px 10px;border-radius: 12px;background-color: hsla(0,0%,100%,.08);-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;margin-top: 32px;margin-bottom: 15px;}
.rvAgentsPictures{text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;margin: 0;}
.rvAgentPicture,.rvAgentsInformation .rvAgentsPictures .rvAgentPicture {display: inline-block;margin-left: -8px;vertical-align: middle;position: relative;}
.rvAgentsInformation .rvAgentsPictures .rvAgentPicture:first-child{margin-left: 0;}
.settingWidth{max-width: 280px;text-align: left;justify-content: start;}
.rvAgentsInformation .rvImageAvatar img{width: 100%;border-radius: 50%;overflow: hidden;}
.rvAgentsInformation .rvImageAvatar,.rvInitialsAvatar{color: #fff;text-align: center;line-height: 24px;position: relative;width: 24px;height: 24px;border-radius: 24px;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-weight: 600;font-size:9px;}
.rvAgentPicture:first-child .rvInitialsAvatar,
.rvAgentsInformation .rvAgentsPictures .rvAgentPicture:first-child .rvInitialsAvatar{background-color: rgb(128, 78, 158);border: 1px solid rgb(255, 255, 255);}
.rvAgentsInformation .rvAgentsPictures .rvAgentPicture:nth-child(2) .rvInitialsAvatar{background-color: rgb(48, 96, 99);border: 1px solid rgb(255, 255, 255);}
.rvAgentsInformation .rvAgentsPictures .rvAgentPicture:nth-child(3) .rvInitialsAvatar{background-color: rgb(147, 106, 37);border: 1px solid rgb(255, 255, 255);}
.rv-ea67jx svg > g > g {fill: ${botsetting.Bot_Agent_Button_Color};}
.rvOfflineMessage{margin-left: 12px;font-size: 12px;font-weight: 400;max-width: 100%;color: #666;text-align: left;line-height: 1;overflow: hidden;color: #fff;}
.rvOfflineMessage .overflow-elipses{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;}
.replyTimeIndicator{font-weight: 600;color: #fff;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.replyTimeIndicatorText{padding-left:4px;}
.replyTimeIndicator .clockIcon{height: 14px;}
.replyTimeIndicator .clockIcon svg{min-height: 14px;min-width: 14px;margin-left: 6px;}
/*.rvMessengerHome ::-webkit-scrollbar{width:8px;height:6px}*/
.rvMessengerHome .rvInnerPageWrap::-webkit-scrollbar{width:6px;height:6px}
.rvMessengerHome .rvInnerPageWrap::-webkit-scrollbar-track{background-color:#fff;border-radius:10px}
.rvMessengerHome .rvInnerPageWrap::-webkit-scrollbar-thumb{background-color:${botsetting.Bot_Agent_Background_Color};border-radius:10px}
.rvMessengerHome .rvInnerPageWrap{scrollbar-color:${botsetting.Bot_Agent_Background_Color} #f1f1f1;scrollbar-width:thin}
.rvBtnFullWidth{padding: 0.95rem 1rem;width: 100%;max-width: 327px;color: ${botsetting.Bot_Agent_Button_Text_Color};border: 1px solid ${botsetting.Bot_Agent_Button_Color};background-color: ${botsetting.Bot_Agent_Button_Color};border-radius: 8px;font-size: 14px;font-weight: 600;cursor:pointer;}
.rvFooterWidget{z-index: 2147483002;position: absolute;bottom: 0px;left: 0px;right: 0px;}
.rvFooterWidget .e1zvd8h1 {position: absolute;opacity: 0.97;width: 100%;bottom: 0px;display: flex;align-items: flex-end;-webkit-box-pack: center;justify-content: center;margin: 0px;padding: 5px 0px;background-color: rgb(255, 255, 255);box-shadow: rgb(0 0 0 / 4%) 0px 0px 0px 1px;}
.rvFooterWidget .e1zvd8h1 .e1zvd8h3 {display: flex;width: 100%;-webkit-box-pack: center;justify-content: center;}
.rv-52kfez {display: inline-block;font-size: 13px;padding: 8px 16px;border-radius: 16px;transition: all 80ms ease 0s;color: rgb(119, 118, 120) !important;text-decoration:none;letter-spacing: -0.6px;}
.rv-52kfez svg {width: 16px;height: 16px;color: rgb(119, 118, 120);vertical-align: sub;padding-right: 8px;}
.rv-edahy21{padding: 0 20px;cursor: pointer;}
.rvJustifyContentSpaceBetween{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.rvJustifyContentEnd{justify-content: flex-end!important;}
.rvAlignItemsCenter{-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.rvAlignItemsStart{-webkit-box-align: start;-ms-flex-align: flex-start;align-items: flex-start;}
.qLinkImgWrap{height: 40px;width: 40px;background-color: rgba(0,0,0,.03);border-radius: 50%;margin-right: 16px;}
.qLinkImgWrap svg{height: 24px;width: 24px;}
.qLinkContWrap .qLinkContTitle{font-size: 13px;font-weight: 500;line-height: 1.43;color: #000;}
.qLinkContWrap .qLinkContSubTitle{font-size: 13px;line-height: 1.54;color: #6d7175;font-weight: 400;}
.rvJustifyContentCenter{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.rv-awfege .edyhj2e0{padding-bottom:20px;}
.paddingTopBottom20{padding: 20px 0;}
.rv-edahy21:not(:last-child) .borderBottom{border-bottom: 1px solid #e5e5e5;}
.rvConversationHeader {padding: 15px 20px;}
.rvGoBackHome {padding: 0 10px;margin-right: 10px;cursor: pointer;}
.rvGoBackHomeBtn{margin-right: 0;padding: 0 8px;cursor:pointer;}
.rvGoBackHome.goBackWrap{width: 51px;height: 51px;padding: 8px;box-sizing: border-box;border-radius: 8px;display: flex;-webkit-box-align: center;align-items: center;transform: translateZ(0px);}
.rvGoBackHome.goBackWrap:hover{background-color: rgba(0, 0, 0, 0.5);}
.rvConversationHeader .rvAgentsInformation {margin: 0;background-color: transparent;}
.rvMb1{margin-bottom: 6px;}
.rvBotName{font-size: 16px;line-height:1.3;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.rvConversationHeader .replyTimeIndicator .clockIcon svg{margin-left: 0;margin-right: 6px;}
.rvConversationHeader .replyTimeIndicator{font-size: 14px;font-weight: 400;}
.rvConvMsg{margin-bottom:15px;-webkit-animation:rvMsgAnim .3s;-moz-animation:rvMsgAnim .3s;animation:rvMsgAnim .3s;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards}
@-webkit-keyframes rvMsgAnim{0%{-webkit-transform:translateY(10px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}
@-moz-keyframes rvMsgAnim{0%{-moz-transform:translateY(10px);opacity:0}100%{-moz-transform:translateY(0);opacity:1}}
@keyframes rvMsgAnim{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
.rvConvMsg>.rvConvMsgInner>.rvConvMsgText{background-color:#f1f1f1;color:#222;padding:10px 12px;border-radius:10px 10px 10px 0;font-size:13px;margin:0;word-break:break-word;max-width: 70%;display: inline-block;}
.rvConvMsg>.rvConvMsgInner>.rvConvMsgText a{color:inherit;text-decoration:underline;}
.rvConvMsg.rvMsgRight>.rvConvMsgInner>.rvConvMsgText a{color:#fff;text-decoration:underline}
.rvConvMsg>.rvConvMsgInner>.rvConvMsgTime{font-size:11px;margin:0;margin-bottom:5px;// max-width: 70%;// display: inline-block;}
.rvConvMsg.rvMsgLeft>.rvConvMsgInner>.rvConvMsgTime img{margin-right: 7px;}
.rvConvMsg.rvMsgLeft>.rvConvMsgInner>.rvConvMsgTime{display:flex;align-items:center;}
.rvConvMsg.rvMsgRight{text-align:right}
.rvConvMsg.rvMsgRight>.rvConvMsgInner>.rvConvMsgText{background-color:#2f26d0;color:#fff;border-radius:10px 10px 0 10px;margin:0;display:inline-block;text-align:left}
.rvConvMsg.rvMsgRight>.rvConvMsgInner>.rvConvMsgTime{padding-right:5px}
.rvReplyInputBox {position: absolute;bottom: 46px;left: 0;right: 0;min-height: 53px;max-height: 200px;border-top: 1px solid #e6e6e6;z-index: 1;}
.rvReplyInputBox input, .rvReplyInputBox textarea{width: 100%;height: 100%;line-height: 1.33;background: #fff;white-space: pre-wrap;word-wrap: break-word;font-size: 14px;font-weight: 400;-webkit-transition: -webkit-box-shadow .2s;transition: -webkit-box-shadow .2s;transition: box-shadow .2s;transition: box-shadow .2s,-webkit-box-shadow .2s;color: #000;padding: 17px 40px 17px 15px;letter-spacing: normal;position: absolute;bottom: 0;left: 0;font-family: Poppins,sans-serif;}
.rvReplyInputBox .survey_form_error{position: absolute;top: -40px;right: 0;display: inline-block;left: -320px;color: red;font-style: italic;}
.rvReplyInputBox.closedConversation{padding: 14px 20px;border-top: 0;background: #f5f5f5;}
.rvReplyInputBox.closedConversation .hint-text {font-size: 13px;font-weight: 400;padding-bottom: 14px;line-height:1.2;}
.rvReplyInputBox.closedConversation .btn.rvStartConversation {background: #fff;padding: 10px 15px;color: ${botsetting.Bot_Agent_Button_Color};border: 1px solid ${botsetting.Bot_Agent_Button_Color};font-size: 12px;letter-spacing: 0;word-spacing: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: relative;width:100%;cursor:pointer;}
.cursorPointer{cursor: pointer;}
.rvReplyInputBox.closedConversation .btn.rvStartConversation .send-icon {margin-top: 2px;}
.rvReplyInputBox.closedConversation .btn.rvStartConversation:after{content: '';position:absolute;left:0;top:0;bottom:0;right:0;}
.rvReplyInputBox.closedConversation .btn.rvStartConversation .label {font-weight: 500;padding-left: 7px;font-size: 15px;line-height: 15px;letter-spacing: 0;}
.rvMessengerReplyInputUtils {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);right: 10px;top: 29px;}
.rvMessengerReplyInputUtilsButton {height: 30px;width: 30px;display: block;cursor: pointer;margin: 0 4px;background: transparent;}
.rvMessengerAttachInputUtilsButton {height: 30px;width: 30px;display: block;cursor: pointer;margin: 0 4px;background: transparent;}
.rvReplyInputBox button, .rvReplyInputBox input,.rvReplyInputBox button, .rvReplyInputBox textarea {border: none;outline: none;}
.rve_dg_btn_Wrapper{flex-wrap: wrap;overflow: auto;font-size: 14px;transform: translateY(10px);will-change: transform;}
.rve_buttonGroup button,.rve_dg_btn_Wrapper button,.rve_dg_btn_Wrapper .rve_outter_btn_options,.rve_dg_btn_Wrapper .rve_dg_btn_options{-webkit-box-align: center;align-items: center;padding: 10px 15px;max-width: 265px;text-align: left;cursor: pointer;margin-bottom: 5px;margin-top: 5px;background-color: rgb(237, 240, 247);border: 1px solid ${botsetting.Bot_Agent_Button_Color};border-radius: 6px;color: rgba(61, 78, 99, 0.8);display: inline-block;margin-right: 10px;transition: background 0.2s ease 0s;font-size: 14px;}
.rve_dg_btn_Wrapper button.yes_consent{background-color: ${botsetting.Bot_Agent_Button_Color};color:${botsetting.Bot_Agent_Button_Text_Color}}
.rve_buttonGroup button{width:100%;margin: 0 0 15px;max-width: 100%;padding: 8px 20px;border-radius: 5px;}
.rve_buttonGroup.rve_mb20 button{margin-bottom: 20px;}
.rve_buttonGroup button:lastchild{margin-bottom:0;}
.rve_buttonGroup button:hover,.rve_dg_btn_Wrapper button:hover,.rve_dg_btn_Wrapper .rve_dg_btn_options:hover{color: rgb(255, 255, 255);background-color: ${botsetting.Bot_Agent_Button_Color};}
.rve_trigger {margin-top: 20px;}
rve_dg_btn_Wrapper button,.rve_dg_btn_Wrapper .rve_outter_btn_options,.rve_dg_btn_Wrapper .rve_dg_btn_options{-webkit-box-align: center;align-items: center;padding: 10px 20px;max-width: 235px;text-align: left;cursor: pointer;margin-bottom: 5px;margin-top: 5px;background-color: rgb(237, 240, 247);border: 1px solid ${botsetting.Bot_Agent_Button_Color};border-radius: 8px;color: rgba(61, 78, 99, 0.8);display: inline-block;margin-right: 10px;transition: background 0.2s ease 0s;font-size: 15px;}
.rve_dg_btn_Wrapper button:hover,.rve_dg_btn_Wrapper .rve_dg_btn_options:hover{color: rgb(255, 255, 255);background-color: ${botsetting.Bot_Agent_Button_Color};}
.typing-indicator {/*background-color: #e6e7ed;*/will-change: transform;width: auto;border-radius: 50px;padding: 20px;display: inline-block;margin: 0 auto;position: relative;animation: 2s bulge infinite ease-out;}
.typing-indicator::before, .typing-indicator::after {content: '';position: absolute;bottom: -2px;left: -2px;height: 20px;width: 20px;border-radius: 50%;/*background-color: #e6e7ed;*/}
.typing-indicator::after {height: 10px;width: 10px;left: -10px;bottom: -10px;}
.typing-indicator span {height: 8px;width: 8px;float: left;margin: 0 1px;background-color: #9e9ea1;display: block;border-radius: 50%;opacity: 0.4;}
.typing-indicator span:nth-of-type(1) {animation: 1s blink infinite 0.3333s;}
.typing-indicator span:nth-of-type(2) {animation: 1s blink infinite 0.6666s;}
.typing-indicator span:nth-of-type(3) {animation: 1s blink infinite 0.9999s;}
@keyframes blink {50% {opacity: 1;}}
@keyframes bulge {50% {transform: scale(1.05);}}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper {padding: 12px 12px;background-color: #f1f1f1;border-radius:15px;display:inline-block;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper img{border-top-left-radius:15px;border-top-right-radius:15px;max-width:100%;max-height:180px}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper .rvecImgContTitle{font-size: 17px;margin-bottom:10px;margin-top:10px;font-weight: bold;line-height:1.2;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper .rvecImgContSubTitle a,.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper .rvecImgContTitle a{text-decoration: none;color:inherit;}
.rvecImageWrapper .rvecImgContSubTitle{font-size: 14px;margin: 0;}
.rvecGalleryInnerContainer {max-width: 1000px;position: relative;margin: auto;}
.rvecGalleryInnerContainer > div {display: none;}
/* Fading animation */
.fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
/* Next & previous buttons */
.rvecGalleryOuterContainer .rvecgalleryprev, .rvecGalleryOuterContainer .rvecgallerynext {cursor: pointer;position: absolute;top: 50%;margin-top: -22px;color: #000;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;background-color: rgb(255, 255, 255);box-shadow: rgb(40 44 53 / 6%) 0px 4px 15px 0px, rgb(40 44 53 / 8%) 0px 2px 2px 0px;border-radius: 50%;width: 40px;height: 40px;text-align: center;line-height: 40px;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper,.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecGalleryOuterContainer .rvecImageWrapper{display: inline-block;width: 280px;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecGalleryOuterContainer .rvecImageWrapper{display: block;margin: 0 auto;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper img{border-radius: 5px;}
.rvMsgContainer>.rvConvMsg>.rvConvMsgInner .rvecImageWrapper .rvecImageInnerWrap{text-align:center;}
/* Position the "next button" to the right */
.rvecGalleryOuterContainer .rvecgallerynext {right: 0;// border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.rvecGalleryOuterContainer .rvecgalleryprev:hover, .rvecGalleryOuterContainer .rvecgallerynext:hover {// background-color: rgba(0,0,0,0.8);}
.rvMsgContainer .rvecGalleryOuterContainer .ptw_right {text-align: right;}
.rvForm {padding: 1.5rem;background: #fff;border: 1px solid #ccc;border-top: 2px solid ${botsetting.Bot_Agent_Background_Color};border-radius: 5px;max-width: 250px;margin-left: auto;text-align: left;}
.rvFormWrapper {font-size: 13px;color: #4d4d4d;}
.rvForm .rvFormField label {margin-bottom: 8px;font-size: 14px;font-weight: 400;}
.rvForm .rvFormField .form-group {margin-top: 0.75rem;margin-bottom: 0.75rem;}
.rvForm .rvFormField .form-control {border-color: #b3b3b3;color: #333;padding: 10px 15px;height: 50px;line-height: 50px;box-shadow: none;border-width: 1px;-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;-webkit-box-sizing: border-box;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;outline: 0;-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);transition: border-color .2s cubic-bezier(.645,.045,.355,1);width: 100%;border-top-right-radius:0;border-bottom-right-radius:0;}
.rvForm .rvFormField .form-control#phone{padding-left:45px;}
.iti__country-list{width: 250px;}
.rvForm .rvFormField .form-button {background-color: #f5f7fa;color: #909399;vertical-align: middle;display: table-cell;position: relative;white-space: nowrap;}
.rvConvMsgInner .rvForm{max-width: 100%;}
.rvConvMsgInner .rvForm.initialLoader{max-width: 250px;}
.rvConvMsgInner .rvForm.initialLoader.phoneForm{max-width: 100%;}
.rvForm .rvFormField .form-button button {padding: 12px 12px;height: 50px;border: none;width: 40px;border: 1px solid #dcdfe6;border-radius: 4px;border-top-left-radius: 0;border-bottom-left-radius: 0;cursor: pointer;}
.rvForm .rvFormField .form-button button i{font-size: 20px;color: ${botsetting.Bot_Agent_Button_Color};}
.rvAccessForm .form-group.form-error,.rvForm .rvFormField .form-input.form-error {position: relative;}
.rvAccessForm .form-group.form-error span.form-feedback,.rvForm .rvFormField span.form-feedback {position: absolute;left: 0;right: 0;top: 100%;color: red;font-size: 11px;}
.rvAccessForm .form-group.form-error .form-control,.rvForm .rvFormField .form-input.form-error .form-control {border-color: red;}
.rvec_activity .rvConvMsgInner {padding: 5px 16px;text-align: center;font-size: 10px;display: inline-block;color: #8898aa !important;}
.rvec_activity {text-align: center;}
.rvArticleColList:hover,.rv-edahy21:hover{background-color: ${botsetting.Bot_Agent_Button_Color}0f;color: ${botsetting.Bot_Agent_Background_Text_Color};}
.rvInnerPageWrap.rvScrollBehaviour{overflow: auto;max-height: calc(100% - 215px);}
.rvInnerPageWrap.rvArticleWrapper.rvScrollBehaviour {max-height: calc(100% - 102px);}
.rvInnerPageWrap.rvScrollBehaviour.rvOldMsgList{max-height: calc(100% - 127px);}
.rvInnerPageWrap.rvScrollBehaviour.rvOldMsgList .rvPreviousMsgContent {padding: 10px 15px;}
.rvInnerPageWrap.rvScrollBehaviour.rvOldMsgList .rvPreviousMsgContent button{margin-bottom:20px;margin-top:10px;max-width:100%}
.rvInnerPageWrap.rvScrollBehaviour.rvOldMsgList .rvPreviousMsgContent p {margin: 0;font-size: 16px;font-weight: 500;}
.rvInnerPageWrap.rvScrollBehaviour.closedConversationWrap{margin-bottom: 180px;}
.rvInnerPageWrap.rvScrollBehaviour.workflowConversation{max-height: calc(100% - 160px);}
.rvInnerPageWrapper{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;overflow: auto;overflow-x: hidden;background-color: #fff;}
.rvAccessWrap,.rvProductFaqWrap {margin: 20px;width: calc(100% - 40px);height: unset;padding-bottom: 7px;border-radius: 8px;background: #fff;-webkit-box-shadow: ${botsetting.boxShadow};box-shadow: ${botsetting.boxShadow};}
.rvAccessHeader,.rvProductFaqHeader {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;font-size: 24px;border-top-left-radius: 8px;border-top-right-radius: 8px;padding: 20px;color: #000;font-weight: 600!important;}
.rvAccessForm{padding: 0 20px 20px;}
.rvAccessForm .form-group{margin-bottom: 20px;}
.rvAccessForm .form-group label{line-height: normal;text-align: left;margin-bottom: 8px;color: rgb(0, 0, 0);display:inline-block;}
.rvAccessForm .form-group .input-group textarea,.rvAccessForm .form-group .input-group input{border-color: #b3b3b3;color: #333;padding: 10px 15px;height: 40px;line-height: 40px;box-shadow: none;border-width: 1px;-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;-webkit-box-sizing: border-box;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;outline: 0;font-family: Poppins,sans-serif;-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);transition: border-color .2s cubic-bezier(.645,.045,.355,1);width: 100%;}
.rvAccessForm .form-group .input-group textarea{height:65px;}
.rvAccessForm .form-button .accessFormSubmit{width: 100%;max-width: 327px;font-size: 12px;word-spacing: 1px;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;position: relative;cursor: pointer;border-radius: 8px;color: ${botsetting.Bot_Agent_Button_Text_Color};border: 1px solid ${botsetting.Bot_Agent_Button_Color};background-color: ${botsetting.Bot_Agent_Button_Color};padding: 0.95rem 1.5rem;font-size: 14px;}
.removeBefore{cursor: default !important;}
.removeBefore:hover{background-color: transparent !important;}
.removeBefore:before{display:none !important;}
.rvArticleColList > a > div,.rvArticleColList > div {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;line-height: 15px;padding: 20px 0;color: #000;cursor: pointer;border-bottom: 1px solid #eee;font-size: 22px;font-weight: 500;-webkit-transition: border-bottom-color .3s;transition: border-bottom-color .3s;outline: none;}
.rvArticleColList > a > div span:nth-child(1),.rvArticleColList > div span:nth-child(1){padding: 0 20px;font-size: 16px;font-weight: 500;line-height: 22px;word-break: break-word;color: #000;}
.rvArticleColList > a > div span:nth-child(2),.rvArticleColList > div span:nth-child(2){margin: 0 20px 0 auto;-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s,-webkit-transform .3s;font-weight: 500;color: #4d4d4d;font-size: 16px;}
.rvArticleColList > a > div span:nth-child(2) i,.rvArticleColList > div span:nth-child(2) i{color: ${botsetting.Bot_Agent_Button_Color};}
.rvProductFaqWrap > div:last-child > div{border-bottom: none;}
.breadCrumbHtml:before,.rvArticleColList:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.rvArticleColList.removeBefore:before{display:none;}
.rvArticleColList {position: relative;cursor: pointer;}
.breadCrumbHtml {font-size: 14px;font-weight: 500;background-color: rgba(255, 255, 255, 0.12);border-radius: 6px;padding: 6px 16px 6px 6px;/*cursor: pointer;*/max-width: 100%;position: relative;}
.breadCrumbHtml .backText {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-left: 5px;}
.productFaqDescription{font-size: 17px;color: #000;word-break: break-word;font-weight: 400;line-height: 1.4;margin: 1em 0;}
.productFaqDescription *{font-size: 17px !important;color: #000 !important;line-height: 1.4 !important;}
.rvArticleColList > div.articleOptionList {border-top: 1px solid #e5e5e5;margin-top: 30px;padding: 20px;display: block;cursor: default;}
.rvHelpBottomWrap > button,.rvArticleColList > div.articleOptionList button{overflow: hidden;text-overflow: ellipsis;white-space: normal;line-height: 22px;display: block;margin-top: 15px;width: 100%;padding: 12px 20px;font-size: 14px;border: none;background-color: ${botsetting.Bot_Agent_Button_Color};color: ${botsetting.Bot_Agent_Button_Text_Color};border-radius: 8px;font-weight: 500;cursor: pointer;}
.rvHelpBottomWrap > button,.rvArticleColList > div.articleOptionList button:last-child{background-color:transparent;border: 1px solid ${botsetting.Bot_Agent_Button_Color};color: ${botsetting.Bot_Agent_Button_Color};}
.jounerySteps{margin-right: 8px;}
.jounerySteps i{margin: 0 8px 0 0;font-size: 12px;color: #666;}
[data-value] {position: relative;}
[data-value]:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}
button.accessFormSubmit .rvConvMsg {margin-bottom: 0;}
button.accessFormSubmit .rvConvMsg .rvConvMsgInner .typing-indicator {padding: 0;}
button.accessFormSubmit .rvConvMsg .rvConvMsgInner .typing-indicator span {background-color: ${botsetting.Bot_Agent_Button_Text_Color};}
.noOrderMessage {padding: 20px;text-align: center;font-size: 14px;}
.rvOrderListInner {padding: 20px;}
.rvHelpOrderTopWrap{padding: 20px;background-color: #f3f3f3;border-top-left-radius:8px;border-top-right-radius:8px;}
.rvHelpOrderTopWrap .orderImage{background-color: transparent;}
.rvHelpMiddleWrap {padding: 15px 20px;border-bottom: 1px solid #eee;}
.rvHelpHeadTitle {font-size: 21px;font-weight: 600;}
.rvHelpDescription{padding-top:15px;color:#484747;}
.noBorderBottom{border-bottom: none !important;}
.rvHelpBottomWrap{padding: 0 20px 20px;}
.rvHelpOptionWrap .rvArticleColList:last-child > div{border-bottom:none;}
.orderImage {width: 40px;height: 40px;background: #e7e4e4;padding: 0px;display: flex;justify-content: center;align-items: center;margin-right: 10px;border-radius: 4px;}
.orderImage svg {width: 29px;height: 29px;}
.orderLeftWrapper .orderNumberWrapper {font-size: 15px;font-weight: 500;line-height: 1;margin-bottom: 2px;}
.orderLeftWrapper .orderDateWrapper {font-size: 12px;font-weight: 500;color: #878585;}
.orderStatusWrapper span {display: inline-block;padding: 2px 9px;background-color: #2daf2d;color: #fff;border-radius: 6px;}
.rvOrderTopWrap {margin-bottom: 15px;}
/*.rvHelpOrderTopWrap{background-color:#ccc;border-top-left-radius:8px;border-top-right-radius:8px;}*/
.rvOrderMiddleWrap .width50 {width: 50%;}
.rvMiddleHeadWrap {font-size: 16px;font-weight: 400;color: #878585;line-height: 1;}
.rvMiddleContWrap {font-size: 16px;font-weight: 600;}
.rvOrderMiddleWrap {margin-bottom: 15px;}
button.rvOrderInnerButton {padding: 8px 20px;background: transparent;outline: none;box-shadow: none;border: 1px solid ${botsetting.Bot_Agent_Button_Color};color: ${botsetting.Bot_Agent_Button_Color};cursor: pointer;}
button.rvOrderInnerButton:hover{background-color: ${botsetting.Bot_Agent_Button_Color};color: ${botsetting.Bot_Agent_Button_Text_Color};}
button.rvOrderInnerButton:not(:last-child) {margin-right: 10px;}
.rvFlexWrap{flex-wrap: wrap;}
.breadCrumbInnerWrapper {padding: 12px 20px;margin-bottom: 10px;}
.breadCrumbInnerWrapper > div > div {padding: 2.5px;display: flex;align-items: center;}
.breadCrumbInnerWrapper > div > div:not(:last-child):after {content: ">";padding-left: 5px;font-size: 16px;font-weight: 500;line-height: 1;}
.breadCrumbInnerWrapper > div > div:not(:last-child):after,.breadCrumbInnerWrapper > div > div:last-child {color: #8d8d8d;}
.breadCrumbInnerWrapper > div > div:not(:last-child) {cursor: pointer;}
.accessYourAccount.rvInnerPageWrap.rvScrollBehaviour {background-color: #fff;height: calc(100% - 101px);max-height: calc(100% - 101px);overflow: auto;}
.rvAddressInnerWrap .orderImage {width: auto;height: auto;padding: 10px;margin-top: 6px;}
.rvAddressInnerWrap {align-items: flex-start;margin-top: 20px;}
.rvCustAddressWrapper .rvHeadTitle {font-size: 15px;font-weight: 500;}
.rvCustAddressWrapper .rvHeadDescription {font-size: 13px;color: #7a7777;}
.rvInnerLoader {flex: 1 1 0%;position: relative;width: 100%;height: 100%;align-items: center;justify-content: center;display: flex;}
.rvLoaderWrapper{border: 6px solid #f3f3f3;border-top: 6px solid ${botsetting.Bot_Agent_Button_Color};border-radius: 50%;width: 30px;height: 30px;animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
.rvProductImageWrapper {position: relative;}
.rvProductImage {width: 40px;height: 40px;padding: 7px;background: #fff;box-shadow: 0 0 5px rgb(0 0 0 / 10%);display: flex;align-items: center;margin-right: 15px;border-radius: 8px;}
img.productImage {max-width: 100%;}
.rvProductQty {position: absolute;padding: 8px;top: -8px;background: ${botsetting.Bot_Agent_Button_Color};border-radius: 50%;width: 5px;height: 5px;display: flex;align-items: center;justify-content: center;color: ${botsetting.Bot_Agent_Button_Text_Color};left: 40px;font-size: 12px;}
.rvProductOuterWrapper {margin-bottom: 15px;}
#map {width: 100%;height: 160px;}
.trackingHeaderWrap {padding: 20px 0 15px;border-bottom: 1px solid #dcdcdc;font-size: 16px;font-weight: 600;}
.trackingHeaderWrap.removeBorderBottom{border-bottom:none}
.packageWrapper {padding: 10px 15px;border: 1px solid #dcdcdc;margin-bottom: 20px;border-radius: 8px;}
.packageWrapper .packageHead {font-weight: 600;}
.packageWrapper .magentoSinglePackLine{margin-left:-14.5px;margin-right:-14.5px;}
.packageWrapper .rvCourierName{padding-left:0;}
.packageWrapper .rvTrackingInfoWrap{padding-right:0;}
.rvCourierName {padding-left: 15px;padding-right:7.5px;font-weight: 600;text-transform: capitalize;width:50%;margin-top: 10px;}
.rvTrackingInfoWrap p {margin: 0;font-size: 15px;}
.rvTrackingInfoWrap {padding-right: 15px;margin-top: 10px;width:50%;padding-left:7.5px;text-align:right;}
.magentoSinglePackLine{margin-bottom: 30px;margin-top: 20px;border-bottom:1px solid #dcdcdc;display:block;}
.rvNoTrackInfo {padding: 10px 10px 0;text-align: center;font-size: 15px;font-weight: 600;}
.rvReturnOptionHead {padding: 0 0 15px;align-items: center;border-bottom: 1px solid #eee;}
.rvReturnOptionHead .helpOptionLeft {font-weight: 600;}
.customCheckBox1 {display: block;position: relative;padding-left: 22px;cursor: pointer;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.customCheckBox1 > input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.customCheckBox1 span.checkmark {position: absolute;top: 0;left: 0;height: 15px;width: 15px;background-color: #fff;border-radius: 50%;border: 1px solid ${botsetting.Bot_Agent_Button_Color}3b;}
.customCheckBox1:hover input ~ .checkmark {background-color: ${botsetting.Bot_Agent_Button_Color}3b;}
.customCheckBox1 input:checked ~ .checkmark {background-color: ${botsetting.Bot_Agent_Button_Color};}
.customCheckBox1 span.checkmark:after {content: "";position: absolute;display: block;left: 5px;top: 2px;width: 3px;height: 6px;border: solid ${botsetting.Bot_Agent_Button_Color}3b;border-width: 0 2.5px 2.5px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.customCheckBox1 input:checked ~ span.checkmark:after{border-color: ${botsetting.Bot_Agent_Button_Text_Color};}
.customCheckBox1.customCheckBox3 {font-size: 17px;padding-left: 30px;}
.customCheckBox1.customCheckBox3 span.checkmark:after {width: 5px;height: 8px;top: 3px;left: 6px;}
.customCheckBox1.customCheckBox3 span.checkmark {width: 20px;height: 20px;}
.rve_dg_btn_Wrapper button.surveyFormOptionSubmission {padding: 8px 15px;margin-top: 10px;margin-right: 0;}
.customCheckBox2 {display: block;position: relative;padding-left: 30px;margin-bottom: 12px;cursor: pointer;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin-right:10px;}
/* Hide the browser's default checkbox */
.customCheckBox2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */
.customCheckBox2 .checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: ${botsetting.Bot_Agent_Button_Color}3b;border-radius: 3px;}
/* On mouse-over, add a grey background color */
.customCheckBox2:hover input ~ .checkmark {background-color: ${botsetting.Bot_Agent_Button_Color}7b;}
/* When the checkbox is checked, add a blue background */
.customCheckBox2 input:checked ~ .checkmark {background-color: ${botsetting.Bot_Agent_Button_Color};}
/* Create the checkmark/indicator (hidden when not checked) */
.customCheckBox2 .checkmark:after {content: "";position: absolute;display: none;}
/* Show the checkmark when checked */
.customCheckBox2 input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */
.customCheckBox2 .checkmark:after {left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.rvHelpMiddleWrap .rvProductImage {width: 40px;height: auto;background: none;box-shadow: none;padding: 0;}
.rvHelpMiddleWrap .rvProductTitle{line-height: 1;}
span.productName.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 130px;margin-bottom:5px;}
.rvReturnProductWrapper{margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;}
.wid100{width: 100%;}
.wid80 {width: 80%;}
.wid20 {width: 20%;}
.rvProductConversationList {padding: 20px;background-color: #f2eaea;}
.rvConvProdTitle {font-size: 15px;font-weight: 600;padding-bottom:10px;}
.errorFeedBack > div {padding: 10px 15px 0;color: red;}
.reasonForReturns {margin: 15px 0;}
.reasonForReturns label {display: block;margin-bottom: 5px;font-weight: 500;}
.refundOrExchange{margin-bottom:0;}
.rvConvMsgInner .rvAccessWrap {margin: 0;width: 100%;text-align: left;}
.rvConvMsgInner .rvAccessWrap .rvOrderMiddleWrap {margin-bottom: 0;}
.rvProductConversationList div {font-size: 13px;}
.text-right{text-align:right;}
.triggerConversationWrapper button{width: 100%;margin: 5px;padding: 10px 15px;border-radius: 5px;background-color: transparent;border: 1px solid ${botsetting.Bot_Agent_Button_Color};color: ${botsetting.Bot_Agent_Button_Color};cursor: pointer;}
.loader{position:realtive;}
.loader:before {content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(255,255,255,1);opacity: 0.4;z-index: 55544;}
.rvConvMsg.rvMsgRight>.rvConvMsgInner>.rvConvMsgText.articleStartWrapper{display: inline-block;padding: 1rem;border-radius: 7px;border: 1px solid #ccc;max-width: 85%;font-weight: 400;line-height: 22px;font-size: 15px;background-color: transparent;color: #000;}
.trackingOuterWrapper{margin-bottom: 30px;padding-bottom: 10px;border-bottom: 1px solid #dcdcdc;}
.trackingOuterWrapper.magentoBottomRemove{border:none;padding-bottom:0;margin-bottom:20px;}
.totalPackageWrap {font-size: 13px;font-weight: 400;margin-bottom: 0;}
.overflow-elipses {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;}
.width85{width: 85%;}
.width100{width:100%;}
.rvBotAvatar{box-shadow: #0000001a 0px 5px 10px;width: 20px;height: 20px;border-radius: 50%;}
.productFaqDescription * {font-family: Poppins,sans-serif !important;}
.productFaqDescription img{max-width:100%;}
.rvTeamUnassignee,.rvTeamAssignee {position: relative;height: 40px;width: 40px;margin-right: 6px;}
.rvTeamAssignee .rvTeamAvatar {width: 25px;height: 25px;line-height: 25px;border-radius: 25px;position: absolute;}
.rvTeamUnassignee .rvTeamAvatar{width: 40px;height: 40px;line-height: 40px;border-radius: 40px;}
.rvTeamUnassignee .rvInitialAvatar:first-child{background-color: rgb(128, 78, 158);border: 1px solid rgb(255, 255, 255);}
.rvTeamAssignee .rvTeamAvatar:nth-child(1){top: 0px;left: 6px;}
.rvTeamAssignee .rvTeamAvatar:nth-child(2){top: 15px;left: 0px;}
.rvTeamAssignee .rvTeamAvatar:nth-child(3){top: 15px;right: 0px;}
.rvTeamUnassignee .rvTeamAvatar img,.rvTeamAssignee .rvTeamAvatar img{width: 100%;border-radius: 50%;overflow:hidden;}
.rvTeamAssignee .rvInitialAvatar:first-child{background-color: rgb(128, 78, 158);border: 1px solid rgb(255, 255, 255);}
.rvTeamAssignee .rvInitialAvatar:nth-child(2){background-color: rgb(48, 96, 99);border: 1px solid rgb(255, 255, 255);}
.rvTeamAssignee .rvInitialAvatar:nth-child(3){background-color: rgb(147, 106, 37);border: 1px solid rgb(255, 255, 255);}
.rvAgentsPictures .rvTeamAssignee {width: 54px;height: 26px;}
.rvAgentsPictures .rvTeamAssignee .rvTeamAvatar:nth-child(1) {top: 0;left: 0;}
.rvAgentsPictures .rvTeamAssignee .rvTeamAvatar:nth-child(2) {top: 0;left: 16px;}
.rvAgentsPictures .rvTeamAssignee .rvTeamAvatar:nth-child(3) {top: 0;right: 0;}
.rvHomeScreenFooter {height: 70px;background-color: #fff;}
.rvHomeFooterInnerWrap {margin: 10px 10px 0;position: absolute;top: -54px;left: 0;right: 0;bottom: 0px;background-color: #fff;border-top-left-radius: 15px;border-top-right-radius: 15px;padding: 12px 15px;-webkit-box-shadow: ${botsetting.boxShadow};box-shadow: ${botsetting.boxShadow};}
#seeAllConversation{font-size: 15px;text-decoration:none;padding: 5px 15px;border-radius: 10px;color:${botsetting.Bot_Agent_Button_Color} !important;font-weight: bold;}
#seeAllConversation:hover{background-color:${botsetting.Bot_Agent_Button_Color}2F !important;}
.image-upload > input{display: none;width: 25px;height: 25px;}.image-upload svg{cursor: pointer;}
.preview-upload-img{width:100px;height:100px}
.small-upload{position: absolute;left: -275px;top: -70px;z-index: 999;}
.surveyFormRemoveSubmission.rvMsgRight span.form-feedback {display: block;position: absolute;bottom: 31px;color: red;font-style: italic;font-size: 12px;}
.AClass{right:0px;position: absolute;cursor: pointer;}
.stars span {font-size: 0;}
.stars a:hover ~ a:after{color: #9e9e9e !important;}
.stars span.active a.active ~ a:after{color: #9e9e9e;}
/*.stars span:hover a:after{color:#FFD700 !important;}*/
.stars span.active a:after,.stars a.active:after{color:#FFD700;}
.stars a {display: inline-block;padding-right:4px;text-decoration: none;margin:0;}
.stars a:after {position: relative;font-size: 28px;font-family: 'FontAwesome', serif;display: block;content: "\\f005";color: #9e9e9e;}
.feedback {--normal: #eceaf3;--normal-shadow: #d9d8e3;--normal-mouth: #9795a4;--normal-eye: #595861;--active: #f8da69;--active-shadow: #f4b555;--active-mouth: #f05136;--active-eye: #313036;--active-tear: #76b5e7;--active-shadow-angry: #e94f1d;margin: 0;padding: 0;list-style: none;display: flex;justify-content:end}
.feedback li {position: relative;border-radius: 50%;background: var(--sb, var(--normal));box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow));transition: background 0.4s, box-shadow 0.4s, transform 0.3s;-webkit-tap-highlight-color: transparent;}
.feedback li:not(:last-child) {margin-right: 20px;}
.feedback li div {width: 40px;height: 40px;position: relative;transform: perspective(240px) translateZ(4px);}
.feedback li div svg, .feedback li div:before, .feedback li div:after {display: block;position: absolute;left: var(--l, 9px);top: var(--t, 13px);width: var(--w, 8px);height: var(--h, 2px);transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0);}
.feedback li div svg {fill: none;stroke: var(--s);stroke-width: 2px;stroke-linecap: round;stroke-linejoin: round;transition: stroke 0.4s;}
.feedback li div svg.eye {--s: var(--e, var(--normal-eye));--t: 17px;--w: 7px;--h: 4px;}
.feedback li div svg.eye.right {--l: 23px;}
.feedback li div svg.mouth {--s: var(--m, var(--normal-mouth));--l: 11px;--t: 23px;--w: 18px;--h: 7px;}
.feedback li div:before, .feedback li div:after {content: "";z-index: var(--zi, 1);border-radius: var(--br, 1px);background: var(--b, var(--e, var(--normal-eye)));transition: background 0.4s;}
.feedback li.angry {--step-1-rx: -24deg;--step-1-ry: 20deg;--step-2-rx: -24deg;--step-2-ry: -20deg;}
.feedback li.angry div:before {--r: 20deg;}
.feedback li.angry div:after {--l: 23px;--r: -20deg;}
.feedback li.angry div svg.eye {stroke-dasharray: 4.55;stroke-dashoffset: 8.15;}
.feedback:not(.removeHover) li.angry:hover, .feedback li.angry.active {-webkit-animation: angry 1s linear;animation: angry 1s linear;}
.feedback:not(.removeHover) li.angry:hover div:before, .feedback li.angry.active div:before {--middle-y: -2px;--middle-r: 22deg;-webkit-animation: toggle 0.8s linear forwards;animation: toggle 0.8s linear forwards;}
.feedback:not(.removeHover) li.angry:hover div:after, .feedback li.angry.active div:after {--middle-y: 1px;--middle-r: -18deg;-webkit-animation: toggle 0.8s linear forwards;animation: toggle 0.8s linear forwards;}
.feedback li.sad {--step-1-rx: 20deg;--step-1-ry: -12deg;--step-2-rx: -18deg;--step-2-ry: 14deg;}
.feedback li.sad div:before, .feedback li.sad div:after {--b: var(--active-tear);--sc: 0;--w: 5px;--h: 5px;--t: 15px;--br: 50%;}
.feedback li.sad div:after {--l: 25px;}
.feedback li.sad div svg.eye {--t: 16px;}
.feedback li.sad div svg.mouth {--t: 24px;stroke-dasharray: 9.5;stroke-dashoffset: 33.25;}
.feedback:not(.removeHover) li.sad:hover div:before, .feedback li.sad.active div:before, .feedback:not(.removeHover) li.sad:hover div:after, .feedback li.sad.active div:after {-webkit-animation: tear 0.6s linear forwards;animation: tear 0.6s linear forwards;}
.feedback li.ok {--step-1-rx: 4deg;--step-1-ry: -22deg;--step-1-rz: 6deg;--step-2-rx: 4deg;--step-2-ry: 22deg;--step-2-rz: -6deg;}
.feedback li.ok div:before {--l: 12px;--t: 17px;--h: 4px;--w: 4px;--br: 50%;box-shadow: 12px 0 0 var(--e, var(--normal-eye));}
.feedback li.ok div:after {--l: 13px;--t: 26px;--w: 14px;--h: 2px;--br: 1px;--b: var(--m, var(--normal-mouth));}
.feedback:not(.removeHover) li.ok:hover div:before, .feedback li.ok.active div:before {--middle-s-y: 0.35;-webkit-animation: toggle 0.2s linear forwards;animation: toggle 0.2s linear forwards;}
.feedback:not(.removeHover) li.ok:hover div:after, .feedback li.ok.active div:after {--middle-s-x: 0.5;-webkit-animation: toggle 0.7s linear forwards;animation: toggle 0.7s linear forwards;}
.feedback li.good {--step-1-rx: -14deg;--step-1-rz: 10deg;--step-2-rx: 10deg;--step-2-rz: -8deg;}
.feedback li.good div:before {--b: var(--m, var(--normal-mouth));--w: 5px;--h: 5px;--br: 50%;--t: 22px;--zi: 0;opacity: 0.5;box-shadow: 16px 0 0 var(--b);filter: blur(2px);}
.feedback li.good div:after {--sc: 0;}
.feedback li.good div svg.eye {--t: 15px;--sc: -1;stroke-dasharray: 4.55;stroke-dashoffset: 8.15;}
.feedback li.good div svg.mouth {--t: 22px;--sc: -1;stroke-dasharray: 13.3;stroke-dashoffset: 23.75;}
.feedback:not(.removeHover) li.good:hover div svg.mouth, .feedback li.good.active div svg.mouth {--middle-y: 1px;--middle-s: -1;-webkit-animation: toggle 0.8s linear forwards;animation: toggle 0.8s linear forwards;}
.feedback li.happy div {--step-1-rx: 18deg;--step-1-ry: 24deg;--step-2-rx: 18deg;--step-2-ry: -24deg;}
.feedback li.happy div:before {--sc: 0;}
.feedback li.happy div:after {--b: var(--m, var(--normal-mouth));--l: 11px;--t: 23px;--w: 18px;--h: 8px;--br: 0 0 8px 8px;}
.feedback li.happy div svg.eye {--t: 14px;--sc: -1;}
.feedback:not(.removeHover) li.happy:hover div:after, .feedback li.happy.active div:after {--middle-s-x: 0.95;--middle-s-y: 0.75;-webkit-animation: toggle 0.8s linear forwards;animation: toggle 0.8s linear forwards;}
.feedback li:not(.active) {cursor: pointer;}
.feedback li:not(.active):active {transform: scale(0.925);}
.feedback:not(.removeHover) li:hover, .feedback li.active {--sb: var(--active);--sh: var(--active-shadow);--m: var(--active-mouth);--e: var(--active-eye);}
.feedback:not(.removeHover) li:hover div,.feedback li.active div {-webkit-animation: shake 0.8s linear forwards;animation: shake 0.8s linear forwards;}
@-webkit-keyframes shake {30% {transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);}60% {transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);}100% {transform: perspective(240px) translateZ(4px);}}
@keyframes shake {30% {transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);}60% {transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);}100% {transform: perspective(240px) translateZ(4px);}}
@-webkit-keyframes tear {0% {opacity: 0;transform: translateY(-2px) scale(0) translateZ(0);}50% {transform: translateY(12px) scale(0.6, 1.2) translateZ(0);}20%, 80% {opacity: 1;}100% {opacity: 0;transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);}}
@keyframes tear {0% {opacity: 0;transform: translateY(-2px) scale(0) translateZ(0);}50% {transform: translateY(12px) scale(0.6, 1.2) translateZ(0);}20%, 80% {opacity: 1;}100% {opacity: 0;transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);}}
@-webkit-keyframes toggle {50% {transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));}}
@keyframes toggle {50% {transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));}}
@-webkit-keyframes angry {40% {background: var(--active);}45% {box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);}}
@keyframes angry {40% {background: var(--active);}45% {box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);}}
.videoResponseWrapper {position: relative;}
.videoResponseWrapper img {width: 100%;border-radius:15px;}
.playbackIconWrapper {position: absolute;left: 0;right: 0;top: 0;bottom: 0;align-items: center;display: flex;justify-content: center;background-color: rgba(0,0,0,0.4);border-radius:15px;}
.playbackIconWrapper svg {width: 100px;height: 100px;fill: #fff;}
@media only screen and (max-device-width: 460px){
.settingWidth{width:210px;}
}
#calendlyWidget{position: fixed;width: 100%;height: 100%;/* outline-offset: -5px; */z-index: 1;top: 55px;left: 0;bottom: 0;right: 0;background: white;z-index: 99999999999999999;min-width:320px;display:block;}
#calendlyWidget::before {content: "";display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;border-top: 4px solid #3498db;border-radius: 50%;animation: spinCalendly 1s linear infinite;}
@keyframes spinCalendly {0% {transform: translate(-50%, -50%) rotate(0deg);}100% {transform: translate(-50%, -50%) rotate(360deg);}}
#calendlyWidget iframe{z-index: 99999;position: relative;top: 0;left: 0;right: 0;bottom: 0;}
`
return styles;
},
triggerMsgCss: function(){
var styles = `
@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
body{margin:0;font-family: Poppins,sans-serif;font-size: 14px;line-height: 1.5;}
.rvBotAvatar{box-shadow: #0000001a 0px 5px 10px;border: 1px solid #d3d2d2;width: 34px;border-radius: 50%;}
.rvTrigger.posRelative {position: relative;border-radius: 5px 5px 5px 0px;box-sizing: border-box;padding: 15px 0px;background-color: rgb(255, 255, 255);box-shadow: ${botsetting.boxShadow};clear: both;margin-left: 45px;margin-bottom: 8px;}
.flypopup.Left .rvTrigger.posRelative{margin-left: 0;margin-right: 45px;border-radius: 5px 5px 0px 5px;}
.rvTriggerBotIcon {position: absolute;bottom: 0px;left: -40px;box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;border-radius: 100%;}
.flypopup.Left .rvTriggerBotIcon{left: inherit;right: -40px;}
.rvTriggerBotIcon img {width: 32px;}
.rvoperatorWrap {font-size: 10px;color: rgba(115, 115, 118, 0.7);padding: 0px 20px 10px;}
.rvoperatorMsgWrap {padding: 0px 20px;max-height: 300px;}
.rvOperatorContWrap {font-size: 14px;line-height: 1.4;/* margin: 0px 0px 10px; */}
.rvTrigger.posRelative:after {content: "";position: absolute;bottom: 0px;left: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 0px 13px 5px;border-color: transparent transparent white;}
.flypopup.Left .rvTrigger.posRelative:after{left: inherit;right: -5px;border-width: 0 5px 13px 0;}
.flypopup.Left{margin-right:0;}
.flypopup{padding: 0;width: 285px;position: absolute;bottom: 0;border-radius: 12px;display: flex;flex-direction: column;z-index: 1;right: 0;opacity:0;transition: ease-in 2s opacity;margin-right:10px;}
.flypopup.enable{opacity:1;}
.flypopup .close-button-wrapper {position: absolute;bottom: 100%;opacity: 1;width: 100%;height: 25px;transition: all 0.3s ease 0s;left: 0px;}
.flypopup .close-button-wrapper button.material-icons.exit-chat.mobile-close {position: absolute;top: 0px;border-radius: 50%;margin: 0px;padding: 3px;box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;height: 24px;width: 24px;display: flex;background: rgb(255, 255, 255);right:0}
.flypopup.Left .close-button-wrapper button.material-icons.exit-chat.mobile-close{left:0;right:initial;}
button, button.material-icons {background: none;border: 0px;color: inherit;font-style: inherit;font-variant: inherit;font-weight: inherit;font-stretch: inherit;font-size: inherit;font-family: inherit;line-height: normal;overflow: visible;padding: 0px;user-select: none;outline: none;cursor: pointer;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.rve_trigger button{margin: 0 0 10px auto;font-size: 14px;line-height: 18px;padding: 10px;border-radius: 6px;background-color: rgb(0, 113, 178);color: rgb(255, 255, 255);display: block;}
.flypopup.Left .rve_trigger button{margin-left: 0;margin-right: auto;}
.rve_trigger button:hover{background-color: rgb(229, 246, 255);color: rgb(0, 113, 178);}
.rve_trigger button:lastchild{margin-bottom:0;}
.flypopup .close-button-wrapper button.material-icons.exit-chat.mobile-close svg#ic_close {width: 20px;height: 20px;fill: rgb(136, 148, 171);}
.cursorPointer{cursor: pointer;}
@media only screen and (max-device-width: 460px){
.rvTriggerBotIcon{display:none}
.rvoperatorWrap{padding: 0 8px 5px;}
.rvoperatorMsgWrap{padding: 0 8px;}
.flypopup .close-button-wrapper{opacity: 1;transform: translateY(0px);height: 27px;}
}
`
return styles;
},
flyOptionEvent: async function(e){
RvBotView.rvInnerPageFooterLoad();
var activateUser = 0
if (e.target.parentNode.classList[0] == "rve_dg_btn_Wrapper") {
e.target.parentNode.parentNode.remove();
} else {
activateUser = 1;
notificationContentFrame.body.getElementsByClassName("new-message")[0].innerHTML = 0;
rvSetCookies(31, "notify-value", 0);
var flyMessage = triggerContentFrame.querySelector(".flypopup");
if(flyMessage){
flyMessage.style.display = "none";
triggerFrame.style.display = "none";
var circle_ripple = toggleContentFrame.querySelector(".circle-ripple");
circle_ripple.style.display = "none";
notificationFrame.style.display = "none";
if(!socketConnectFlag){
socketConnectFlag = true;
RvBotView.socketConnect();
}
var dd = divWidget;
dd.style.display = "block";
//if( parseInt(Website_Id) === 164 ){
chatToggleFrame.classList.remove("customSizeToggleRV")
//}
let rvChatIcon = toggleContentFrame.body.querySelector(".rvChatIconWrapper");
if( rvChatIcon ){
chatToggleFrame.classList.add('widgetOpen');
toggleContentFrame.body.classList.add('widgetOpen');
rvChatIcon.innerHTML = chatCloseIcon
}
}
}
var options = e.target.dataset.value;
currentOption = options
rvSetCookies(31, "rvce_current_option", options);
if( options == "live_agent" ){
Is_Agent = true
Is_Agent_Flag = "changed"
rvSetCookies( 1, 'agent-chat', true);
}else{
Is_Agent = false
Is_Agent_Flag = ""
rvSetCookies( 1, 'agent-chat', false);
}
if( options == "workflow"){
RV_Load_Conversation = true;
await RvBotView.startConversationFunc(false);
RV_Start_Conversation = true
workflow = true;
let index = e.target.dataset.workflow
let websitePage = websitePages[index]
var getCurTime = RvBotView.rvGetCurrentTime();
msg = websitePage.Trigger_Message.replace(/\n/g, "
");
let name = ( RV_Customer_Name && RV_Customer_Name == null ) ? RV_Customer_Name : 'me';
var rvMessage =`
${name}, ${getCurTime}
${msg}
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "workflow", "user", "", websitePage.Agent_Bot_Workflow_Id, "", activateUser);
RvBotView.updateCurrentConversation(msg, "user");
currentWorkflowId = websitePage.Agent_Bot_Workflow_Id;
if( Visitor_Chat_Id != "" && typeof socket !== "undefined" && socket !== ""){
socket.emit("online", { Conversation_Id: Conversation_Id, Website_Id: Website_Id })
}
}else if( options == "form"){
let formId = e.target.dataset.workflow
if( divWidget.style.display == "none" ){
RV_Load_Conversation = true
await RvBotView.startConversationFunc(false);
}else{
RvBotView.collectionData(formId);
}
}else{
workflow = false;
currentWorkflowId = "";
var msg = options == "faq" ? "Please enter your queries" : ''
if (msg) {
RV_Load_Conversation = true
await RvBotView.startConversationFunc(false, false, true, true);
// var getCurTime = RvBotView.rvGetCurrentTime();
// msg = msg.replace(/\n/g, "
");
// var rvMessage =`
//
//
//
//
${msg}
//
//
// `;
// RvBotView.removeTyping();
// RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
// RvBotView.rvResetMsgScroll();
// await RvBotView.rvSendMessage( msg, "no", "bot", "","","",activateUser);
// RvBotView.updateCurrentConversation(msg, "bot");
if( Visitor_Chat_Id != "" && typeof socket !== "undefined" && socket !== ""){
socket.emit("online", { Conversation_Id: Conversation_Id, Website_Id: Website_Id })
}
} else {
await RvBotView.startConversationFunc();
//RvBotView.initiateConversation();
// if (rvGetCookies("rv_email") || rvGetCookies("login-customerid")) {
// var pt_login_box = widgetContentFrame.querySelector(".loginBox");
// pt_login_box.style.display = "none";
// RvBotView.rvSendMessage("started live chat", "", "activity", "online");
// } else {
// widgetContentFrame.getElementsByClassName('loginBox')[0].style.left = 0;
// // var ptw_cb_footer = document.querySelector(".ptw_cb_footer");
// // ptw_cb_footer.style.display = "none";
// //ptResetMessageScroll();
// }
}
}
},
chatOptions: async function(){
var rvMessage = `
How do you want to connect with Agent?
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
//await RvBotView.rvSendMessage( "How do you want to connect with Agent?", "", "bot");
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
//RvBotView.updateCurrentConversation("How do you want to connect with Agent?", "bot");
let domButtons = widgetContentFrame.querySelectorAll(".rv_initiate_conversation");
for (i = 0; i < domButtons.length; i++) {
domButtons[i].addEventListener("click", RvBotView.chatEventOptions);
}
},
rvCollectSMSConsent: async function(){
var rvMessage = `
Yes, I would like ${botsetting.Agent_Bot_Name} to contact me via text messaging.
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
//await RvBotView.rvSendMessage( "How do you want to connect with Agent?", "", "bot");
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
//RvBotView.updateCurrentConversation("How do you want to connect with Agent?", "bot");
let domButtons = widgetContentFrame.querySelectorAll(".rv_sms_consent");
for (i = 0; i < domButtons.length; i++) {
domButtons[i].addEventListener("click", RvBotView.smsConsentEvent);
}
},
smsConsentEvent: async function(e){
let value = e.target.dataset.value
var rvMessage = `
` + RV_Customer_Name + `, ` + RvBotView.rvGetCurrentTime() + `
` + value + `
`;
e.target.parentNode.parentNode.innerHTML = rvMessage;
if( value === "yes" ){
//RV_Start_Conversation = false;
//await RvBotView.rvSendMessage( value, "", "user");
rvSetCookies(31,'sms_consent',"yes")
if( !rvGetCookies('rv_pre_chat_form') || RV_Pre_Chat_Form_Stats === "old" ){
RvBotView.rvCollectMessage();
}else{
RvBotView.closeSMSConversation();
}
}else{
RvBotView.closeSMSConversation(false);
}
},
chatEventOptions: async function(e){
let value = e.target.dataset.value
var rvMessage = `
` + RV_Customer_Name + `, ` + RvBotView.rvGetCurrentTime() + `
` + value + `
`;
e.target.parentNode.parentNode.innerHTML = rvMessage;
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
//await RvBotView.rvSendMessage( value, "", "user");
RvBotView.removeTyping();
RvBotView.rvResetMsgScroll();
if( value === "SMS" ){
if( typeof Conversation_Id !== "undefined" && Conversation_Id !== null && Conversation_Id !== "" ){
let url = "/api/v1/changeConversationToSMS";
let data = `Conversation_Id=${Conversation_Id}&Visitor_Chat_Id=${Visitor_Chat_Id}&Website_Id=${Website_Id}&type=sms&rv_agent_option=${RVAgentOption}`
let res = await RvBotView.rvXmlRequest(url, data);
if( res.status === "success" ){
if( RV_MSG[0] && RV_MSG[0].Conversation_Id != Conversation_Id ){
let i;
for( i = 0; i < RV_MSG.length; i++ ){
if( RV_MSG[i].Conversation_Id == Conversation_Id || RV_MSG[i].Conversation_Id == checkConversationId ){
break;
}
}
if( i < RV_MSG.length ){
RV_MSG.splice( i, 1 );
}
}else{
RV_MSG.splice( 0, 1 );
}
Conversation_Id = res.Conversation_Id;
}
}
RV_Current_Chat_Option = "SMS"
if( RV_Customer_Phone == "" ){
RvBotView.rvCollectPhoneInformation();
}else if( !rvGetCookies('sms_consent') || rvGetCookies('sms_consent') !== "yes"){
RvBotView.rvCollectSMSConsent();
}else{
if( !rvGetCookies('rv_pre_chat_form') || RV_Pre_Chat_Form_Stats === "old" ){
RvBotView.rvCollectMessage();
}else{
RvBotView.closeSMSConversation();
}
}
}else if( !rvGetCookies('rv_pre_chat_form') ){
if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_email") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_email") ) ) {
if(RV_ORDER_EMAIL !== "" ){
rvSetCookies(31, "rv_email", RV_ORDER_EMAIL)
RV_Customer_Email = RV_ORDER_EMAIL
RvBotView.updateEmailLead(RV_Customer_Email);
RvBotView.rvCollectNameInformation();
}else{
RvBotView.rvCollectEmailInformation();
}
}else if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_name") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_name") ) ) {
RvBotView.rvCollectNameInformation();
}else if( RVAgentOption && RV_Start_Live_Chat && Object.keys(RV_Departments).length > 0 ){
RvBotView.rvCollectDepartmentInformation();
}else{
RvBotView.rvCollectMessage();
}
}else{
RvBotView.preChatFormWebsiteChatFlow();
}
},
addArticleMsg: async function(){
let productFaqMessage = `
Start a Conversation
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Title}
${RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].articles[collectionBreadCrumb.articleIndex].Title}
`
let rvMsg = `
` + RV_Customer_Name +`, ` +RvBotView.rvGetCurrentTime() +`
${productFaqMessage}
`
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage(encodeURIComponent(productFaqMessage), "", "user");
RvBotView.updateCurrentConversation(productFaqMessage, "user");
},
generatePreChatForm: async function(formDetails){
if( !rvGetCookies('rv_pre_chat_form') || ( rvGetCookies('rv_pre_chat_form') && parseInt(Website_Id) === 113 ) ){
let rvReplyInputBox = widgetContentFrame.body.querySelector('.rvReplyInputBox');
if(rvReplyInputBox){
rvReplyInputBox.remove()
}
let preChatFormFields = formDetails.Form_Fields;
let formMerge = '';
let phoneFlag = false
let phoneId = ''
let inputType = ''
for( let i = 0; i < preChatFormFields.length; i++ ){
let optionAdd = ''
let GetOption = ''
if(preChatFormFields[i].Attribute_Type == "text" || preChatFormFields[i].Attribute_Type == "email" || preChatFormFields[i].Attribute_Type == "file" || preChatFormFields[i].Attribute_Type == "number" || preChatFormFields[i].Attribute_Type == "phone" ){
optionAdd = ''
let value = ''
if( preChatFormFields[i].Name === "Name" ){
value = RV_Customer_Name !== "me" ? RV_Customer_Name : ""
} else if( preChatFormFields[i].Attribute_Type === "email" ){
value = RV_Customer_Email
}
if( preChatFormFields[i].Attribute_Type === "phone" ){
phoneFlag = true
phoneId = `data${i}`
inputType = 'text'
value = RV_Customer_Phone
}else{
inputType = preChatFormFields[i].Attribute_Type
}
formMerge += `
`
}else if(preChatFormFields[i].Attribute_Type == "textarea"){
optionAdd = ''
formMerge += `
`
}else if(preChatFormFields[i].Attribute_Type == "dropdown_select"){
optionAdd = ''
GetOption = JSON.parse(preChatFormFields[i].Sub_Value)
for( let value of Object.keys(GetOption) ){
if( GetOption[value] !== "" ){
optionAdd += `
${GetOption[value]} `
}
}
formMerge += `
`
}else if(preChatFormFields[i].Attribute_Type == "radio_select"){
optionAdd = ''
GetOption = JSON.parse(preChatFormFields[i].Sub_Value)
let k = 0;
for( let value of Object.keys(GetOption) ){
if( GetOption[value] !== "" ){
optionAdd += `
${GetOption[value]} `
}
k++;
}
formMerge += `
`
}else if(preChatFormFields[i].Attribute_Type == "Yes_or_no"){
formMerge += `
`
}else if(preChatFormFields[i].Attribute_Type == "multiple_checkboxes"){
optionAdd = ''
let GetOption = JSON.parse(preChatFormFields[i].Sub_Value)
let j = 0;
for( let value of Object.keys(GetOption) ){
if( GetOption[value] !== "" ){
optionAdd += `
${GetOption[value]} `
j++;
}
}
formMerge += `
`
}
}
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
let formDescriptionHtml = '';
if( typeof formDetails.Form_Description !== "undefined" && formDetails.Form_Description !== "" ){
formDescriptionHtml = ``;
}
let accessHtml = `
`
rvMessengerHeader.insertAdjacentHTML('afterend', accessHtml);
if( phoneFlag ){
var phoneInputField = widgetContentFrame.body.querySelector("#"+phoneId);
phoneInput = widgetFrame.contentWindow.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
}
RvBotView.preChatFormEvent();
}else{
var chatConversationHtml = `
`
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
rvMessengerHeader.insertAdjacentHTML('afterend', chatConversationHtml);
RV_MSG_BODY_HEIGHT = widgetContentFrame.body.querySelector('#rvMessengerHeight');
RV_MSG_BODY = widgetContentFrame.body.querySelector('.rvConversationMessage');
RV_Pre_Chat_Form_Stats = "old"
if( Object.keys(collectionBreadCrumb).length == 2 ){
await RvBotView.addArticleMsg();
}
RvBotView.preChatFormFlow()
}
},
handleImageUpload: function (e){
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
RvBotView.createImage(files[0],e.target.files);
let imgFrame = widgetContentFrame.body.querySelector(".small-upload")
imgFrame.style.display = "block";
var previewClose = widgetContentFrame.body.querySelector(".previewcloseBtn")
if(previewClose){
previewClose.addEventListener("click", RvBotView.previewcloseBtn);
}
widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton").classList.add("active");
RvBotView.rvActiveButtonCall();
},
previewcloseBtn: function (e){
let imgFrame = widgetContentFrame.body.querySelector(".small-upload")
imgFrame.style.display = "none";
chatType = '';
fileFormat = '';
previewImg = '';
previewName = '';
fileSize = '';
},
createImage: function(e,file){
let reader = new FileReader();
reader.addEventListener('load', (e) => {
var format = file[0].type.split("/");
var getFileSize = (file[0].size / 1024).toFixed(2) + "KB";
fileValue = e.target.result;
chatType = 'file';
let setFormt = format[1];
if(format[1] == "vnd.openxmlformats-officedocument.wordprocessingml.document"){
setFormt = 'docx'
}
fileFormat = setFormt;
previewImg = e.target.result;
previewName = file[0].name;
fileSize = getFileSize;
let imgFrameSRC = widgetContentFrame.body.querySelector(".img-frame-src")
let img = ''
if(setFormt == 'pdf' || setFormt == 'doc' || setFormt == 'docx' || setFormt == 'vnd.openxmlformats-officedocument.wordprocessingml.document'){
img = RV_BASE_URL+'/images/doc.png'
imgFrameSRC.src = img;
}else{
imgFrameSRC.src = previewImg;
}
});
reader.readAsDataURL(e);
},
preChatFormEvent: function(){
let preChatFormSubmitDom = widgetContentFrame.body.querySelector('#preChatFormSubmit');
if( preChatFormSubmitDom ){
preChatFormSubmitDom.addEventListener("click", RvBotView.preChatFormSubmission);
}
},
preChatFormSubmission: async function(e){
let errorFlag = false
let FormField = [];
if( RVAgentOption ){
FormField = botsetting.Pre_Chat_Form.online.Form_Fields;
}else{
FormField = botsetting.Pre_Chat_Form.offline.Form_Fields;
}
for(let i=0; i < FormField.length;i++){
let accessInputDom = widgetContentFrame.body.querySelector(`[data-element="data${i}"`);
if( ( FormField[i].Attribute_Type == "radio_select" || FormField[i].Attribute_Type == "Yes_or_no" ) && FormField[i].Required ){
var checked_radio = widgetContentFrame.body.querySelectorAll("input[name='data"+i+"']:checked").length;
if(checked_radio == 0 ){
accessInputDom.parentNode.parentNode.parentNode.classList.add('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "Please select the "+FormField[i].Name.toLowerCase();
errorFlag = true
}else{
accessInputDom.parentNode.parentNode.parentNode.classList.remove('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "";
}
}else if(FormField[i].Attribute_Type == "multiple_checkboxes" && FormField[i].Required ){
var checked_checkboxes = widgetContentFrame.body.querySelectorAll("input[name='data"+i+"[]']:checked");
if(checked_checkboxes.length == 0 ){
accessInputDom.parentNode.parentNode.parentNode.classList.add('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "Please select the "+FormField[i].Name.toLowerCase();
errorFlag = true
}else{
accessInputDom.parentNode.parentNode.classList.remove('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "";
}
}else if(accessInputDom.value == "" && FormField[i].Required ){
if(FormField[i].Attribute_Type !== "phone"){
accessInputDom.parentNode.parentNode.classList.add('form-error');
}else{
accessInputDom.parentNode.parentNode.parentNode.classList.add('form-error');
}
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "Please enter "+FormField[i].Name.toLowerCase();
errorFlag = true
}else if(FormField[i].Attribute_Type == "email" && accessInputDom.value !== "" ){
var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(!pattern.test(accessInputDom.value)){
accessInputDom.parentNode.parentNode.classList.add('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "Please enter valid email";
errorFlag = true
}else{
accessInputDom.parentNode.parentNode.classList.remove('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "";
}
}else if(FormField[i].Attribute_Type == "phone" && accessInputDom.value !== "" ){
var pattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
if(!pattern.test(accessInputDom.value)){
accessInputDom.parentNode.parentNode.parentNode.classList.add('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "Please enter valid phone";
errorFlag = true
}else{
accessInputDom.parentNode.parentNode.parentNode.classList.remove('form-error');
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "";
}
}else{
if(FormField[i].Attribute_Type !== "phone"){
accessInputDom.parentNode.parentNode.classList.remove('form-error');
}else{
accessInputDom.parentNode.parentNode.parentNode.classList.remove('form-error');
}
accessInputDom.parentNode.parentNode.querySelector('.form-feedback'+i).innerHTML = "";
}
}
if( errorFlag ){
return
}
let preChatFormSubmitDom = widgetContentFrame.body.querySelector('#preChatFormSubmit');
preChatFormSubmitDom.innerHTML = `
${typingLoader} `
preChatFormSubmitDom.setAttribute("disabled", "disabled");
let msgAdd = ''
var Visitor_Details = []
for(let i=0; i < FormField.length;i++){
let value = ""
if(FormField[i].Attribute_Type == "multiple_checkboxes"){
var checked_checkboxes = widgetContentFrame.body.querySelectorAll("input[name='data"+i+"[]']:checked");
let vals = "";
for (var j=0;j
${FormField[i].Name} : ${value}`
FormField[i].User_Value = value;
if( FormField[i].Attribute_Type === "text" && FormField[i].Name === "Name" ){
rvSetCookies(31, 'rv_name', value)
RV_Customer_Name = value
}else if( FormField[i].Attribute_Type === "email" ){
rvSetCookies(31, 'rv_email', value)
RV_Customer_Email = value
}else if( FormField[i].Attribute_Type === "phone" ){
rvSetCookies(31, 'rv_phone', value)
RV_Customer_Phone = value
}
}
rvSetCookies(31, 'rv_pre_chat_form', "true");
let preChatMessage = `
`
// RV_Start_Conversation = true;
Is_Agent_Flag = "changed"
var chatConversationHtml = `
`
let accessYourAccount = widgetContentFrame.body.querySelector('.accessYourAccount');
if( accessYourAccount ){
accessYourAccount.remove();
}
let rvMessengerHeader = widgetContentFrame.body.querySelector('.rvMessengerHeader');
rvMessengerHeader.insertAdjacentHTML('afterend', chatConversationHtml);
RV_MSG_BODY_HEIGHT = widgetContentFrame.body.querySelector('#rvMessengerHeight');
RV_MSG_BODY = widgetContentFrame.body.querySelector('.rvConversationMessage');
if( RV_MSG_BODY_HEIGHT != "" ){
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
await RvBotView.rvSendMessage(encodeURIComponent(preChatMessage), "", "user", "", "", "", "", true);
let url = "/api/v1/preChatFormSubmission/"+rvWebsiteId;
let data = {VisitorId:rvGetCookies("VisitorId"), Visitor_Chat_Id: Visitor_Chat_Id, Conversation_Id: Conversation_Id, rv_agent_option: RVAgentOption, Form_Details: FormField, current_page_url: window.location.href}
const res = await RvBotView.rvXmlJsonRequest(url, data);
if( res.status === "success" ){
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
Conversation_Id = res.Conversation_Id;
Website_Id = res.Website_Id;
}
if( Object.keys(collectionBreadCrumb).length == 2 ){
RvBotView.addArticleMsg();
}
RV_Pre_Chat_Form_Stats = "new"
RvBotView.preChatFormFlow();
},
preChatFormFlow: async function(){
if( RV_SMS_Options ){
RvBotView.chatOptions();
}else{
RvBotView.preChatFormWebsiteChatFlow();
}
},
addConnectionChatActivityMessage: async function(){
if( RVAgentOption && Rv_Current_Conversation && ( typeof Rv_Current_Conversation.Assign_To === "undefined" || ( typeof Rv_Current_Conversation.Assign_To !== "undefined" && ( Rv_Current_Conversation.Assign_To === "" || Rv_Current_Conversation.Assign_To === null ) ) ) ){
var rvMsg = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
},
preChatFormWebsiteChatFlow: async function(){
if( RVAgentOption ){
if( Object.keys(collectionBreadCrumb).length == 2 ){
await RvBotView.getAgentForConversation();
if( RV_Pre_Chat_Form_Stats === 'old' ){
RvBotView.rvCollectMessage();
}else{
RVClearNotification = true
RvBotView.addConnectionChatActivityMessage()
setTimeout(RvBotView.addNotificationMessage, notificationTiming);
RvBotView.sendMessageEvent()
}
}else{
RvBotView.rvCollectDepartmentInformation();
}
}else{
if( Object.keys(collectionBreadCrumb).length == 2 ){
await RvBotView.getAgentForConversation();
}
if( RV_Pre_Chat_Form_Stats === 'old' ){
RvBotView.rvCollectMessage();
}else{
RVClearNotification = true
//RvBotView.addConnectionChatActivityMessage()
setTimeout(RvBotView.addNotificationMessage, 100);
RvBotView.sendMessageEvent();
// if( widgetContentFrame.querySelector('.rvReplyInputBox > textarea') ){
// widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
// widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
// }
}
}
},
initiateConversation: async function(){
if( RVAgentOption ){
rvSetCookies(31, "rvce_current_option", "live_chat");
currentOption = "live_chat";
}
if( RV_SMS_Options ){
RvBotView.chatOptions();
}else{
if( parseInt(Website_Id) === 164 ){
if( RVAgentOption && RV_Start_Live_Chat && Object.keys(RV_Departments).length > 0 ){
RvBotView.rvCollectDepartmentInformation();
}else{
RvBotView.rvCollectMessage();
}
}else{
if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_email") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_email") ) ) {
if(RV_ORDER_EMAIL !== "" ){
rvSetCookies(31, "rv_email", RV_ORDER_EMAIL)
RV_Customer_Email = RV_ORDER_EMAIL
RvBotView.updateEmailLead(RV_Customer_Email);
RvBotView.rvCollectNameInformation();
}else{
RvBotView.rvCollectEmailInformation();
}
}else if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_name") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_name") ) ) {
RvBotView.rvCollectNameInformation();
}else if( RVAgentOption && RV_Start_Live_Chat && Object.keys(RV_Departments).length > 0 ){
RvBotView.rvCollectDepartmentInformation();
}else if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_phone") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_phone") ) ){
RvBotView.rvCollectPhoneInformation();
}else{
RvBotView.rvCollectMessage();
}
}
}
},
rvCollectPhoneInformation: async function(){
if( !rvGetCookies('rv_phone') ){
let msg = ( botsetting && botsetting.Collect_Phone_Text ) ? botsetting.Collect_Phone_Text : "Give the team a way to reach you.";
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
if( RV_Current_Chat_Option !== "SMS" ){
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
}
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
var phoneInputField = widgetContentFrame.body.querySelector("#phone");
phoneInput = widgetFrame.contentWindow.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
RvBotView.collectPhoneEvent();
}else{
RvBotView.rvCollectMessage();
}
},
rvCollectEmailInformation: async function(){
let msg = ( botsetting && botsetting.Collect_Email_Text ) ? botsetting.Collect_Email_Text : "Give the team a way to reach you.";
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
RvBotView.collectEmailEvent();
},
rvCollectNameInformation: async function(){
if( !rvGetCookies("rv_name") ) {
let msg = ( botsetting && botsetting.Collect_Name_Text ) ? botsetting.Collect_Name_Text : "Thanks! A few more details will help assign you to the right person:";
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
var rvMessage = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
RvBotView.collectNameEvent();
}else{
RvBotView.rvCollectDepartmentInformation()
}
},
rvCollectDepartmentInformation: async function(){
if( RVAgentOption && RV_Start_Live_Chat && Object.keys(RV_Departments).length > 0 ){
let msg = ( botsetting && botsetting.Select_Department_Text ) ? botsetting.Select_Department_Text : "Thanks for contacting live chat. To assist you reach the right agent, kindly select the department";
var rvMessage =`
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
let departmentKeys = Object.keys(RV_Departments);
let buttonInnerHtml = "";
for (i = 0; i < departmentKeys.length; i++) {
buttonInnerHtml += `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
RvBotView.collectDepartmentEvent();
}else{
if( !rvGetCookies('rv_pre_chat_form') && ( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_phone") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_phone") ) ) ){
RvBotView.rvCollectPhoneInformation()
}else{
RvBotView.rvCollectMessage();
}
}
var msg1 = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
RvBotView.collectDepartmentEvent();
},
collectDepartmentEvent: function () {
let domButtons = widgetContentFrame.querySelectorAll(".rve_department_option");
for (let k = 0; k < domButtons.length; k++) {
domButtons[k].addEventListener("click", RvBotView.collectionDepartmentFunc);
}
},
collectionDepartmentFunc: async function (e) {
let msg = e.target.innerHTML
RV_Department_Id = e.target.dataset.depid;
if (msg) {
msg = msg.replace(/\n/g, "
`;
RvBotView.removeTyping();
e.target.parentNode.parentNode.innerHTML = msg1;
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
RvBotView.rvResetMsgScroll();
await RvBotView.rvSendMessage(msg, "", "user");
RvBotView.updateCurrentConversation(msg, "user");
if( !rvGetCookies('rv_pre_chat_form') ){
if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_phone") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_phone") ) ){
RvBotView.rvCollectPhoneInformation();
}else{
RvBotView.rvCollectMessage();
}
}else{
await RvBotView.getAgentForConversation();
if( RV_Pre_Chat_Form_Stats === "old" ){
RvBotView.rvCollectMessage();
}else{
RVClearNotification = true
RvBotView.addConnectionChatActivityMessage()
setTimeout(RvBotView.addNotificationMessage, notificationTiming);
RvBotView.sendMessageEvent();
}
}
}
},
rvCollectMessage: async function(){
let msg = "";
if( RVAgentOption ){
msg = ( botsetting && botsetting.Collect_Message_Online ) ? botsetting.Collect_Message_Online : "Please share your questions";
}else{
msg = ( botsetting && botsetting.Collect_Message_Offline ) ? botsetting.Collect_Message_Offline : "Please leave your message";
}
var rvMessage =`
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
if( RV_Current_Chat_Option !== "SMS" ){
await RvBotView.rvSendMessage( msg, "", "bot");
RvBotView.updateCurrentConversation(msg, "bot");
}
RvBotView.collectMessageEvent();
},
collectMessageEvent: function (){
widgetContentFrame.body.querySelector('.rvReplyInputBox > textarea').removeAttribute('disabled');
widgetContentFrame.body.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.remove('disabled');
var textArea = widgetContentFrame.body.querySelector('.rvReplyInputBox textarea');
textArea.addEventListener("keydown", RvBotView.collectMessageKeyDownEvent);
textArea.addEventListener("keyup", RvBotView.collectMessageKeyUpEvent);
},
collectMessageKeyDownEvent: function (e){
var rvMsg = this.value;
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
if (!e.shiftKey) {
e.preventDefault();
RvBotView.sendMessageBtnClick()
}
}
},
collectMessageKeyUpEvent: function(e){
var rvMsg = this.value;
if (rvMsg) {
widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton").classList.add("active");
if (Visitor_Chat_Id == "" && typeof socket !== "undefined" && socket !== "") {
socket.emit("user_typing", {
Conversation_Id: Conversation_Id,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
type: "typing",
typing: true,
});
}
RvBotView.collectMessageBtnEvent();
} else {
var rvBtnActive = widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton");
rvBtnActive.removeEventListener("click", RvBotView.sendMessageBtnClick);
widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton").classList.remove("active");
}
},
collectMessageBtnEvent: function() {
var rvBtnActive = widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton.active");
rvBtnActive.addEventListener("click", RvBotView.sendMessageBtnClick);
},
assignAgentToConversation: function( agentId , newOption = ""){
let rvAgentsInformation = widgetContentFrame.body.querySelector('.rvAgentsInformation.settingWidth.rvFlex.rvAlignItemsCenter');
let previousAssignTo = ( typeof Rv_Current_Conversation.Assign_To == "undefined" || ( typeof Rv_Current_Conversation.Assign_To != "undefined" && Rv_Current_Conversation.Assign_To == "" ) ) ? "" : Rv_Current_Conversation.Assign_To;
Rv_Current_Conversation.Assign_To = agentId
RV_MSG[0].Assign_To = agentId
if( rvAgentsInformation && AgentDetails[agentId] ){
let value = AgentDetails[agentId]
let headerHtml = ""
if( value.dp && value.dp != "" ){
headerHtml = `
`
}else{
let initials = "";
if( value.firstName ){
initials = value.firstName.substring(0,1).toUpperCase();
}
if( value.lastName ){
initials += value.lastName.substring(0,1).toUpperCase();
}
headerHtml = `
`
}
if( RV_MSG_BODY_HEIGHT != "" && newOption == ""){
let activityMsg = ""
if( previousAssignTo == "" ){
activityMsg = `Please wait. Our agent, ${value.firstName}, will connect with you shortly`
}else{
let departmentId = ""
if( collectionBreadCrumb.hasOwnProperty('collectionIndex') && collectionBreadCrumb.collectionIndex != "" && RV_ARTICLE_TYPE != "" ){
departmentId = typeof RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Department_Id != "undefined" ? RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Department_Id : "";
}else{
for( let val of Object.keys(RV_Collection_Article) ){
for(let i = 0; i < RV_Collection_Article[val].length; i++){
if ( RV_Collection_Article[val][i].Collection_Id == Rv_Current_Conversation.Collection_Id ){
departmentId = RV_Collection_Article[val][i].Department_Id
break;
}
}
}
}
let departmentMsg = ""
if( departmentId != "" && typeof RV_Departments[departmentId] != "undefined" ){
departmentMsg = " from "+RV_Departments[departmentId].Name
}
activityMsg = `${value.firstName}${departmentMsg}, will join shortly`
}
var rvMsg = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
if( RV_MSG_BODY_HEIGHT != "" && newOption == "newJoinee" ){
var rvMsg = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMsg);
RvBotView.rvResetMsgScroll();
}
}
},
getAgentForConversation: async function(){
let collectionId = "";
if( collectionBreadCrumb.hasOwnProperty('collectionIndex') && collectionBreadCrumb.collectionIndex != "" && RV_ARTICLE_TYPE != "" ){
collectionId = RV_Collection_Article[RV_ARTICLE_TYPE][collectionBreadCrumb.collectionIndex].Collection_Id;
}else if( typeof Rv_Current_Conversation.Assign_To == "undefined" || ( typeof Rv_Current_Conversation.Assign_To != "undefined" && Rv_Current_Conversation.Assign_To == "" ) ){
if( typeof Rv_Current_Conversation.Collection_Id != "undefined" && Rv_Current_Conversation.Collection_Id != "" ){
collectionId = Rv_Current_Conversation.Collection_Id
}
}
if( collectionId != "" ){
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
let url = "/api/v1/conversationAssign"
let data = `Conversation_Id=${Conversation_Id}&Collection_Id=${collectionId}&name=${RV_Customer_Name}&assignagent=${RVAgentOption}`
let response = await RvBotView.rvXmlRequest(url, data);
if( RVAgentOption ){
if( response.status === "success" ){
let agentId = response.data.Agent_Id;
if( agentId !== "" ){
RvBotView.assignAgentToConversation(agentId);
}
}
}
}else if( RV_Department_Id != "" ){
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
let url = "/api/v1/conversationAssign"
let data = `Conversation_Id=${Conversation_Id}&Department_Id=${RV_Department_Id}&name=${RV_Customer_Name}&assignagent=${RVAgentOption}`
RV_Department_Id = ""
let response = await RvBotView.rvXmlRequest(url, data);
if( RVAgentOption ){
if( response.status === "success" ){
let agentId = response.data.Agent_Id;
if( agentId !== "" ){
RvBotView.assignAgentToConversation(agentId);
}
}
}
}
},
closeSMSConversation: async function( noConsent = true){
let smsMsg = ( botsetting && botsetting.SMS_Text ) ? botsetting.SMS_Text : `Thank You, Someone will text you shortly.`;
if(!noConsent){
smsMsg = `Please go back and try other option.`
}
msg1 = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
},
sendMessageBtnClick: async function(){
var msg = widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value;
if (msg) {
msg = msg.replace(/\n/g, "
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", msg1);
RvBotView.rvResetMsgScroll();
var textArea = widgetContentFrame.body.querySelector('.rvReplyInputBox textarea');
var rvBtnActive = widgetContentFrame.querySelector(".rvMessengerReplyInputUtilsButton");
textArea.removeEventListener("keydown", RvBotView.collectMessageKeyDownEvent);
textArea.removeEventListener("keyup", RvBotView.collectMessageKeyUpEvent);
rvBtnActive.removeEventListener("click", RvBotView.sendMessageBtnClick);
widgetContentFrame.body.querySelector('.rvReplyInputBox textarea').value = '';
if( RV_Current_Chat_Option === "SMS" ){
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", typingLoader);
widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
}else{
RvBotView.updateCurrentConversation(msg, "user");
if(typeof socket !== "undefined" && socket !== ""){
if(chatType == 'file'){
socket.emit("message", {
Conversation_Id: Conversation_Id,
customer_name: RV_Customer_Name,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
type: "user",
message: previewImg,
chatType: chatType,
fileFormat:fileFormat,
fileSize: fileSize,
createdDate: new Date(),
createdAt: new Date(),
bot_type: false
});
}else{
socket.emit("message", {
Conversation_Id: Conversation_Id,
customer_name: RV_Customer_Name,
Visitor_Chat_Id: Visitor_Chat_Id,
Website_Id: Website_Id,
message: msg,
type: "user",
createdDate: new Date(),
createdAt: new Date(),
bot_type: false
});
}
}
await RvBotView.getAgentForConversation();
// if( RVAgentOption == true ){
RvBotView.sendMessageEvent();
// }else{
// widgetContentFrame.querySelector('.rvReplyInputBox > textarea').setAttribute('disabled', 'disabled');
// widgetContentFrame.querySelector('.rvReplyInputBox .rvMessengerReplyInputUtilsButton').classList.add('disabled');
// }
}
let url = "/api/v1/updateLead/"+rvWebsiteId;
let data = `VisitorId=${rvGetCookies("VisitorId")}&Visitor_Chat_Id=${Visitor_Chat_Id}&Conversation_Id=${Conversation_Id}&message=${msg}&RV_RETURN_FORM=${RV_RETURN_FORM}&rv_agent_option=${RVAgentOption}&chat_option=${RV_Current_Chat_Option}`;
if( RV_Current_Chat_Option === "SMS" ){
data += `&phone=${RV_Customer_Phone}`
}
let res = await RvBotView.rvXmlRequest(url, data);
RV_RETURN_FORM = false;
if (res.status == true) {
if( RV_Current_Chat_Option !== "SMS" ){
RVClearNotification = true
RvBotView.addConnectionChatActivityMessage()
if( RVAgentOption == true ){
setTimeout(RvBotView.addNotificationMessage, notificationTiming);
}else{
setTimeout(RvBotView.addNotificationMessage, 100);
}
}else{
RvBotView.closeSMSConversation();
}
if (rvGetCookies("customer_id") == "" || rvGetCookies("customer_id") == null) {
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
if( typeof socket !== "undefined" && socket !== "" && RV_Current_Chat_Option !== "SMS" ){
socket.emit("new_user",{
Website_Id: res.Website_Id,
Visitor_Chat_Id: res.Visitor_Chat_Id,
bot_type: false
});
}
}
Conversation_Id = res.Conversation_Id;
Website_Id = res.Website_Id;
if(typeof socket !== "undefined" && socket !== ""){
socket.emit( "online", { Conversation_Id: Conversation_Id, Website_Id: Website_Id });
}
}
}
},
addNotificationMessage: async function () {
if (RVClearNotification) {
RVClearNotification = false;
let timeText = "back in";
let timeValue = RvBotView.getNextAvailableTime();
if (RVAgentOption) {
timeText = "reply ";
timeValue = "as soon as possible";
}
let msg = `
`;
RvBotView.removeTyping();
RV_MSG_BODY_HEIGHT.insertAdjacentHTML("beforebegin", rvMessage);
RvBotView.rvResetMsgScroll();
RvBotView.updateCurrentConversation(rvMessage, "bot");
await RvBotView.rvSendMessage(msg, "", "bot");
}
},
collectEmailEvent: async function(){
let emailDom = widgetContentFrame.body.querySelector('#email');
emailDom.addEventListener('keydown', function(e){
var email = this.value;
if( email == "" ){
e.target.parentNode.classList.add('form-error');
e.target.parentNode.querySelector('.form-feedback').innerHTML = "Please provide email";
return false;
}
if( !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) ){
e.target.parentNode.classList.add('form-error');
e.target.parentNode.querySelector('.form-feedback').innerHTML = "Please provide valid email";
return false;
}
e.target.parentNode.classList.remove('form-error');
e.target.parentNode.querySelector('.form-feedback').innerHTML = "";
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
if (!event.shiftKey) {
RvBotView.updateEmailLead(email);
}
}
});
let emailFormBtn = widgetContentFrame.body.querySelector('.rvCollectUserEmail');
emailFormBtn.addEventListener('click', function(e){
var email = widgetContentFrame.body.querySelector('#email').value;
if( email == "" ){
emailFormBtn.parentNode.parentNode.querySelector('.form-input').classList.add('form-error');
emailFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide email";
return false;
}
if( !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) ){
emailFormBtn.parentNode.parentNode.querySelector('.form-input').classList.add('form-error');
emailFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide valid email";
return false;
}
emailFormBtn.parentNode.parentNode.querySelector('.form-input').classList.remove('form-error');
emailFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "";
RvBotView.updateEmailLead(email);
})
},
collectPhoneEvent: async function(){
let phoneDom = widgetContentFrame.body.querySelector('#phone');
phoneDom.addEventListener('keyup', function(e){
var phone = phoneInput.getNumber();
if( phone == "" ){
e.target.parentNode.parentNode.classList.add('form-error');
e.target.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide phone number";
return false;
}
if( !/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/.test(phone) ){
e.target.parentNode.parentNode.classList.add('form-error');
e.target.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide valid phone number";
return false;
}
e.target.parentNode.parentNode.classList.remove('form-error');
e.target.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "";
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
if (!event.shiftKey) {
RvBotView.updatePhoneLead(phone);
}
}
});
let phoneFormBtn = widgetContentFrame.body.querySelector('.rvCollectUserPhone');
phoneFormBtn.addEventListener('click', function(e){
var phone = phoneInput.getNumber();
if( phone == "" ){
phoneFormBtn.parentNode.parentNode.querySelector('.form-input').classList.add('form-error');
phoneFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide phone";
return false;
}
if( !/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/.test(phone) ){
phoneFormBtn.parentNode.parentNode.querySelector('.form-input').classList.add('form-error');
phoneFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide valid phone";
return false;
}
phoneFormBtn.parentNode.parentNode.querySelector('.form-input').classList.remove('form-error');
phoneFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "";
RvBotView.updatePhoneLead(phone);
})
},
collectNameEvent: async function(){
let nameDom = widgetContentFrame.body.querySelector('#name');
nameDom.addEventListener('keydown', function(e){
var name = this.value;
if( name == "" ){
e.target.parentNode.classList.add('form-error');
e.target.parentNode.querySelector('.form-feedback').innerHTML = "Please provide name";
return false;
}
e.target.parentNode.classList.remove('form-error');
e.target.parentNode.querySelector('.form-feedback').innerHTML = "";
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
if (!event.shiftKey) {
RvBotView.updateNameLead(name);
}
}
});
let nameFormBtn = widgetContentFrame.body.querySelector('.rvCollectUserName');
nameFormBtn.addEventListener('click', function(e){
var name = widgetContentFrame.body.querySelector('#name').value;
if( name == "" ){
nameFormBtn.parentNode.parentNode.querySelector('.form-input').classList.add('form-error');
nameFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "Please provide name";
return false;
}
nameFormBtn.parentNode.parentNode.querySelector('.form-input').classList.remove('form-error');
nameFormBtn.parentNode.parentNode.querySelector('.form-feedback').innerHTML = "";
RvBotView.updateNameLead(name);
})
},
updatePhoneLead: async function(phone){
phone = phone.trim()
let initialLoader = widgetContentFrame.body.querySelector('.initialLoader');
if(initialLoader){
initialLoader.classList.add('loader');
initialLoader.classList.remove('initialLoader');
}
let url = "/api/v1/updateLead/"+rvWebsiteId;
let data = `VisitorId=${VisitorId}&Visitor_Chat_Id=${Visitor_Chat_Id}&Conversation_Id=${Conversation_Id}&phone=${phone}&rv_agent_option=${RVAgentOption}&chat_option=${RV_Current_Chat_Option}`;
let res = await RvBotView.rvXmlRequest(url, data);
if (res.status == true) {
let initialLoader = widgetContentFrame.body.querySelector('.loader');
if(initialLoader){
initialLoader.classList.remove('loader');
}
rvSetCookies(31, "rv_phone", res.phone);
RV_Customer_Phone = res.phone;
if (rvGetCookies("customer_id") == "" || rvGetCookies("customer_id") == null) {
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
Website_Id = res.Website_Id;
}
Conversation_Id = res.Conversation_Id;
let phoneDom = widgetContentFrame.body.querySelector('#phone');
if(phoneDom){
phoneDom.parentNode.parentNode.parentNode.innerHTML = phone;
if( RV_Current_Chat_Option !== "SMS" ){
let phoneMsg = `
`
RvBotView.removeTyping();
RvBotView.rvSendMessage(encodeURIComponent(phoneMsg), "", "user");
RvBotView.rvCollectMessage();
}else{
RvBotView.rvCollectSMSConsent()
}
}
}
},
updateEmailLead: async function(email){
let initialLoader = widgetContentFrame.body.querySelector('.initialLoader');
if(initialLoader){
initialLoader.classList.add('loader');
initialLoader.classList.remove('initialLoader');
}
let url = "/api/v1/updateLead/"+rvWebsiteId;
let data = `VisitorId=${VisitorId}&Visitor_Chat_Id=${Visitor_Chat_Id}&Conversation_Id=${Conversation_Id}&email=${email}&rv_agent_option=${RVAgentOption}`;
let res = await RvBotView.rvXmlRequest(url, data);
if (res.status == true) {
let initialLoader = widgetContentFrame.body.querySelector('.loader');
if(initialLoader){
initialLoader.classList.remove('loader');
}
rvSetCookies(31, "rv_email", res.email);
RV_Customer_Email = res.email;
if (rvGetCookies("customer_id") == "" || rvGetCookies("customer_id") == null) {
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
Conversation_Id = res.Conversation_Id;
Website_Id = res.Website_Id;
if(typeof socket !== "undefined" && socket !== ""){
socket.emit("new_user",{
Website_Id: res.Website_Id,
Visitor_Chat_Id: res.Visitor_Chat_Id,
bot_type: false
});
}
}
let emailDom = widgetContentFrame.body.querySelector('#email');
if(emailDom){
emailDom.parentNode.parentNode.innerHTML = email;
let emailMsg = `
`
RvBotView.removeTyping();
RvBotView.rvSendMessage(encodeURIComponent(emailMsg), "", "user");
RvBotView.rvCollectNameInformation();
}
if(typeof socket !== "undefined" && socket !== ""){
socket.emit( "online", { Conversation_Id: Conversation_Id, Website_Id: Website_Id });
}
}
},
updateNameLead: async function(name){
let initialLoader = widgetContentFrame.body.querySelector('.initialLoader');
initialLoader.classList.add('loader');
initialLoader.classList.remove('initialLoader');
let url = "/api/v1/updateLead/"+rvWebsiteId;
let data = `VisitorId=${rvGetCookies("VisitorId")}&Visitor_Chat_Id=${Visitor_Chat_Id}&Conversation_Id=${Conversation_Id}&name=${name}`;
let res = await RvBotView.rvXmlRequest(url, data);
if (res.status == true) {
let initialLoader = widgetContentFrame.body.querySelector('.loader');
initialLoader.classList.remove('loader');
rvSetCookies(31, "rv_name", name);
RV_Customer_Name = name;
if (rvGetCookies("customer_id") == "" || rvGetCookies("customer_id") == null) {
rvSetCookies(31, "customer_id", res.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.Website_Id);
Visitor_Chat_Id = res.Visitor_Chat_Id;
Conversation_Id = res.Conversation_Id;
Website_Id = res.Website_Id;
if( typeof socket !== "undefined" && socket !== "" ){
socket.emit("new_user",{
Website_Id: res.Website_Id,
Visitor_Chat_Id: res.Visitor_Chat_Id,
bot_type: false
});
}
}
let nameDom = widgetContentFrame.body.querySelector('#name');
nameDom.parentNode.parentNode.innerHTML = name;
let nameMsg = `
`
RvBotView.removeTyping();
RvBotView.rvSendMessage(encodeURIComponent(nameMsg), "", "user");
if(typeof socket !== "undefined" && socket !== ""){
socket.emit( "online", { Conversation_Id: Conversation_Id, Website_Id: Website_Id });
}
if( RVAgentOption && RV_Start_Live_Chat && Object.keys(RV_Departments).length > 0 ){
RvBotView.rvCollectDepartmentInformation();
}else{
if( ( RVAgentOption && !botsetting.Collect_Contact_Details_In && !rvGetCookies("rv_phone") ) || ( !RVAgentOption && !botsetting.Collect_Contact_Details_Out && !rvGetCookies("rv_phone") ) ){
RvBotView.rvCollectPhoneInformation();
}else{
RvBotView.rvCollectMessage();
}
}
}
},
removeTyping: function() {
var typingLoaderDom = widgetContentFrame.getElementById("typingLoader");
if (typingLoaderDom) {
typingLoaderDom.remove();
}
},
rvGetCurrentTime: function( argDate = "") {
var date;
if( argDate == "" ){
date = new Date();
}else{
date = new Date(argDate);
}
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? "PM" : "AM";
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? "0" + minutes : minutes;
var strTime = hours + ":" + minutes + " " + ampm;
return strTime;
},
rvConvertDateTime: function (val){
const today = new Date();
const endDate = new Date(val);
const days = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
const hours = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000 * 60 * 60) % 24);
const minutes = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000 * 60) % 60);
const seconds = parseInt(Math.abs(endDate.getTime() - today.getTime()) / (1000) % 60);
let date = "";
if (days > 0) {
date = days + " days ago";
} else if (hours > 0) {
date = hours + " hours ago";
} else if (minutes > 0) {
date = minutes + " minutes ago";
} else if (seconds > 0) {
date = seconds + " seconds ago";
}
return date;
},
rvEcUserNotify: async function(){
let url = "/api/v1/updateUserNotify";
let data = "Visitor_Chat_Id=" + Visitor_Chat_Id + "&Website_Id=" + Website_Id+ "&Conversation_Id=" + Conversation_Id;
let res = await RvBotView.rvXmlRequest(url, data);
if (res.status == true) {
msgRead = false
}
},
rvStripHtml: function(html){
let tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
},
destory: function(){
_paq.push(["deleteCookies"]);
rvDeleteCookies("rv_name")
rvDeleteCookies("rv_email")
rvDeleteCookies("rv_phone")
rvDeleteCookies("project_id")
rvDeleteCookies("customer_id")
rvDeleteCookies("VisitorId")
rvDeleteCookies("rvce_current_option")
rvDeleteCookies("rv_order_email")
rvDeleteCookies("rv_pre_chat_form")
rvDeleteCookies("sms_consent")
localStorage.removeItem('Conversation_Id')
if( divParent ){
divParent.remove()
}
if( document.getElementById('rvTrackingScript') ){
document.getElementById('rvTrackingScript').remove()
}
if( document.getElementById('rv-widget-script') ){
document.getElementById('rv-widget-script').remove()
}
window.RvBotView = null
},
updateUserInformation: async function(name, email){
RV_Customer_Name = name
RV_Customer_Email = email
rvSetCookies(31, "rv_name", name)
rvSetCookies(31, "rv_email", email)
rvSetCookies(31, 'rv_pre_chat_form', "true");
let url = "/api/v1/updateVisitorInfo";
let data = {VisitorId, Visitor_Chat_Id, RV_Customer_Name, RV_Customer_Email, rvWebsiteId}
let res = await RvBotView.rvXmlJsonRequest(url, data)
if( res.status === 'success' ){
if(res.data){
if( res.data.Visitor_Chat_Id ){
rvSetCookies(31, "customer_id", res.data.Visitor_Chat_Id);
rvSetCookies(31, "project_id", res.data.Website_Id);
Visitor_Chat_Id = res.data.Visitor_Chat_Id;
Website_Id = res.data.Website_Id;
}
}
}
}
}
function rotateRvEcSlide(currentElement, index) {
let parentNode = currentElement.parentNode;
let slideIndex = parentNode.getElementsByClassName('slideIndex')[0] ? parseInt(parentNode.getElementsByClassName('slideIndex')[0].value) : 1;
let currentSlideIndex = slideIndex + index
let currentSlideInner = parentNode.getElementsByClassName('rvecGalleryInnerContainer')[0];
let slides = currentSlideInner.children;
if (currentSlideIndex > slides.length) { currentSlideIndex = 1 }
if (currentSlideIndex < 1) { currentSlideIndex = slides.length }
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[currentSlideIndex - 1].style.display = "block";
if (parentNode.getElementsByClassName('slideIndex')[0]) {
parentNode.getElementsByClassName('slideIndex')[0].value = currentSlideIndex
}
}
function rvGetCookies(name) {
var rvCookieValue = null,
setcookies = document.cookie,
splitArr = setcookies.split(";");
for (var i = 0; i < splitArr.length; i++) {
var t = splitArr[i].split("=");
if (t.length && t.length >= 2) {
var k = t[0].trim(),
v = t[1].trim();
name == k && (rvCookieValue = v);
}
}
return rvCookieValue;
}
function rvSetCookies(rvDays, rvCookieName, rvCookieValue) {
var d = new Date();
d.setTime(d.getTime() + rvDays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = rvCookieName + "=" + rvCookieValue + ";" + expires;
}
function rvDeleteCookies(name) {
document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
function rvValidateEmail(email) {
var re = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(?!test)(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return re.test(email);
}
function rvValidatePhone(phone) {
var ph = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
return ph.test(phone);
}
// window.addEventListener("load", function () {
RvBotView.init();
// });
`,
customChatIcon = `
`,
chatCloseIcon = ``,
RV_Main_Footer = ``,
_paq = window._paq || [],
widgetFrame, chatToggleFrame, triggerFrame, notificationFrame, widgetContentFrame, toggleContentFrame, triggerContentFrame, notificationContentFrame, divParent, divWidget, divExitIntentPopup, divExitIntentClose, rvVideoWidgetDiv, rvVideoPlaybackDiv, rvVideoPlaybackFrame, rvVideoPlaybackContentFrame, calendlyRvHtml;
charsetMetaTag['content'] = 'text/html; charset=utf-8';
_paq.push(["setCustomVariable",1,"login-customerid",rvGetCookies("login-customerid"), "visit"]);
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
//_paq.push(["enableHeartBeatTimer", 30]);
var rvWebsiteId = window.rvwebsiteid;
(function () {
var u = RV_TRACKING_URL + '/api/v1/livetracking';
_paq.push(["setTrackerUrl", u]);
_paq.push(["setSiteId", rvWebsiteId]);
_paq.push(["setDocumentTitle", document.title]);
if( window.svwebsiteid ){
_paq.push(['addTracker', u, window.svwebsiteid]);
}
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.type = "text/javascript";
g.async = true;
g.defer = true;
g.id = "rvTrackingScript"
g.src = "https://storage.googleapis.com/rcassets/tracking.js";
s.parentNode.insertBefore(g, s);
var url = new URL(u);
var c = url.searchParams.get("c");
})();
_paq.push([
function () {
//Get the visitor info.
VisitorId = this.getVisitorId()
rvSetCookies(31, "VisitorId", this.getVisitorId());
},
]);
window.addEventListener('hashchange', function() {
RV_CURRENT_PAGE_URL = window.location.href
if( parseInt(Website_Id) === 113 || parseInt(Website_Id) === 210 ){
_paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
_paq.push(['setDocumentTitle', document.title]);
_paq.push(['trackPageView']);
}
});
var RvBotView = {
init: function(){
widgetFrame = RvBotView.createIframe("RoundView Bot", "rvecChatWidgetFrame");
chatToggleFrame = RvBotView.createIframe("RoundView Bot Toggle", "rvecChatToggleFrame");
triggerFrame = RvBotView.createIframe("RoundView Bot Trigger", "rvecChatTriggerFrame");
notificationFrame = RvBotView.createIframe("RoundView Bot Notification", "rvecNotificationFrame");
divParent = document.createElement("div");
divParent.id = "RVParentFrame";
divWidget = document.createElement("div");
divWidget.id = "RVWidgetFrame";
divWidget.style.display = "none";
divExitIntentPopup = document.createElement("div")
divExitIntentPopup.style.display = "none";
divExitIntentPopup.classList.add('rvExitIntentPopupWrapper')
divExitIntentClose = document.createElement("div")
divExitIntentClose.style.display = "none"
divExitIntentClose.classList.add('rvExitIntentPopupCloseWrapper');
document.body.appendChild(divParent);
divParent.appendChild(divWidget);
divParent.appendChild(divExitIntentPopup);
divParent.appendChild(divExitIntentClose)
divWidget.appendChild(widgetFrame);
widgetFrame.style.display = "block";
divParent.appendChild(chatToggleFrame);
divParent.appendChild(triggerFrame);
divParent.appendChild(notificationFrame);
if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { // DOM
widgetContentFrame = widgetFrame.contentDocument;
toggleContentFrame = chatToggleFrame.contentDocument;
triggerContentFrame = triggerFrame.contentDocument;
}else { // IE win
widgetContentFrame = widgetFrame.contentWindow.document;
toggleContentFrame = chatToggleFrame.contentWindow.document;
triggerContentFrame = triggerFrame.contentWindow.document;
}
RvBotView.checkProject(rvWebsiteId)
RvBotView.checkPermissions()
},
checkPermissions: function() {
if (!navigator.mediaDevices?.enumerateDevices) {
console.log("enumerateDevices() not supported.");
} else {
// List cameras and microphones.
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach((device) => {
if (device.kind === "videoinput") {
hasWebcam = true
} else if (device.kind === "audioinput") {
hasMicroPhone = true
}
});
}).catch((err) => {
console.error(`${err.name}: ${err.message}`);
});
}
navigator.permissions.query({ name: 'camera' }).then((result) => {
if (result.state === 'granted') {
hasCameraPermission = "granted"
} else if (result.state === 'prompt') {
hasCameraPermission = "prompt"
} else {
hasCameraPermission = "denied"
}
});
navigator.permissions.query({ name: 'microphone' }).then((result) => {
if (result.state === 'granted') {
hasMicroPhonePermission = "granted"
} else if (result.state === 'prompt') {
hasMicroPhonePermission = "prompt"
} else {
hasMicroPhonePermission = "denied"
}
});
},
getDeviceInfo: function(){
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach((device) => {
if (device.kind === "videoinput") {
if (selectedVideoDevice === "") {
selectedVideoDevice = device.label
}
if (typeof videoDeviceInput[device.label] === "undefined") {
videoDeviceInput[device.label] = device.deviceId
}
} else if (device.kind === "audioinput") {
if (selectedAudioDevice === "") {
selectedAudioDevice = device.label
}
if (typeof audioDeviceInput[device.label] === "undefined") {
audioDeviceInput[device.label] = device.deviceId
}
}
});
}).catch((err) => {
console.error(`${err.name}: ${err.message}`);
});
},
turnOnVideoCamera: function(){
let constraint = { audio: { echoCancellation: true }, video: true };
if (selectedAudioDevice !== "" && typeof audioDeviceInput[selectedAudioDevice] !== "undefined") {
constraint.audio.deviceId = { exact: audioDeviceInput[selectedAudioDevice] }
}
if (selectedVideoDevice !== "" && typeof videoDeviceInput[selectedVideoDevice] !== "undefined") {
constraint.video = { deviceId: { exact: videoDeviceInput[selectedVideoDevice] } }
}
const permissions = navigator.mediaDevices.getUserMedia(constraint)
permissions.then((stream) => {
RvBotView.getDeviceInfo()
hasCameraPermission = "granted";
hasMicroPhonePermission = "granted";
videoStream = stream
videoStreamRef.srcObject = stream
const audioContext = new AudioContext();
const audioSource = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 512;
analyser.minDecibels = -127;
analyser.maxDecibels = 0;
analyser.smoothingTimeConstant = 0.4;
audioSource.connect(analyser);
const volumes = new Uint8Array(analyser.frequencyBinCount);
const volumeCallback = () => {
analyser.getByteFrequencyData(volumes);
let volumeSum = 0;
for (const volume of volumes)
volumeSum += volume;
const averageVolume = volumeSum / volumes.length;
audioLevel = Math.round((averageVolume * 100 / 127) / 10)
if( rvVideoPlaybackContentFrame ){
if( rvVideoPlaybackContentFrame.body.querySelector('.audioTestContainerWrapper') ){
let audioTestInnerWrap = rvVideoPlaybackContentFrame.body.querySelector('.audioTestContainerWrapper').querySelectorAll('.audioTestInnerWrap')
if( audioTestInnerWrap ){
let audioTestInnerActive = rvVideoPlaybackContentFrame.body.querySelector('.audioTestContainerWrapper').querySelectorAll('.audioTestInnerWrap.activeVolume')
audioTestInnerActive.forEach(el => el.classList.remove('activeVolume'))
for( let i = 0; i < audioLevel; i++ ){
audioTestInnerWrap[i].classList.add('activeVolume')
}
}
}else{
clearInterval(volumeInterval)
}
}else{
clearInterval(volumeInterval)
}
};
volumeInterval = setInterval(volumeCallback, 100);
}).catch((err) => {
if (hasCameraPermission === "prompt") {
hasCameraPermission = "denied";
}
if (hasMicroPhonePermission === "prompt") {
hasMicroPhonePermission = "denied";
}
RvBotView.permissionError("video")
});
},
turnOnAudioMicroPhone: function(){
let constraint = { audio: { echoCancellation: true } };
if (selectedAudioDevice !== "" && typeof audioDeviceInput[selectedAudioDevice] !== "undefined") {
constraint.audio.deviceId = { exact: audioDeviceInput[selectedAudioDevice] }
}
const permissions = navigator.mediaDevices.getUserMedia(constraint)
permissions.then((stream) => {
RvBotView.getDeviceInfo()
hasMicroPhonePermission = "granted";
videoStream = stream
const audioContext = new AudioContext();
const audioSource = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 512;
analyser.minDecibels = -127;
analyser.maxDecibels = 0;
analyser.smoothingTimeConstant = 0.4;
audioSource.connect(analyser);
var bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
var canvas = rvVideoPlaybackContentFrame.body.querySelector('.audioRecorderStream'),
WIDTH = canvas.width,
HEIGHT = canvas.height,
ctx = canvas.getContext("2d"),
barWidth = (WIDTH / bufferLength) * 2.5,
x = 0,
barHeight;
const renderFrame = () => {
requestAnimationFrame(renderFrame);
x = 0;
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
var r = barHeight + (25 * (i/bufferLength)),
g = 250 * (i/bufferLength),
b = 50;
barHeight += 70;
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
renderFrame();
}).catch((err) => {
if (hasMicroPhonePermission === "prompt") {
hasMicroPhonePermission = "denied";
}
RvBotView.permissionError("audio")
});
},
flipedVideoStream: function(stream){
const canvas = document.createElement("canvas");
Object.assign(canvas, { width: 0, height: 0 });
const ctx = canvas.getContext("2d");
const track = stream.getVideoTracks()[0];
const drawOnCanvas = (image, width, height) => {
// MediaStream's video size may change over time
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
ctx.setTransform(-1, 0, 0, 1, width, 0);
}
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0);
};
// the MediaStreamTrackProcessor API is available, we use it
if (window.MediaStreamTrackProcessor) {
const processor = new window.MediaStreamTrackProcessor(track);
const reader = processor.readable.getReader();
reader.read().then(function readChunk({ done, value }) {
if (typeof value !== "undefined") {
const { displayWidth, displayHeight } = value;
drawOnCanvas(value, displayWidth, displayHeight);
value.close(); // close the VideoFrame when we're done with it
}
if (!done) {
reader.read().then(readChunk);
}
});
} else {
const vid = document.createElement("video");
vid.srcObject = stream;
// in case requestVideoFrameCallback is available, we use it
// otherwise we fallback on rAF
const scheduler = vid.requestVideoFrameCallback ?
(cb) => vid.requestVideoFrameCallback(cb) : requestAnimationFrame;
const draw = () => {
const { videoWidth, videoHeight } = vid;
drawOnCanvas(vid, videoWidth, videoHeight);
scheduler(draw);
};
vid.play().then(draw);
}
var canvaStream = canvas.captureStream()
var audioTrack = stream.getTracks().filter(function (track) {
return track.kind === 'audio'
})[0];
canvaStream.addTrack(audioTrack);
return canvaStream;
},
turnOffVideoCamera: function(){
if (videoStream) {
const tracks = videoStream.getTracks();
tracks.forEach(track => track.stop())
}
if (volumeInterval) {
clearInterval(volumeInterval)
volumeInterval = null
}
},
turnOffAudioMicrophone: function(){
if (videoStream) {
const tracks = videoStream.getTracks();
tracks.forEach(track => track.stop())
}
},
changeVideoInputOption: function(deviceLabel){
if (selectedVideoDevice !== deviceLabel) {
selectedVideoDevice = deviceLabel
if( rvVideoPlaybackContentFrame && rvVideoPlaybackContentFrame.body.querySelector('.videoInputOptionWrap') ){
rvVideoPlaybackContentFrame.body.querySelector('.videoInputOptionWrap').remove()
}
RvBotView.turnOffVideoCamera()
RvBotView.turnOnVideoCamera()
}
},
changeAudioOption: function(deviceLabel){
if (selectedAudioDevice !== deviceLabel) {
selectedAudioDevice = deviceLabel
if( rvVideoPlaybackContentFrame && rvVideoPlaybackContentFrame.body.querySelector('.audioInputOptionWrap') ){
rvVideoPlaybackContentFrame.body.querySelector('.audioInputOptionWrap').remove()
}
if( !audioRecordingFlag ){
RvBotView.turnOffVideoCamera()
RvBotView.turnOnVideoCamera()
}else{
RvBotView.turnOffAudioMicrophone();
RvBotView.turnOnAudioMicroPhone();
}
}
},
startStopRecording: function(e){
e.stopPropagation()
if (!recordingFlag) {
recordingFlag = true
recordCounter = 3
let videoTopOptionWrapper = rvVideoPlaybackContentFrame.body.querySelector('.videoTopOptionWrapper')
if( videoTopOptionWrapper ){
if( volumeInterval ){
clearInterval(volumeInterval)
}
videoTopOptionWrapper.remove()
}
let videoRecorderCounter = rvVideoPlaybackContentFrame.body.querySelector('.videoRecorderCounter')
let originalParentDiv = e.target.closest('.videoRecordOptionWrapper')
originalParentDiv.innerHTML = ``
if( videoRecorderCounter ){
videoRecorderCounter.style.display = "grid"
videoRecorderCounter.querySelector('.counterText').innerHTML = recordCounter
}
clearIntervalRecording = setInterval(RvBotView.intervalRecording, 1000)
} else {
mediaRecorder.stop()
videoRecordMutedFlag = true
videoStreamRef.muted = !videoStreamRef.muted
}
},
startStopAudioRecording: function(e){
e.stopPropagation()
if (!recordingFlag) {
recordingFlag = true
recordCounter = 3
let audioTopOptionWrapper = rvVideoPlaybackContentFrame.body.querySelector('.audioTopOptionWrapper')
if( audioTopOptionWrapper ){
audioTopOptionWrapper.remove()
}
let audioRecorderCounter = rvVideoPlaybackContentFrame.body.querySelector('.audioRecorderCounter')
let originalParentDiv = e.target.closest('.audioRecordOptionWrapper')
originalParentDiv.innerHTML = ``
if( audioRecorderCounter ){
audioRecorderCounter.style.display = "grid"
audioRecorderCounter.querySelector('.counterText').innerHTML = recordCounter
}
clearIntervalRecording = setInterval(RvBotView.intervalRecording, 1000)
} else {
mediaRecorder.stop()
videoRecordMutedFlag = true
}
},
secondsToHourFunction: function(){
const result = new Date(videoRecordTimer * 1000).toISOString().slice(11, 19);
return result
},
intervalRecording: function(){
if (recordCounter <= 1) {
clearInterval(clearIntervalRecording)
if( !audioRecordingFlag ){
RvBotView.startStoreRecording()
}else{
RvBotView.startStoreAudioRecording()
}
let videoRecorderCounter = ""
if( audioRecordingFlag ){
videoRecorderCounter = rvVideoPlaybackContentFrame.body.querySelector('.audioRecorderCounter')
}else{
videoRecorderCounter = rvVideoPlaybackContentFrame.body.querySelector('.videoRecorderCounter')
}
if( videoRecorderCounter ){
videoRecorderCounter.style.display = "none"
}
videoRecordTimer = 0
let videoRecordTimerHtml = `
';
}
Website_Type = res.Website_Type
userId = res.User_Id
rvSetCookies(31, "project_id", Website_Id);
botsetting = res.botsetting;
websiteURL = res.website_url;
if( typeof botsetting.Enable_Custom_Branding !== "undefined" && botsetting.Enable_Custom_Branding ){
RV_Main_Footer = ``;
}
let userDetails = res.getAllUser;
RV_ORDER_STATUS = res.orderStatusFlag;
RV_Departments = res.departments;
Forms = res.Forms;
RV_SMS_Options = res.smsOption;
surveyForms = res.surveyForms
FormFields = res.formFields
if(FormFields.length > 0 ){
formFieldIds = FormFields.map(obj => obj.Form_Field_Id);
}
for( let i = 0; i < userDetails.length; i++ ){
AgentDetails[userDetails[i].userId] = {"firstName": userDetails[i].firstName, "lastName": userDetails[i].lastName, "email": userDetails[i].email, "dp": userDetails[i].profilePicture, "Online_Status": userDetails[i].Online_Status}
}
RV_Back_Button = ``
let timeZone = botsetting.Bot_Agent_TimeZone ? botsetting.Bot_Agent_TimeZone : "America/Detroit";
let agentTime = RvBotView.rvConvertTZ(new Date(), timeZone);
let agentDay = agentTime.getDay() - 1;
let agentHour = agentTime.getHours();
let agentMinutes = agentTime.getMinutes();
if(botsetting.Agent_Online_status != null && !botsetting.Agent_Online_status ){
RVAgentOption = false
RV_BTN_TEXT = "Leave us a message";
}else{
if(botsetting.Bot_Agent_Office_Hours){
RV_BOT_AGENT_OFFICE = botsetting.Bot_Agent_Office_Hours
while( typeof RV_BOT_AGENT_OFFICE != "object"){
RV_BOT_AGENT_OFFICE = JSON.parse(RV_BOT_AGENT_OFFICE);
}
let botAgentOfficeHours = RV_BOT_AGENT_OFFICE;
if( agentDay < 0 ){
agentDay = 6;
}
if( botAgentOfficeHours.length > 0 ){
let currentDaySetting = botAgentOfficeHours[agentDay];
let fromArray = currentDaySetting.fromHour.split(" ");
let toArray = currentDaySetting.toHour.split(" ");
let startHour = startMin = endHour = endMin = 0;
if( fromArray.length > 0 && fromArray[1] == "AM" ){
if( parseInt(fromArray[0]) == 12 ){
startHour = 0
}else{
startHour = parseInt(fromArray[0]);
}
}else if( fromArray[1] == "PM" ){
if( parseInt(fromArray[0]) == 12 ){
startHour = 12
}else{
startHour = parseInt(fromArray[0]) + 12;
}
}
if( toArray.length > 0 && toArray[1] == "AM" ){
if( parseInt(toArray[0]) == 12 ){
endHour = 0
}else{
endHour = parseInt(toArray[0]);
}
}else if( toArray[1] == "PM" ){
if( parseInt(toArray[0]) == 12 ){
endHour = 12
}else{
endHour = parseInt(toArray[0]) + 12;
}
}
startMin = parseInt(currentDaySetting.fromMin);
endMin = parseInt(currentDaySetting.toMin);
if( agentHour >= startHour && agentHour <= endHour ){
if( agentHour == endHour ){
if( agentMinutes <= endMin ){
RVAgentOption = true
}else{
RVAgentOption = false
RV_BTN_TEXT = "Leave us a message"
}
}else if(agentHour == startHour){
if( agentMinutes >= startMin ){
RVAgentOption = true
}else{
RVAgentOption = false
RV_BTN_TEXT = "Leave us a message"
}
}else{
RVAgentOption = true
}
}else{
RVAgentOption = false
RV_BTN_TEXT = "Leave us a message"
}
}
}
}
if (rvGetCookies("project_id") && rvGetCookies("customer_id")) {
RvBotView.rvGetAllMessages();
}
if( RVAgentOption ){
notificationTiming = 180000
}
await RvBotView.getChatTrigger();
RvBotView.rvLoadWidgetHTMLAndFunc(res);
//RvBotView.getPageVideo();
//RvBotView.getExitIntentPopup();
RvBotView.getRuleEngine();
RvBotView.getFullArticle();
RvBotView.getUserOrderDetails();
if( res.Website_Type && res.Website_Type.toLowerCase() === "shopify" ){
RvBotView.shopifyCartUpdate();
}else if( res.Website_Type && res.Website_Type.toLowerCase() === "bigcommerce" ){
RvBotView.bigcommerceCartUpdate();
}
}else{
widgetFrame.remove();
triggerFrame.remove();
chatToggleFrame.remove();
notificationFrame.remove();
}
},
bigcommerceCartUpdate: async function(){
if( BigCommerce_Cart_Id !== "" ){
let cartData = `Visitor_Chat_Id=${Visitor_Chat_Id}&Website_Id=${Website_Id}&RV_Customer_Name=${RV_Customer_Name}&RV_Customer_Email=${RV_Customer_Email}&Visitor_Id=${VisitorId}&BigCommerce_Cart_Id=${BigCommerce_Cart_Id}`
let url = "/api/v1/updateCartDetails"
RvBotView.rvXmlRequest(url, cartData);
}
RvBotView.listenLocalStorageChange(RvBotView.checkingCartLocalStorage, 100);
},
shopifyCartUpdate: async function(){
if( Shopify_Cart_Id !== "" ){
let cartData = `Visitor_Chat_Id=${Visitor_Chat_Id}&Website_Id=${Website_Id}&RV_Customer_Name=${RV_Customer_Name}&RV_Customer_Email=${RV_Customer_Email}&Visitor_Id=${VisitorId}&Shopify_Cart_Id=${Shopify_Cart_Id}`
let url = "/api/v1/updateCartDetails"
RvBotView.rvXmlRequest(url, cartData);
}else{
RvBotView.listenCookieChange(RvBotView.checkingCartCookie, 100)
}
},
checkingCartCookie: function( cookie ){
if( rvGetCookies('cart') ){
clearInterval(shopifyClearInterval);
Shopify_Cart_Id = rvGetCookies('cart')
RvBotView.shopifyCartUpdate()
}
},
checkingCartLocalStorage: function( quantity ){
fetch('/api/storefront/cart', {
credentials: 'include'
}).then(function(response) {
return response.json();
}).then(function(myJson) {
if( myJson.length > 0 ){
rvSetCookies(31, "rv_cart_id", myJson[0].id);
BigCommerce_Cart_Id = myJson[0].id;
RvBotView.bigcommerceCartUpdate()
//clearInterval(bigCommerceClearInterval);
}
});
},
listenLocalStorageChange: function(callback, interval = 1000) {
bigCommerceClearInterval = setInterval(()=> {
if( typeof localStorage.getItem('cart-quantity') !== "undefined" && localStorage.getItem('cart-quantity') > 0 && BigCommerce_Cart_Id === "" && !BigCommerce_Cart_Flag ){
BigCommerce_Cart_Flag = true
callback(localStorage.getItem('cart-quantity'))
}else if ( typeof localStorage.getItem('cart-quantity') === "undefined" || ( typeof localStorage.getItem('cart-quantity') !== "undefined" && localStorage.getItem('cart-quantity') == 0 ) ) {
BigCommerce_Cart_Id = ""
BigCommerce_Cart_Flag = false
rvDeleteCookies("rv_cart_id")
}
}, interval);
},
listenCookieChange: function(callback, interval = 1000) {
let lastCookie = document.cookie;
shopifyClearInterval = setInterval(()=> {
let cookie = document.cookie;
if (cookie !== lastCookie) {
try {
callback(cookie);
} finally {
lastCookie = cookie;
}
}
}, interval);
},
getUserOrderDetails: async function(){
if( RV_EMAIL_PHONE != "" && RV_ORDER_STATUS ){
let url = "/api/v1/getCustomerAllOrdersByEmail"
let data = `order_email=${RV_EMAIL_PHONE}&Website_Id=${Website_Id}`
let res = await RvBotView.rvXmlRequest(url, data, 4);
if( res.status == "success" ){
rvSetCookies(31, "rv_order_email", RV_EMAIL_PHONE);
RV_CUSTOMER_ORDER = res.data.orders;
RV_ORDER_EMAIL = typeof res.data.orders[0].email !== "undefined" ? res.data.orders[0].email : "";
}else if(res.status == "failure" || res.status == "application_error" ){
rvDeleteCookies("rv_order_email");
RV_CUSTOMER_ORDER = [];
RV_EMAIL_PHONE = "";
RV_ORDER_EMAIL = "";
}
}
},
getNextAvailableTime: function(){
let timeZone = botsetting.Bot_Agent_TimeZone ? botsetting.Bot_Agent_TimeZone : "America/Detroit";
let agentTime = RvBotView.rvConvertTZ(new Date(), timeZone);
let agentDay = agentTime.getDay() - 1;
let agentHour = agentTime.getHours();
let agentMinutes = agentTime.getMinutes();
if(botsetting.Bot_Agent_Office_Hours){
let botAgentOfficeHours = RV_BOT_AGENT_OFFICE;
if( agentDay < 0 ){
agentDay = 6;
}
if( botAgentOfficeHours.length > 0 ){
let currentDaySetting = botAgentOfficeHours[agentDay];
let fromArray = currentDaySetting.fromHour.split(" ");
let toArray = currentDaySetting.toHour.split(" ");
let startHour = startMin = endHour = endMin = 0;
if( fromArray.length > 0 && fromArray[1] == "AM" ){
if( parseInt(fromArray[0]) == 12 ){
startHour = 0
}else{
startHour = parseInt(fromArray[0]);
}
}else if( fromArray[1] == "PM" ){
if( parseInt(fromArray[0]) == 12 ){
startHour = 12
}else{
startHour = parseInt(fromArray[0]) + 12;
}
}
if( toArray.length > 0 && toArray[1] == "AM" ){
if( parseInt(toArray[0]) == 12 ){
endHour = 0
}else{
endHour = parseInt(toArray[0]);
}
}else if( toArray[1] == "PM" ){
if( parseInt(toArray[0]) == 12 ){
endHour = 12
}else{
endHour = parseInt(toArray[0]) + 12;
}
}
startMin = parseInt(currentDaySetting.fromMin);
endMin = parseInt(currentDaySetting.toMin);
if( agentHour >= startHour && agentHour <= endHour ){
if( agentHour == endHour ){
if( agentMinutes <= endMin ){
return "Online"
}
}else if(agentHour == startHour){
if( agentMinutes >= startMin ){
return "Online"
}
}else{
return "Online"
}
}
if( agentHour < startHour ){
let remainHour = startHour - agentHour;
return remainHour+" Hours";
}else if( agentHour > endHour ){
if( agentDay == 6 ){
agentDay = -1;
}
let currentDaySetting = botAgentOfficeHours[agentDay+1];
let from1Array = currentDaySetting.fromHour.split(" ");
let to1Array = currentDaySetting.toHour.split(" ");
if( from1Array.length > 0 && from1Array[1] == "AM" ){
if( parseInt(from1Array[0]) == 12 ){
start1Hour = 0
}else{
start1Hour = parseInt(fromArray[0]);
}
}else if( from1Array[1] == "PM" ){
if( parseInt(from1Array[0]) == 12 ){
start1Hour = 12
}else{
start1Hour = parseInt(from1Array[0]) + 12;
}
}
if( to1Array.length > 0 && to1Array[1] == "AM" ){
if( parseInt(to1Array[0]) == 12 ){
end1Hour = 0
}else{
end1Hour = parseInt(to1Array[0]);
}
}else if( to1Array[1] == "PM" ){
if( parseInt(to1Array[0]) == 12 ){
end1Hour = 12
}else{
end1Hour = parseInt(to1Array[0]) + 12;
}
}
start1Min = parseInt(currentDaySetting.fromMin);
end1Min = parseInt(currentDaySetting.toMin);
if( start1Hour < endHour || ( start1Hour == end1Hour && start1Min < end1Min ) ){
let remainHour = 24 - agentHour + start1Hour;
return remainHour+ " Hours";
}else {
return "a Day";
}
}
}else{
return "a Day"
}
}else{
return botsetting.Bot_Agent_Reply_Time ? botsetting.Bot_Agent_Reply_Time : "a day";
}
},
getFullArticle: async function(){
let url = "/api/v1/getCollectionsbyWebsiteId";
let data = `Website_Id=${Website_Id}`;
let res = await RvBotView.rvXmlRequest(url, data);
if( res.status == "success" ){
RV_Collection_Article = res.data.getCollectionslist;
}
},
getPageVideo: async function(){
let sessionStorageName = "rv-hide-video-widget"
let oldStorageItem = sessionStorage.getItem(sessionStorageName) ? sessionStorage.getItem(sessionStorageName) : "";
let url = "/api/v1/getPageVideo";
let data = `Website_Id=${Website_Id}&email=${RV_Customer_Email}¤t_page_url=${RV_CURRENT_PAGE_URL}&VisitorId=${VisitorId}&Video_Ids=${oldStorageItem}`;
let res = await RvBotView.rvXmlRequest(url, data);
if( res.status === 'success' ){
if( res.data ){
websiteVideo = res.data.website_video
currentVideoPart = 0
RvBotView.showVideoWidget()
}
}
},
replaceVideoWidgetWithChat: async function(){
if( rvVideoWidgetDiv ){
rvVideoWidgetDiv.style.opacity = 0
if( botsetting.Bot_Agent_Position === "Right" ){
rvVideoWidgetDiv.style.right = "-250px";
}else{
rvVideoWidgetDiv.style.left = "-250px";
}
setTimeout(function(){
rvVideoWidgetDiv.style.display = "none"
chatToggleFrame.style.display = "block"
},600)
}
},
showVideoWidget: async function(){
if( !localStorage.getItem("Conversation_Id") && websiteVideo.length > 0 && typeof websiteVideo[currentVideoPart].Video_Url !== "undefined" && websiteVideo[currentVideoPart].Video_Url !== "" && websiteVideo[currentVideoPart].Video_Url !== null ){
divWidget.style.display = "none"
chatToggleFrame.style.display = "none"
triggerFrame.remove()
notificationFrame.style.display = "none"
// Video Playback Div
rvVideoPlaybackDiv = document.createElement("div")
rvVideoPlaybackDiv.id = "rvVideoPlaybackDiv"
rvVideoPlaybackDiv.style.display = "none"
rvVideoPlaybackDiv.classList.add(botsetting.Bot_Agent_Position)
divParent.appendChild(rvVideoPlaybackDiv)
let rvVideoPlaybackCloseDiv = document.createElement("div")
rvVideoPlaybackCloseDiv.id = "rvVideoPlaybackCloseDiv"
rvVideoPlaybackDiv.appendChild(rvVideoPlaybackCloseDiv)
rvVideoPlaybackCloseDiv.innerHTML = ``
let rvVideoPlaybackOuterDiv = document.createElement("div")
rvVideoPlaybackOuterDiv.id = "rvVideoPlaybackOuterDiv"
rvVideoPlaybackDiv.appendChild(rvVideoPlaybackOuterDiv)
rvVideoPlaybackFrame = RvBotView.createIframe("RoundView Bot", "rvecVideoPlaybackFrame");
rvVideoPlaybackOuterDiv.appendChild(rvVideoPlaybackFrame);
if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { // DOM
rvVideoPlaybackContentFrame = rvVideoPlaybackFrame.contentDocument;
}else { // IE win
rvVideoPlaybackContentFrame = rvVideoPlaybackFrame.contentWindow.document;
}
rvVideoPlaybackFrame.allow = "autoplay *; clipboard-write *;camera *; microphone *; encrypted-media *; fullscreen *; display-capture *;"
rvVideoPlaybackFrame.removeAttribute('style')
var videoCssStyle = document.createElement('style')
videoCssStyle.innerText = RvBotView.videoPlayerCssFile();
rvVideoPlaybackContentFrame.head.appendChild(videoCssStyle);
var rvPlayerMainContainer = document.createElement('div')
rvPlayerMainContainer.id = "rvPlayerMainContainer"
var rvPlayerWrapper = document.createElement('div')
rvPlayerWrapper.id = "rvPlayerWrapper"
rvPlayerWrapper.classList.add("rvPlayerWrapper");
rvPlayerWrapper.classList.add("rvPlayerMobileWrapper");
rvPlayerWrapper.classList.add('rvExitVisibiltyTransition')
rvPlayerMainContainer.appendChild(rvPlayerWrapper);
rvPlayerWrapper.innerHTML = `