Untitled
unknown
javascript
2 years ago
10 kB
10
Indexable
jQuery(document).ready(function($){
// create a new variable for a pop chat sound to be used below
var pop;
pop = new Audio('/wp-content/plugins/punch-chatbot/assets/media/pop.mp3');
// wait for the users first click and then play a pop sound to attract interest in the chatbot - trigger it only once
document.addEventListener('click', function(){
pop.play();
}, {once : true});
// hide the popup message on click
$('.punch-chatbot-icon-message__close').click(function(){
$('.punch-chatbot-icon-message').hide();
// register the click in the db for reporting - 3 is Chatbot Prompt Refused
var data = {'action': 'punch_chatbot_ajax','chatbot_action': 3};
$.post('wp-admin/admin-ajax.php', data, function(response) {
console.log(response);
});
});
// open the settings on click
$('.punch-chatbot-holder__header__settings').click(function(){
if($('.punch-chatbot-holder__header__settings__content').hasClass('active')){
$('.punch-chatbot-holder__header__settings__content').removeClass('active');
} else {
$('.punch-chatbot-holder__header__settings__content').addClass('active');
}
});
// set the chatbot body for appending and internal scrolling below
var chatbot_body = $('.punch-chatbot-holder__body');
// loop through each result as we now have an option for going back to the start on the final results
$('.punch-chatbot-holder__message.result').each(function(){
// get the result back link
var backLink = $('.result_link.back_link', this).data('next');
// register a click of this
$('.result_link.back_link', this).click(function(){
// do the date stuff for the message time/date update
var currentDate = new Date();
var month = currentDate.getMonth()+1;
if (month < 10) { month = "0" + month;}
var minutes = currentDate.getMinutes();
if (minutes < 10) { minutes = "0" + minutes;}
var time = currentDate.getHours() + ":" + minutes;
var ampm = currentDate.getHours() >= 12 ? 'pm' : 'am';
var dayString = currentDate.getDate() + '/' + month + '/' + currentDate.getFullYear();
// add a delay to make it look like its thinking about whats happening
setTimeout(function(){
// loop through each question and get the 1st one so we can start the journey again
$('.punch-chatbot-holder__message.question').each(function(){
questionNext = $(this).data('question-id');
var current = $(this);
// allow clicking of the buttons on the questions again as we are restarting
current.find('button').prop('disabled', false);
current.find('.cbButton').attr("disabled", false);
if(questionNext == backLink){
$('.date', this).html(dayString + " " + time + ampm);
$(this).addClass('active');
// append the first question back to the bottom of the chatbot and scroll to this
chatbot_body.append($(this));
chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
// play a funky sound
pop.play();
}
});
}, 2000);
});
});
// loop through each question and set the answer on select
$('.punch-chatbot-holder__message.question').each(function(){
var question = $(this).data('question-id');
var current = $(this);
// used below to set the next question
var questionNext;
// show the first question on load
if(question == 1){
$(this).show();
}
// record a click of the button options below each question
$('button', current).each(function(){
var button = $(this);
$(button).click(function(){
// use selection as some questions have more than 1 result so this helps to identify which we need
var selection = $(this).data('selection');
// get the next question id if set
var next = $(this).data('next');
// get the result id if set
var result = $(this).data('result');
// date stuff used below for getting message time making it look like a real chat
var currentDate = new Date();
var month = currentDate.getMonth()+1;
if (month < 10) { month = "0" + month;}
var minutes = currentDate.getMinutes();
if (minutes < 10) { minutes = "0" + minutes;}
var time = currentDate.getHours() + ":" + minutes;
var ampm = currentDate.getHours() >= 12 ? 'pm' : 'am';
var dayString = currentDate.getDate() + '/' + month + '/' + currentDate.getFullYear();
// find the answer and show it for this question, fill the answer with the selection
$('.punch-chatbot-holder__message.answer').each(function(){
var answer = $(this).data('question-id');
// disable button clicks on the above question so they cant mess up the journey
current.find('button').prop('disabled', true);
current.find('.cbButton').attr("disabled", "disabled");
// show the answer given
if(answer == question){
$(this).addClass('active');
$(this).find('.answer.chat_response_holder').html(selection);
chatbot_body.append($(this));
chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
$('.date', this).html(dayString + " " + time + ampm);
}
});
// add a delay to make it look like its thinking about whats happening
setTimeout(function(){
// load the next question only
if(next){
$('.punch-chatbot-holder__message.question').each(function(){
questionNext = $(this).data('question-id');
// show the next question based on the given data next id
if(questionNext == next){
$('.date', this).html(dayString + " " + time + ampm);
// allow button clicks on the next question
$(this).find('button').prop('disabled', false);
$(this).find('.cbButton').attr("disabled", false);
$(this).addClass('active');
chatbot_body.append($(this));
chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
pop.play();
}
});
}
// if we are showing a result instead of another question
if(result){
$('.punch-chatbot-holder__message.result').each(function(){
questionNext = $(this).data('question-id');
resultSelection = $(this).data('selection');
// get the correct result as mentioned above some question id's have 2-3 results
if(questionNext == result && resultSelection == selection){
$('.date', this).html(dayString + " " + time + ampm);
$(this).addClass('active');
chatbot_body.append($(this));
chatbot_body.animate({scrollTop: chatbot_body.prop("scrollHeight")}, 500);
pop.play();
}
});
}
}, 2000);
});
});
});
// wait 3 seconds then add the cta message to attract interest
setTimeout(function(){
if($('.punch-chatbot-holder').is(":hidden")){
$('.punch-chatbot-icon-message').addClass('active');
}
}, 3000);
// hide message on click of the chat and show the chat
$('.punch-chatbot-icon').click(function(){
$('.punch-chatbot-icon-message').hide();
$('.punch-chatbot-icon').hide();
$('.punch-chatbot-holder').addClass('active');
// register the click in the db for reporting - 1 is Chatbot Clicked
var data = {'action': 'punch_chatbot_ajax','chatbot_action': 1};
$.post('wp-admin/admin-ajax.php', data, function(response) {
console.log(response);
});
});
// close the chat on click and just keep the icon to not annoy users
$('.punch-chatbot-holder__header__close').click(function(){
$('.punch-chatbot-icon-message').hide();
$('.punch-chatbot-icon').show();
$('.punch-chatbot-holder').removeClass('active');
// register the click in the db for reporting - 2 is Chatbot Closed
var data = {'action': 'punch_chatbot_ajax','chatbot_action': 2};
$.post('wp-admin/admin-ajax.php', data, function(response) {
console.log(response);
});
});
// download the chat transcript to a txt file
function downloadDiv(filename, element, mimeType) {
var elementHtml = document.getElementsByClassName(element)[0].innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elementHtml));
link.click();
}
// create the file
var fileName = 'punch-chatbot-transcript.txt';
//click action to download the div contents
$('.download-chat-transcript').click(function(){
downloadDiv(fileName, 'punch-chatbot-holder__body','text/html');
});
});Editor is loading...
Leave a Comment