@inleads/inleads-widgets
Version:
Widgets for chatbot, WhatsApp, nps, contact-form
230 lines (229 loc) • 9.27 kB
JavaScript
import { h } from "@stencil/core";
import star from "./assests/images/star-icon.svg";
import Cookies from "js-cookie";
export class NpsWidget {
constructor() {
this.baseURL = "https://www.inleads.ai/widgets/nps-widget/";
this.minFrameHeight = 130;
this.rating = null;
this.showSuccess = false;
this.hide = false;
this.apiKey = undefined;
this.backgroundColor = undefined;
this.textColor = undefined;
}
componentWillLoad() {
const container = document.querySelector('.nps-widget-container');
if (container) {
container.style.backgroundColor = this.backgroundColor;
}
this.netPromoterScoreWidget();
}
netPromoterScoreWidget() {
const e = document.createElement("div");
e.setAttribute("id", "nps-widget");
e.style.maxWidth = "100%";
e.style.overflow = "hidden";
e.style.backgroundColor = "transparent";
e.style.position = "relative";
e.style.bottom = "0";
e.style.margin = "0 auto";
e.style.pointerEvents = "none";
const widgetWrapperStyle = {
position: "fixed",
bottom: "0",
left: "-100%",
zIndex: 9999,
transition: "all .5s ease-in-out",
width: document.body.clientWidth > 500 ? "500px" : "100%",
};
this.createStyledDiv("nps-widget-wrapper", widgetWrapperStyle);
const t = document.createElement("iframe");
t.src = `${this.baseURL}index.html?apiKey=${this.apiKey}×tamp=${new Date().getTime()}&background=${encodeURIComponent(this.backgroundColor)}&textColor=${encodeURIComponent(this.textColor)}`;
t.style.width = "100%";
t.style.height = this.minFrameHeight + "px";
t.style.overflow = "hidden";
t.style.border = "0";
t.style.backgroundColor = "transparent";
t.style.position = "relative";
t.style.pointerEvents = "all";
e.appendChild(t);
document.getElementById("nps-widget-wrapper").appendChild(e);
this.verifyNPS((result) => {
this.handleWidgetDisplay(result);
});
console.info(document.getElementById("nps-widget-wrapper"));
}
handleWidgetDisplay(result) {
const currentUrl = window.location.href;
const urlParts = currentUrl.split('/');
const urlPart = urlParts.includes(result.path);
if ((result.urlCondition === "contains" && urlPart) ||
(result.urlCondition === "notContains" && !urlPart) ||
(result.urlCondition === "equals" && currentUrl === result.path)) {
const element = document.getElementById("nps-widget-wrapper");
const styleElement = element.style;
const iframe = document.getElementById("nps-widget").querySelector("iframe").contentWindow;
iframe.postMessage({ position: result.position }, "*");
Cookies.set("lastDisplayed", new Date());
switch (result.position) {
case "bottomLeft":
styleElement.bottom = "0";
styleElement.left = "0";
break;
case "bottomRight":
styleElement.bottom = "0";
styleElement.right = "-100%";
setTimeout(() => { styleElement.right = "0"; }, 1);
break;
case "topRight":
styleElement.top = "0";
styleElement.right = "-100%";
setTimeout(() => { styleElement.right = "0"; }, 1);
break;
case "topLeft":
styleElement.top = "0";
setTimeout(() => { styleElement.left = "0"; }, 1);
break;
case "center":
styleElement.bottom = "-100%";
styleElement.left = "50%";
styleElement.transform = "translateX(-50%)";
setTimeout(() => {
styleElement.bottom = "50%";
styleElement.transform = "translate(-50%, -50%)";
}, 500);
break;
}
}
}
createStyledDiv(id, styles) {
const div = document.createElement("div");
if (id) {
div.id = id;
}
Object.assign(div.style, styles);
document.body.appendChild(div);
}
verifyNPS(callback) {
const postURL = "https://server.inleads.ai/nps/validate";
const lastDisplayed = Cookies.get('lastDisplayed') ? new Date(Cookies.get('lastDisplayed')) : new Date();
const postData = {
apiKey: this.apiKey,
lastDisplayed: lastDisplayed,
};
fetch(postURL, {
method: "POST",
body: JSON.stringify(postData),
headers: {
'Accept': "application/json",
'Content-Type': "application/json",
},
})
.then(response => response.json())
.then(data => callback(data))
.catch(error => console.error('Error:', error));
}
handleRatingClick(ratingValue) {
this.rating = ratingValue;
this.showSuccess = true;
setTimeout(() => {
this.showSuccess = false;
window.parent.postMessage({ action: 'closeNpsFrameWidget' }, '*');
}, 1000);
fetch('https://server.inleads.ai/nps/update', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ apiKey: this.apiKey, rating: this.rating }),
})
.then(response => response.json())
.then(data => console.log('Rating submitted:', data))
.catch(error => console.error('Error:', error));
}
closeWidget(event) {
event.preventDefault();
window.parent.postMessage({ action: 'closeNpsFrameWidget' }, '*');
this.hide = !this.hide;
}
render() {
return (h("div", { key: '80150fc4a08bf807e3568d78f7ad60e12cbde645', class: `nps-widget-container bottomLeft ${this.hide ? "hidden" : ""}`, style: { backgroundColor: this.backgroundColor } }, !this.showSuccess ? (h("div", { class: "nps-widget-content rating-form" }, h("a", { href: "#", class: `widget-x close-nps-widget`, onClick: (event) => this.closeWidget(event) }, "\u00D7"), h("h3", { style: { color: this.textColor } }, "How likely are you to recommend us to a friend or colleague?"), h("div", { class: "nps-widget-buttons" }, [...Array(11).keys()].map((value) => (h("button", { type: "button", class: `btn btn-box ${value <= 5 ? 'btn-danger' : value <= 8 ? 'btn-warning' : 'btn-success'}`, onClick: () => this.handleRatingClick(value) }, value)))))) : (h("div", { class: "nps-widget-content success-info" }, h("img", { class: "success-star", src: star, alt: "Success" }), h("p", null, "Thanks for your rating!")))));
}
static get is() { return "nps-widget"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["nps-widget.css"]
};
}
static get styleUrls() {
return {
"$": ["nps-widget.css"]
};
}
static get properties() {
return {
"apiKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "api-key",
"reflect": false
},
"backgroundColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "background-color",
"reflect": false
},
"textColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "text-color",
"reflect": false
}
};
}
static get states() {
return {
"rating": {},
"showSuccess": {},
"hide": {}
};
}
}
//# sourceMappingURL=nps-widget.js.map