(function() {
var conversationsId = "012810b9-058d-65bf-c725-76684e36c681"
var baseUrl = "https://chat.solutionreach.com/conversations/"
var messageText = "Write a message and we\'ll text you back as soon as we can!";
var conversationsNumber = "7708601919"
var logo = baseUrl + "images/SR-logo.png"
var callIcon = baseUrl + "images/icon-phone.png"
var textIcon = baseUrl + "images/icon-text.png"
function html(tag, attributes, children) {
children = children || []
var element = document.createElement(tag)
for (var name in attributes) {
var attribute = attributes[name]
switch (name) {
case "style":
for (var style in attribute) element.style[style] = attribute[style]
break
default:
element[name] = attribute
break
}
}
for (var i = 0; i < children.length; ++i) {
var child = children[i]
switch (typeof child) {
case "string":
element.appendChild(document.createTextNode(child))
break
default:
element.appendChild(child)
}
}
return element
}
var buttonStyle = {
width: "64px",
height: "64px",
"background-color": "#0E252D",
color: "white",
outline: "none",
border: "none",
"border-radius": "32px",
position: "fixed",
cursor: "pointer",
"z-index": 2147483647,
"bottom": "10px"
}
var left = "BOTTOM_RIGHT" == "BOTTOM_LEFT"
buttonStyle[left ? "left" : "right"] = "10px";
var popupStyle = {
display: "none",
position: "fixed",
"box-shadow": "0 2px 8px rgba(0, 0, 0, 0.5)",
width: "260px",
padding: "32px",
"border-radius": "8px",
"background-color": "white",
"margin-bottom": 0,
"z-index": 2147483647,
"bottom": "90px"
}
popupStyle[left ? "left" : "right"] = "10px"
var mobileLinkStyle = {
display: "inline-block",
border: "1px solid #00A7E1",
color: "#00A7E1",
"border-radius": "20px",
padding: "0 20px",
"line-height": "38px",
"text-decoration": "none"
}
var gradient = "linear-gradient(151deg, #00BAE9 0%, #0093D8 100%)"
var icon = ''
var cross = ''
var button = html("button", {type: "button", style: buttonStyle})
button.innerHTML = icon
var phone = html("input", {
type: "tel",
placeholder: "5551234567",
style: {
display: "block",
width: "100%",
"margin-bottom": "20px",
"border-radius": "4px",
border: "1px solid #A3ABAD",
padding: "4px 8px",
"font-size": "18px"
}
})
var message = html("textarea", {rows: 4, maxLength: 1000, style: {
display: "block",
width: "100%",
"margin-bottom": "20px",
"border-radius": "4px",
border: "1px solid #A3ABAD",
padding: "4px 8px",
resize: "vertical",
"max-height": "200px",
maxlength: 1000
}})
var send = html("button", {type: "submit", style: {
position: "relative",
left: "50%",
transform: "translateX(-50%)",
"background-image": gradient,
color: "white",
"font-size": "16px",
"line-height": "40px",
padding: "0 32px",
border: "none",
"border-radius": "4px"
}}, ["Send Text"])
var phoneError = html("p", {style: {display: "none", color: "#ff6347"}}, ["Phone number must be 10 digits."])
var messageError = html("p", {style: {display: "none", color: "#ff6347"}}, ["Message cannot be empty."])
var sendError = html("p", {style: {display: "none", "text-align": "center", color: "#ff6347"}}, ["Sorry, your message could not be sent."])
var promptStyle = JSON.parse(JSON.stringify(popupStyle))
promptStyle.width = "180px"
promptStyle.padding = "24px"
promptStyle.bottom = "100px";
var closePrompt = html("button", {style: {
top: "5px",
right: "5px",
border: "none",
"background-color": "transparent",
position: "absolute",
color: "#999999",
cursor: "pointer"
}}, ["x"])
var prompt = html("div", {style: promptStyle}, [
closePrompt,
html("p", {style: {"text-align": "center", color: "#999999"}}, [
''
]),
html("div", {style: {
color: 'white',
transform: 'rotate(45deg)',
position: 'absolute',
bottom: '-10px',
[left ? 'left' : 'right']: '20px',
"box-shadow": "rgba(0, 0, 0, 0.25) 3px 3px 4px",
"background-color": "white",
width: "20px",
height: "20px"
}})
])
prompt.style.display = "none"
closePrompt.onclick = function() {
prompt.style.display = "none";
}
var form = html("form", {style: popupStyle}, [
html("h5", {style: {"font-size": "18px", "font-weight": 600, "text-align": "center", "margin": "0 0 30px 0"}}, ["SEND US A TEXT"]),
html("p", {style: {"text-align": "center", color: "#999999"}}, [messageText]),
html("label", {style: {display: "block"}}, ["Your cell phone number:"]),
phone,
phoneError,
html("label", {style: {display: "block"}}, ["Your message:"]),
message,
messageError,
send,
sendError,
html("p", {style: {"text-align": "center", color: "#999999"}}, [
"Powered by ",
html("img", {src: logo, width: 101, height: 11})
])
])
var success = html("div", {style: popupStyle}, [
html("h5", {style: {"font-size": "18px", "font-weight": 600, "text-align": "center", "margin": "0 0 30px 0"}}, ["Your message has been sent!"]),
html("p", {style: {"text-align": "center", color: "#999999"}}, ["We'll text you back on your cell phone soon!"]),
html("p", {style: {"text-align": "center", color: "#999999"}}, ["Powered by ", html("img", {src: logo, width: 101, height: 11})])
])
var mobile = html("div", {style: popupStyle}, [
html("h5", {style: {"font-size": "18px", "font-weight": 600, "text-align": "center", "margin": "0 0 30px 0"}}, ["Contact Us"]),
html("p", {style: {"text-align": "center", color: "#999999"}}, [messageText]),
html("div", {style: {"text-align": "center"}}, [
html("a", {href: "tel:+1" + conversationsNumber, style: mobileLinkStyle}, [
html("img", {src: callIcon, style: {"vertical-align": "middle"}}),
" Call Us"
]),
" ",
html("a", {href: "sms:+1" + conversationsNumber, style: mobileLinkStyle}, [
html("img", {src: textIcon, style: {"vertical-align": "middle"}}),
" Text Us"
])
]),
html("p", {style: {"text-align": "center", color: "#999999"}}, ["Powered by ", html("img", {src: logo, width: 101, height: 11})])
])
var open = false
button.onclick = function() {
open = !open;
var isMobile = window.screen && window.screen.width <= 600
this.innerHTML = open ? cross : icon;
phoneError.style.display = "none"
messageError.style.display = "none"
prompt.style.display = "none"
if (open) {
phone.value = ""
message.value = ""
form.style.display = isMobile ? "none" : "block"
mobile.style.display = isMobile ? "block" : "none"
sendError.style.display = "none"
} else {
form.style.display = "none"
success.style.display = "none"
mobile.style.display = "none"
}
}
send.onmouseover = function() {
send.style.background = "#0093D8"
}
send.onmouseout = function() {
send.style.background = gradient
}
form.onsubmit = function(event) {
event.preventDefault()
var phoneOk = 10 === phone.value.replace("[^0-9]").length
var messageOk = 0 < message.value.replace("\\s", "").length
phoneError.style.display = phoneOk ? "none" : "block"
messageError.style.display = messageOk ? "none" : "block"
if (!phoneOk || !messageOk) {
return
}
var req = new XMLHttpRequest()
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (200 <= req.status && req.status < 300) {
form.style.display = "none"
success.style.display = "block"
} else {
sendError.style.display = "block"
console.error("Failed to send message: " + req.statusText)
}
}
}
req.open("POST", baseUrl + "rest/web/messages")
req.setRequestHeader("Content-Type", "application/json")
req.send(JSON.stringify({
conversationsId: conversationsId,
phone: phone.value,
body: message.value
}))
}
var root = html("span", {style: {
"font-family": '"Helvetica", sans-serif',
color: "black",
"font-size": "16px",
"z-index": "99"
}})
var shadow = root.attachShadow ? root.attachShadow({mode: "open"}) : root
shadow.appendChild(prompt)
shadow.appendChild(button)
shadow.appendChild(form)
shadow.appendChild(success)
shadow.appendChild(mobile)
function load() {
document.body.appendChild(root)
}
if (document.readyState == "loading") {
window.addEventListener("load", load)
} else {
load()
}
})()