<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.textUsButton {
position: fixed;
cursor: pointer;
border: 0px;
bottom: 0;
right: 25px;
z-index: 999;
display: inline-block;
padding: 10px 30px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
background: #FDB813;
color: #FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
text-transform: uppercase;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div id="EWTextUsWidget">
<script src="https://portal.everyware.com/Static/EwTextUsWidget.js"></script>
<script>
initTextUsWidget(
(div = "EWTextUsWidget"),
(buttontext = "Text Us"),
(buttonclass = "textUsButton"),
(showbutton = true),
(csshref = ""),
(enpointURL = "https://portal.everyware.com"),
(saleSiteIdentifier = '6e32ad7c-6d03-43c6-aba5-4a77b7cfe725')
);
</script>
</div>
</body>
</html> <head>
<meta charset="utf-8" />
const popUpWidth = 400;
const popUpHeight = 500;
function initTextUsWidget(
div,
buttontext = '',
buttonclass = '',
showbutton = '',
csshref = '',
enpointURL = '',
saleSiteIdentifier = ''
) {
var xdiv = document.getElementById(div);
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML =
".modal {position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4); }";
style.innerHTML =
style.innerHTML +
".modal-dialog { position: relative; max-width: 800px; max-height: 70%; border-radius: 5px; background: var(--white); overflow: none; cursor: default;}";
style.innerHTML =
style.innerHTML + ".modal-dialog { padding: 1rem; }";
style.innerHTML =
style.innerHTML +
".modal-header,.modal-footer { background: var(--lightgray); }";
style.innerHTML =
style.innerHTML +
".modal-header { position: relative;align-items: center; justify-content: space-between; float:right; } ";
style.innerHTML =
style.innerHTML +
".modal-header.modal-close { font-size: 1.5rem; }";
style.innerHTML =
style.innerHTML +
".modal { visibility: hidden; opacity: 0; transition: all 0.35s ease -in; }";
style.innerHTML =
style.innerHTML +
".modal.is-visible { visibility: visible; opacity: 1; } ";
document.getElementsByTagName("head")[0].appendChild(style);
var head = document.head;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
var subbtn = document.createElement("button");
if (buttontext == "") {
subbtn.innerHTML = "<img src='ew.png'></img>";
} else {
subbtn.innerHTML = buttontext;
}
subbtn.dataset.open = "EWTextUsWidgetModal";
if (buttonclass == "") {
subbtn.className = "Custombutton";
} else {
subbtn.className = buttonclass;
}
subbtn.addEventListener("click", function () {
// Add iframe to webpage
ShowEWModalTextUsWidget(div, saleSiteIdentifier);
});
if (showbutton) {
xdiv.appendChild(subbtn);
} else {
ShowWidgetDivTextUsWidget(div, saleSiteIdentifier, enpointURL);
document.getElementById("EWTextUsWidgetModal").classList.add(isTextUsVisible);
}
window.addEventListener(
"message",
(e) => {
if (event.origin.startsWith(enpointURL)) {
if (event.data.startsWith("Closed")) {
var zdiv = document.getElementById("EWTextUsWidgetModal");
zdiv.classList.remove(isTextUsVisible);
}
}
},
false
);
}
function ShowEWModalTextUsWidget(div, saleSiteIdentifier) {
// Add iframe to webpage
var myElem = document.getElementById("EWTextUsWidgetModal");
if (myElem) {
myElem.remove();
}
ShowWidgetModalTextUsWidget(div, saleSiteIdentifier);
}
function ShowWidgetDivTextUsWidget(x, saleSiteIdentifier, enpointURL) {
var xdiv = document.getElementById(x);
var subdiv = document.createElement("div");
subdiv.id = "EWTextUsWidgetModal";
subdiv.className = "divwidget";
xdiv.appendChild(subdiv);
var subdialdiv = document.createElement("div");
subdialdiv.id = "EWTextUsWidgetDivDialogue";
subdialdiv.className = "div-dialog";
subdiv.appendChild(subdialdiv);
var subBodydiv = document.createElement("div");
subBodydiv.id = "EWTextUsWidgetDivBody";
subBodydiv.className = "divBody";
subdialdiv.appendChild(subBodydiv);
var substack = document.createElement("iframe");
substack.src = enpointURL + '/Widgets/TextUs?SaleSiteIdentifier=' + saleSiteIdentifier
substack.width = popUpWidth;
substack.height = popUpHeight;
substack.frameBorder = "0";
substack.scrolling = "0";
substack.style.borderRadius = "10px";
substack.style.background = "white";
subBodydiv.appendChild(substack);
}
function ShowWidgetModalTextUsWidget(x, saleSiteIdentifier) {
var xdiv = document.getElementById(x);
var subdiv = document.createElement("div");
subdiv.id = "EWTextUsWidgetModal";
subdiv.className = "modal";
xdiv.appendChild(subdiv);
var subdialdiv = document.createElement("div");
subdialdiv.id = "EWTextUsWidgetModalDialogue";
subdialdiv.className = "modal-dialog";
//subdialdiv.style = "position: fixed; top: 0px; padding: 0px;";
subdiv.appendChild(subdialdiv);
var subheaddiv = document.createElement("div");
subheaddiv.id = "EWTextUsWidgetModalHeader";
subheaddiv.className = "modal-header";
subdialdiv.appendChild(subheaddiv);
var subBodydiv = document.createElement("div");
subBodydiv.id = "EWTextUsWidgetModalBody";
subBodydiv.className = "modalBody";
subdialdiv.appendChild(subBodydiv);
var substack = document.createElement("iframe");
substack.onload = () => {
const message = JSON.stringify({ action: "focus", elementId: "txtMobilePhone" });
substack.contentWindow.postMessage(message, '*');
};
substack.id = "textUsIframe";
substack.src = enpointURL + '/Widgets/TextUs?SaleSiteIdentifier=' + saleSiteIdentifier;
substack.width = popUpWidth;
substack.height = popUpHeight;
substack.frameBorder = "0";
substack.scrolling = "0";
substack.style.borderRadius = "10px";
substack.style.background = "white";
document.addEventListener("click", (e) => {
if (e.target == document.querySelector(".modal.is-visible")) {
CloseTextUsModal();
}
});
document.addEventListener("keyup", (e) => {
// if press the ESC key
if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
CloseTextUsModal();
}
});
window.onmessage = function (e) {
if (e.data == 'CloseTextUsModal' && document.querySelector(".modal.is-visible")) {
CloseTextUsModal();
}
};
subBodydiv.appendChild(substack);
document.getElementById("EWTextUsWidgetModal").classList.add(isTextUsVisible);
}
function CloseTextUsModal() {
document.querySelector(".modal.is-visible").classList.remove(isTextUsVisible);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.