var head = document.getElementsByTagName("HEAD")[0],
link = document.createElement("link");
(link.rel = "stylesheet"),
(link.href = "https://fonts.googleapis.com/css?family=Comfortaa"),
head.appendChild(link);
let inputresult = [],
widdata = {};
async function inserttowidget(e, t, l, a, i, n) {
i.innerHTML = "Submiting...";
let s = await fetch("https://www.sidefeature.com/api/widget", {
method: "PUT",
headers: {
"Content-type": "application/json",
"Access-Control-Allow-Origin": "*",
},
body: JSON.stringify({ pid: e, sid: t, data: l, insert: "true" }),
});
s
.json()
.then((e) => {
if (e.status) {
i.innerHTML = "Submitted";
let t = document.createElement("p");
(t.style.fontSize = "14px"),
(t.style.marginTop = "8px"),
(t.innerHTML = "Thanks for submitting"),
a.appendChild(t);
// setTimeout(() => {
// (i.innerHTML = "Submit"),
// (t.innerHTML = ""),
// l.map((e, t) => {
// if (e.value.includes("Stars")) {
// var l = document.getElementsByName("rating");
// l.forEach((e, t) => {
// for (let a = 1; a <= t; a++)
// (l[a].checked = !1),
// l[a].labels[0].classList.remove("checked"),
// console.log(l[a].labels[0]);
// });
// } else
// (document.getElementById(
// "feedbackspot_input_" + t.toString()
// ).value = ""),
// (document.getElementById(
// "feedbackspot_input_" + t.toString()
// ).checked = !1);
// });
// }, 2e3);
}
})
.catch((e) => {}),
(inputresult = []);
}
async function feature(e) {
"use strict";
let t = fetch(
`https://www.sidefeature.com/api/widget?pid=${e?.id}&getwidget=true`
)
.then((e) => e.json())
.catch((e) => {});
t ? console.log("Data Loaded") : console.log("Loading"),
await t.then((e) => {
widdata.data = e.result;
});
let l = document.createElement("div");
(l.className = "feedbackspot_btn"),
(l.style.position = "fixed"),
(l.style.bottom = "15px"),
(l.style.right = "15px"),
(l.style.display = "flex"),
(l.style.flexDirection = "column"),
(l.style.alignItems = "flex-end"),
(l.style.justifyContent = "flex-end"),
(l.style.gap = "10px"),
(l.style.fontFamily = "Comfortaa");
let a = document.createElement("div");
(a.style.height = "60px"),
(a.style.width = "60px"),
(a.style.borderRadius = "100%"),
(a.style.backgroundColor = widdata.data?.btncolor),
(a.style.color = widdata.data?.iconcolor);
let i = document.createElement("img");
(i.style.width = "32px"),
(i.alt = "icons"),
widdata.data?.iconurl === "" || widdata.data?.iconurl === null
? (a.innerHTML =
"')
: ((i.src = widdata.data?.iconurl), a.appendChild(i)),
(a.style.color = "#ffffff"),
(a.style.display = "flex"),
(a.style.alignItems = "center"),
(a.style.justifyContent = "center"),
(a.style.fontSize = "20px"),
(a.style.cursor = "pointer"),
(a.style.fontFamily = "Comfortaa"),
a.addEventListener("click", () => {
(s.style.display = "block"),
(a.style.display = "none"),
(n.style.display = "flex");
});
let n = document.createElement("div");
(n.style.height = "60px"),
(n.style.width = "60px"),
(n.style.borderRadius = "100%"),
(n.style.backgroundColor = widdata.data?.btncolor),
(a.style.color = widdata.data?.iconcolor),
(n.innerHTML =
"'),
(n.style.color = "#ffffff"),
(n.style.display = "flex"),
(n.style.alignItems = "center"),
(n.style.alignContent = "center"),
(n.style.justifyContent = "center"),
(n.style.justifyItems = "center"),
(n.style.fontSize = "25px"),
(n.style.cursor = "pointer"),
(n.style.display = "none"),
(n.style.fontFamily = "Comfortaa"),
n.addEventListener("click", () => {
(s.style.display = "none"),
(n.style.display = "none"),
(a.style.display = "flex");
});
let s = document.createElement("div");
(s.style.height = "100%"),
(s.style.width = "260px"),
(s.style.backgroundColor = widdata.data?.bgcolor),
(a.style.color = widdata.data?.textcolor),
(s.style.color = "#ffffff"),
(s.style.display = "none"),
(s.style.borderRadius = "5px"),
(s.style.paddingTop = "20px"),
(s.style.overflowY = "auto"),
(s.style.maxHeight = "500px");
let o = document.createElement("div");
(o.style.paddingLeft = "20px"),
(o.style.paddingBottom = "20px"),
t.then((l) => {
let i = document.createElement("p");
(i.innerHTML = l.result.header),
(i.style.color = l.result.textcolor),
(i.style.display = "block"),
(i.style.marginBlockStart = "1em"),
(i.style.marginBlockEnd = "1em"),
(i.style.marginInlineStart = "0px"),
(i.style.marginInlineEnd = "0px"),
o.appendChild(i),
l?.result?.input.forEach((e, t) => {
let l = document.createElement("p");
if (
((l.innerHTML = e?.title),
(l.style.fontSize = "14px"),
(l.style.paddingTop = "5px"),
(l.style.display = "block"),
(l.style.marginBlockStart = "1em"),
(l.style.marginBlockEnd = "1em"),
(l.style.marginInlineStart = "0px"),
(l.style.marginInlineEnd = "0px"),
o.appendChild(l),
e?.type === "textarea")
) {
let a = document.createElement("textarea");
(a.placeholder = "Your Feedback"),
a.setAttribute("id", "feedbackspot_input_" + t),
(a.style.padding = "9px"),
(a.style.borderWidth = "2px"),
(a.style.borderRadius = "4px"),
(a.style.fontSize = "14px"),
(a.style.maxHeight = "80px"),
(a.style.borderColor = "white"),
(a.style.backgroundColor = "white"),
(a.style.color = "black"),
(a.style.maxWidth = "80%"),
(a.style.lineHeight = "inherit"),
(a.style.boxSizing = "content-box"),
(a.style.width = "80%"),
(a.style.fontFamily = "Comfortaa"),
o.appendChild(a);
} else if (e?.type === "rating") {
let i = document.createElement("div");
i.classList.add("rating-container");
for (let n = 1; n <= 5; n++) {
let s = document.createElement("input");
(s.type = "radio"),
(s.name = "rating"),
(s.id = `star${n}`),
(s.value = n),
1 === n && (s.checked = !0);
let d = document.createElement("label");
(d.htmlFor = `star${n}`),
d.classList.add("star-icon"),
(d.style.marginRight = "8px"),
i.appendChild(s),
i.appendChild(d);
}
o.appendChild(i);
let r = document.getElementsByName("rating");
function p(e) {
let t = e.labels[0];
t.classList.toggle("checked", e.checked);
}
r.forEach((e, t) => {
e.addEventListener("change", () => {
for (let e = 0; e <= t; e++) (r[e].checked = !0), p(r[e]);
for (let l = t + 1; l < r.length; l++)
(r[l].checked = !1), p(r[l]);
});
}),
r.forEach((e) => {
p(e);
});
let y = `
.rating-container input[type="radio"] {
display: none;
gap: 10px;
}
.star-icon {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='192' height='180'%3e%3cpath fill='rgb(23,58,53)' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.star-icon.checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='192' height='180'%3e%3cpath fill='rgb(35,196,94)' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
}
}
`,
c = document.createElement("style");
(c.textContent = y), document.head.appendChild(c);
} else if (e?.type === "Yes/No Option") {
let _ = document.createElement("div");
(_.style.display = "flex"),
(_.style.alignItems = "center"),
(_.style.gap = "20px");
let $ = document.createElement("div");
($.style.display = "flex"), ($.style.alignItems = "center");
let m = document.createElement("input");
m.setAttribute("id", "feedbackspot_input_" + t),
(m.type = "radio"),
(m.value = "Yes"),
(m.name = "Option");
let g = document.createElement("label");
(g.style.fontSize = "14px"),
(g.style.paddingLeft = "8px"),
(g.innerHTML = "Yes"),
$.appendChild(m),
$.appendChild(g);
let f = document.createElement("div");
($.style.display = "flex"), ($.style.alignItems = "center");
let h = document.createElement("input");
h.setAttribute("id", "feedbackspot_input_" + t),
(h.type = "radio"),
(h.value = "No"),
(h.name = "Option");
let u = document.createElement("label");
(u.style.fontSize = "14px"),
(u.style.paddingLeft = "8px"),
(u.innerHTML = "No"),
f.appendChild(h),
f.appendChild(u),
_.appendChild($),
_.appendChild(f),
o.appendChild(_);
} else if (e?.type === "number") {
let x = document.createElement("input");
x.setAttribute("id", "feedbackspot_input_" + t),
(x.type = e?.type),
(x.placeholder = "Type Number"),
(x.style.padding = "9px"),
(x.style.borderWidth = "2px"),
(x.style.borderRadius = "4px"),
(x.style.fontSize = "14px"),
(x.style.maxHeight = "80px"),
(x.style.borderColor = "white"),
(x.style.backgroundColor = "white"),
(x.style.boxSizing = "content-box"),
(x.style.color = "black"),
(x.max = e?.max),
(x.min = e?.min),
(x.style.width = "80%"),
x.addEventListener("change", () => {
(x.value < e?.min || x.value > e?.max) &&
alert(
"Number should start from min=" +
e?.min +
" and max=" +
e?.max
);
}),
(x.style.fontFamily = "Comfortaa"),
o.appendChild(x);
} else if (e?.type === "email") {
let b = document.createElement("input");
b.setAttribute("id", "feedbackspot_input_" + t),
(b.type = e?.type),
(b.placeholder = "Email Id"),
(b.style.padding = "9px"),
(b.style.borderWidth = "2px"),
(b.style.borderRadius = "4px"),
(b.style.fontSize = "14px"),
(b.style.maxHeight = "80px"),
(b.style.borderColor = "white"),
(b.style.backgroundColor = "white"),
(b.style.color = "black"),
(b.style.width = "80%"),
(b.style.fontFamily = "Comfortaa"),
(b.style.boxSizing = "content-box"),
o.appendChild(b);
} else {
let k = document.createElement("input");
k.setAttribute("id", "feedbackspot_input_" + t),
(k.type = e?.type),
(k.placeholder = "Write Someting"),
(k.style.padding = "9px"),
(k.style.borderWidth = "2px"),
(k.style.borderRadius = "4px"),
(k.style.fontSize = "14px"),
(k.style.maxHeight = "80px"),
(k.style.borderColor = "white"),
(k.style.backgroundColor = "white"),
(k.style.color = "black"),
(k.style.width = "80%"),
(k.style.fontFamily = "Comfortaa"),
(k.style.lineHeight = "normal"),
(k.style.boxSizing = "content-box"),
o.appendChild(k);
}
});
let n = document.createElement("div");
(n.innerHTML = "Submit"),
(n.style.backgroundColor = "white"),
(n.style.color = "rgb(15 23 42)"),
(n.style.fontSize = "14px"),
(n.style.width = "max-content"),
(n.style.marginLeft = "20px"),
(n.style.marginBottom = "20px"),
(n.style.padding = "7px"),
(n.style.paddingLeft = "12px"),
(n.style.paddingRight = "12px"),
(n.style.borderRadius = "4px"),
(n.style.cursor = "pointer"),
(n.style.backgroundColor = l?.result?.submitcolor),
(n.style.color = l?.result?.submittextcolor),
(n.style.fontFamily = "Comfortaa"),
n.addEventListener("click", async () => {
let a = !0,
i = !1;
if (
(await t.then(async (e) => {
!1 ===
(a = e?.result?.input.some(function (e, t) {
if (
e?.type !== "rating" &&
"" ===
document.getElementById("feedbackspot_input_" + t).value
)
return alert(e?.title + " Should not be empty"), !0;
})) &&
e?.result?.input.some(function (e, t) {
if (e?.type === "rating") {
var l,
a = document.getElementsByName("rating");
let n = 0;
for (n = 0; n < a.length; n++)
a[n].checked &&
inputresult.push({
title: e?.title,
value: a[n].value + " Stars",
});
} else e?.title === "Email" ? (((l = document.getElementById("feedbackspot_input_" + t).value).match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) ? 0 : 1) ? ((i = !1), alert("Not a valid Email Id")) : inputresult.push({ title: e?.title, value: document.getElementById("feedbackspot_input_" + t).value })) : e?.type === "Yes/No Option" ? inputresult.push({ title: e?.title, value: !1 === document.getElementById("feedbackspot_input_" + t).checked ? "No" : "Yes" }) : e?.type === "Number" && ("" === document.getElementById("feedbackspot_input_" + t).value || document.getElementById("feedbackspot_input_" + t).value < e?.min || document.getElementById("feedbackspot_input_" + t).value > e?.max) ? ((i = !1), alert(`Number should be in range Min=${e?.min} and Max=${e?.max}`)) : inputresult.push({ title: e?.title, value: document.getElementById("feedbackspot_input_" + t).value });
});
}),
!1 === a && !1 === i)
) {
let s = l?.result?.input.length;
inserttowidget(e?.id, l?.result?.sid, inputresult, o, n, s);
}
}),
s.appendChild(n),
t.then((e) => {
let t = document.createElement("p");
if (
((t.innerHTML =
"Hi \uD83D\uDC4B Welcome to " + e?.result?.projectname),
(a.style.color = widdata.data?.textcolor),
(t.style.fontSize = "12px"),
(t.style.marginBottom = "12px"),
(t.style.marginTop = "-12px"),
(t.style.color = "#ffffff"),
(t.style.width = "100%"),
(t.style.display = "flex"),
(t.style.alignItems = "center"),
(t.style.justifyContent = "center"),
(t.style.paddingBottom = "10px"),
(t.style.paddingTop = "0px"),
(t.style.fontFamily = "Comfortaa"),
(t.style.display = "none"),
s.appendChild(t),
e?.result?.usertype === "Starter")
) {
let l = document.createElement("p");
(l.innerHTML = "Powered by SideFeature"),
(a.style.color = widdata.data?.textcolor),
(l.style.color = "#ffffff"),
(l.style.width = "100%"),
(l.style.display = "flex"),
(l.style.alignItems = "center"),
(l.style.justifyContent = "center"),
(l.style.fontSize = "12px"),
(l.style.paddingBottom = "10px"),
(l.style.fontFamily = "Comfortaa"),
s.appendChild(l);
}
if (e?.result?.powered_by === !0) {
let i = document.createElement("p");
(i.innerHTML = "Powered by SideFeature"),
(a.style.color = widdata.data?.textcolor),
(i.style.color = "#ffffff"),
(i.style.width = "100%"),
(i.style.display = "flex"),
(i.style.alignItems = "center"),
(i.style.justifyContent = "center"),
(i.style.fontSize = "12px"),
(i.style.marginTop = "-8px"),
(i.style.marginBottom = "8px"),
(i.style.paddingBottom = "12px"),
(i.style.fontFamily = "Comfortaa"),
s.appendChild(i);
}
});
}),
s.appendChild(o),
l.appendChild(s),
l.appendChild(a),
l.appendChild(n),
document.body.appendChild(l),
document.addEventListener("DOMContentLoaded", () => {
let e = document.getElementsByClassName("rating-container")[0],
t = e.getElementsByTagName("input");
e.addEventListener("click", (e) => {
let l = e.target;
if ((console.log(""), "radio" === l.type)) {
let a = parseInt(l.value),
i = Array.from(t);
i.forEach((e) => {
console.log(""), (e.checked = !1);
});
for (let n = 5; n >= a; n--)
document.getElementById(`star${n}`).checked = !0;
}
});
});
}