function TextWidget() {
this.serverURL = '';
this.useEmailField = false;
this.locationId = '';
this.heading = '';
this.subHeading = '';
this.countryCode = 'US'; // Fallback for country code
this.nameField = function() {
return [
'
',
' ',
' ',
'
',
];
};
this.phoneField = function() {
return [
' ',
' ',
' ',
'
',
];
};
this.emailField = function() {
return [
' ',
' ',
' ',
'
',
];
};
this.template = function() {
return [
' ',
'
',
'
',
'
',
'
',
'
',
'
' + this.getHeading() + '
',
'
' + this.getSubHeading() + '
',
'
',
'
',
'
',
'
By submitting you agree to receive SMS or e-mails for the provided channel. ',
' Rates may be applied.
',
'
',
'
',
'
',
'
Thank You!
',
'
One of our representatives will contact you shortly.
',
'
',
'
😊
',
'
',
' ',
'
',
'
',
'
',
'
',
'
',
];
};
}
TextWidget.prototype.getHeading = function() {
return this.heading || "Have a question?";
};
TextWidget.prototype.getSubHeading = function() {
return this.subHeading || 'Enter your question below and a representative will get right back to you.';
};
TextWidget.prototype.bindClickHandler = function() {
var _self = this;
msgsndrjQuery(function() {
msgsndrjQuery(document).on('click', '#hl_text-widget--btn', function() {
var _this = msgsndrjQuery(this);
var _box = msgsndrjQuery('#hl_text-widget--box');
_this.toggleClass('active');
_box.fadeToggle(300);
_box.toggleClass('active');
_this.find('.widget-open-icon').toggleClass('active');
_this.find('.widget-close-icon').toggleClass('active');
});
msgsndrjQuery(document).on('submit', '#msgsndr_message-form', function(e) {
e.preventDefault();
var name = msgsndrjQuery('#msgsndr_name').val();
var email = msgsndrjQuery('#msgsndr_email').val() || '';
let phone = msgsndrjQuery('#msgsndr_phone').val()
var message = msgsndrjQuery('#msgsndr_message').val();
_self.createCookie('phone', phone);
_self.createCookie('name', name);
_self.createCookie('email', email);
msgsndrjQuery.ajax({
url: _self.serverURL + '/message',
type: 'POST',
data: JSON.stringify({
name: name,
phone: phone,
email: email,
message: message,
location_id: _self.locationId,
}),
contentType: 'application/json',
success: function(){
var btn = msgsndrjQuery('.hl_text-widget--form button')
if (btn) btn.show();
var _boxInner = msgsndrjQuery('.hl_text-widget--form');
if (_boxInner) _boxInner.css({ marginLeft: '-100%'});
var msg = msgsndrjQuery('#msgsndr_message')
if (msg) msg.val('');
},
error: function(xhr, textStatus, errorThrown) {
var btn = msgsndrjQuery('.hl_text-widget--form button')
if (btn) btn.show();
if (!xhr || !xhr.responseText)
return;
var err = JSON.parse(xhr.responseText);
var errmsgbox = msgsndrjQuery("#errmsgdisp")
if (err && err.msg && errmsgbox)
errmsgbox.html(err.msg)
else if (errmsgbox)
errmsgbox.html('There was some issue. Please enter correct name, phone or email, and message before you hit send.')
console.log(xhr.responseText);
}
});
var btn = msgsndrjQuery('.hl_text-widget--form button')
if (btn) btn.hide();
});
msgsndrjQuery(document).on('click', '#hl_text-widget--send-another', function(e) {
e.preventDefault();
var _boxInner = msgsndrjQuery('.hl_text-widget--form');
_boxInner.css({
marginLeft: ''
});
});
msgsndrjQuery('body #msgsndr_phone').on('blur', function(e) { // Fires phone number formatting and validation on blur
msgsndrjQuery(e.target).val(
_self.formatPhoneNumber(msgsndrjQuery(e.target).val())
);
});
msgsndrjQuery('body #msgsndr_email').on('blur', function(e) {// Fires email validation on blur
msgsndrjQuery(e.target).val(
_self.validateEmail(msgsndrjQuery(e.target).val())
);
});
});
};
TextWidget.prototype.loadCSS = function() {
var _self = this;
msgsndrjQuery('head').append(
''
);
var checkReady = function(callback) {
if (window.libphonenumber) {
callback();
} else {
msgsndrjQuery('head').append(
'' // google-libphonenumber library, the same one used in PhoneNumber.vue
);
window.setTimeout(function() {
checkReady(callback);
}, 100);
}
};
setTimeout(function() {
checkReady(function() {
_self.addTemplateToPage();
});
}, 600);
};
TextWidget.prototype.getCountryCode = function() {
var _self = this
msgsndrjQuery.ajax({ // Fetches the country code of the location for Phone Number Formatting
url: this.serverURL + '/location/country_code/' + this.locationId,
type: 'GET',
contentType: 'application/json',
success: function(responseText){
console.log(responseText)
_self.countryCode = responseText
} // Doesn't handle errors because the field already has a fallback value set to 'US'
});
}
TextWidget.prototype.getPhone = function() {
return this.readCookie('phone') || '';
};
TextWidget.prototype.formatPhoneNumber = function(value) {
// Formats and validates the phone number and adds error if necessary
if (!value) {
this.updateRequiredAttribute('email', true)
return ''
}
let formattedNumber = value;
var phoneValid = false
try {
const parsedNumber = window.libphonenumber.parsePhoneNumberFromString(value, this.countryCode)
if (
parsedNumber.country &&
parsedNumber.isValid() &&
parsedNumber.country !== this.countryCode
) { // Formats to a country different than the location's
formattedNumber = parsedNumber.formatInternational();
} else if (parsedNumber.country && parsedNumber.isValid()) { // Formats as a local number
formattedNumber = parsedNumber.formatNational();
} else { // Error handler
formattedNumber = value
}
phoneValid = parsedNumber.isValid();
} catch(err) {
console.error(err)
}
console.log('Valid number? '+ phoneValid)
if (!phoneValid) {
document.getElementById("msgsndr_phone").setCustomValidity("Please provide valid phone number");
} else {
document.getElementById("msgsndr_phone").setCustomValidity("");
}
this.updateRequiredAttribute('email', false)
return formattedNumber
}
TextWidget.prototype.getName = function() {
return this.readCookie('name') || '';
};
TextWidget.prototype.getEmail = function() {
return this.readCookie('email') || '';
};
TextWidget.prototype.validateEmail = function(email) {
// Validates the email address and adds error if necessary
if (!email) {
this.updateRequiredAttribute('phone', true)
return ''
}
const isValid = Boolean(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
console.log('Valid email? ' + isValid)
if (!isValid) {
document.getElementById("msgsndr_email").setCustomValidity("Please provide valid e-mail");
} else {
document.getElementById("msgsndr_email").setCustomValidity("");
}
this.updateRequiredAttribute('phone', false)
return email
}
TextWidget.prototype.updateRequiredAttribute = function(type, value) {
// Enables contact to send only Email or only Phone
const requiredInput = document.getElementById('msgsndr_' + type)
if (requiredInput) {
requiredInput.required = value;
}
}
TextWidget.prototype.createCookie = function(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
var expires = '; expires=' + date.toGMTString();
} else var expires = '';
document.cookie = name + '=' + value + expires + '; path=/';
};
TextWidget.prototype.readCookie = function(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
};
TextWidget.prototype.eraseCookie = function(name) {
createCookie(name, '', -1);
};
TextWidget.prototype.addTemplateToPage = function() {
var element = document.createElement('div');
element.id = 'hl_text-widget';
element.className = 'hl_text-widget';
element.innerHTML = this.template().join('\n');
msgsndrjQuery('body').append(element);
this.bindClickHandler();
};
TextWidget.prototype.load = function() {
var _self = this;
if (typeof jQuery !== 'undefined' || typeof $ !== 'undefined') {
if (jQuery) {
msgsndrjQuery = jQuery;
} else {
msgsndrjQuery = $;
}
setTimeout(function() {
_self.loadCSS();
_self.getCountryCode();
}, 600);
} else {
var script = document.createElement('SCRIPT');
script.src =
'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
msgsndrjQuery = jQuery.noConflict(); // Impeding jQuery from conflicting with other jQuerys
callback(msgsndrjQuery);
} else {
window.setTimeout(function() {
checkReady(callback);
}, 100);
}
};
checkReady(function(msgsndrjQuery) {
setTimeout(function() {
_self.loadCSS();
_self.getCountryCode();
}, 600);
});
}
};
var msgsndrjQuery;
var HIGHLEVEL =
HIGHLEVEL ||
(function() {
return {
init: function(locationId, extras) {
var widget = new TextWidget();
if (extras && extras.baseURL){
widget.serverURL = extras.baseURL;
} else {
widget.serverURL = 'https://msgsndr.com';
}
widget.useEmailField = extras.useEmailField || false;
widget.locationId = locationId;
if (extras && extras.heading) widget.heading = extras.heading;
if (extras && extras.subHeading) widget.subHeading = extras.subHeading;
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(function() {
widget.load();
}, 1);
} else {
document.addEventListener("DOMContentLoaded", function() {
widget.load();
});
}
}
};
})();