@inleads/inleads-widgets
Version:
Widgets for chatbot, WhatsApp, nps, contact-form
111 lines (103 loc) • 13.2 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-63f146e2.js';
const whatsappLogoSvg = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyBmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogbm9uZTsiPjxwYXRoIGQ9Ik0xOS4xMSAxNy4yMDVjLS4zNzIgMC0xLjA4OCAxLjM5LTEuNTE4IDEuMzlhLjYzLjYzIDAgMCAxLS4zMTUtLjFjLS44MDItLjQwMi0xLjUwNC0uODE3LTIuMTYzLTEuNDQ3LS41NDUtLjUxNi0xLjE0Ni0xLjI5LTEuNDYtMS45NjNhLjQyNi40MjYgMCAwIDEtLjA3My0uMjE1YzAtLjMzLjk5LS45NDUuOTktMS40OSAwLS4xNDMtLjczLTIuMDktLjgzMi0yLjMzNS0uMTQzLS4zNzItLjIxNC0uNDg3LS42LS40ODctLjE4NyAwLS4zNi0uMDQzLS41My0uMDQzLS4zMDIgMC0uNTMuMTE1LS43NDYuMzE1LS42ODguNjQ1LTEuMDMyIDEuMzE4LTEuMDYgMi4yNjR2LjExNGMtLjAxNS45OS40NzIgMS45NzcgMS4wMTcgMi43OCAxLjIzIDEuODIgMi41MDYgMy40MSA0LjU1NCA0LjM0LjYxNi4yODcgMi4wMzUuODg4IDIuNzIyLjg4OC44MTcgMCAyLjE1LS41MTUgMi40NzgtMS4zMTguMTMtLjMzLjI0NC0uNzMuMjQ0LTEuMDg4IDAtLjA1OCAwLS4xNDQtLjAzLS4yMTUtLjEtLjE3Mi0yLjQzNC0xLjM5LTIuNjc4LTEuMzl6bS0yLjkwOCA3LjU5M2MtMS43NDcgMC0zLjQ4LS41My00Ljk0Mi0xLjQ5TDcuNzkzIDI0LjQxbDEuMTMyLTMuMzM3YTguOTU1IDguOTU1IDAgMCAxLTEuNzItNS4yNzJjMC00Ljk1NSA0LjA0LTguOTk1IDguOTk3LTguOTk1UzI1LjIgMTAuODQ1IDI1LjIgMTUuOGMwIDQuOTU4LTQuMDQgOC45OTgtOC45OTggOC45OTh6bTAtMTkuNzk4Yy01Ljk2IDAtMTAuOCA0Ljg0Mi0xMC44IDEwLjggMCAxLjk2NC41MyAzLjg5OCAxLjU0NiA1LjU3NEw1IDI3LjE3Nmw1Ljk3NC0xLjkyYTEwLjgwNyAxMC44MDcgMCAwIDAgMTYuMDMtOS40NTVjMC01Ljk1OC00Ljg0Mi0xMC44LTEwLjgwMi0xMC44eiI+PC9wYXRoPjwvc3ZnPg0K';
const closeSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGlkPSJjcm9zcyI+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iNyIgeDI9IjI1IiB5MT0iNyIgeTI9IjI1Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iNyIgeDI9IjI1IiB5MT0iMjUiIHkyPSI3Ii8+PC9nPjwvc3ZnPg0K';
const sendSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxOHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMyAxOCIgd2lkdGg9IjIzcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZiIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MjEuMDAwMDAwLCAtMzgxLjAwMDAwMCkiPjxnIGlkPSJzZW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MjEuNTAwMDAwLCAzODEuMDAwMDAwKSI+PHBhdGggZD0iTTAsMTggTDIxLDkgTDAsMCBMMCw3IEwxNSw5IEwwLDExIEwwLDE4IFoiIGlkPSJTaGFwZSIvPjwvZz48L2c+PC9nPjwvc3ZnPg0K';
const whatsappWidgetCss = ":host{display:block !important;all:initial}:root{--primary-bg-color:#4dc247;--primary-text-color:#fff}.whatsapp-container{display:flex;justify-content:center;align-items:center;position:fixed;bottom:12px;right:8px;cursor:pointer;z-index:1000;font-family:'system-ui'}.chat-circle{background-color:#25d366;background-image:url(\"/assets/images/whatsapp-logo.svg\");background-size:40px;background-position:center;background-repeat:no-repeat;border-radius:50%;width:60px;height:60px;display:flex;justify-content:center;align-items:center;cursor:pointer}.whatsapp-image{width:40px;height:40px}.chat-box{background-color:white;width:320px;border-radius:8px;box-shadow:0px 5px 8px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;border-radius:4px}.chat-box-header{padding:15px;background-color:#25d366;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;border-top-left-radius:4px;border-top-right-radius:4px}.chat-title{font-weight:500;color:#fff;font-family:'system-ui'}.chat-box-toggle{cursor:pointer;width:22px;height:22px}.chat-box-overlay{position:relative;overflow:hidden;background-color:#efefef;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.chat-box-body::after{content:\"\";background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=\");opacity:0.1;top:0;left:0;bottom:0;right:0;height:100%;position:absolute;z-index:0;overflow:hidden}input,.chat-box-header,textarea,.send-button,.chat-accreditation{position:relative;z-index:1}.chat-input>form{margin-bottom:0}#chat-input::placeholder{color:#ccc}.chat-submit{box-shadow:none;border:none;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;width:50px;height:50px;margin:20px auto 0;cursor:pointer;background:#4dc247 url(\"./images/send.svg\") no-repeat center;background-color:var(--primary-bg-color);background-size:20px;font-family:'system-ui'}.chat-logs{padding:15px 25px}.form-group label{font-size:14px;font-weight:500;display:block;margin-bottom:5px;margin-top:14px;font-family:'system-ui'}.form-group input{outline:none;font-size:14px;font-family:'system-ui'}.form-group .required{color:red;font-family:'system-ui'}.form-control{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.error-message{color:red;font-size:12px;margin-top:5px;font-family:'system-ui'}.send-button{display:flex;justify-content:center;align-items:center;margin-top:15px;background-color:#25d366;border-radius:50%;padding:12px;width:22px;height:22px;margin:auto}.send-image{cursor:pointer;width:22px;height:22px}.chat-accreditation{text-align:center;margin-top:10px;font-size:14px;color:rgba(0, 0, 0, 0.5);font-weight:500;cursor:none;position:relative;padding:10px 0;font-family:'system-ui'}";
const WhatsappWidgetStyle0 = whatsappWidgetCss;
const WhatsappWidget$1 = /*@__PURE__*/ proxyCustomElement(class WhatsappWidget extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.name = '';
this.email = '';
this.mobile = '';
this.message = '';
this.errors = {};
this.isChatBoxVisible = false;
this.phoneNumber = undefined;
this.apiKey = undefined;
}
validateForm() {
let formIsValid = true;
const errors = {};
if (!this.name) {
formIsValid = false;
errors['name'] = 'Name is required.';
}
if (!this.email) {
formIsValid = false;
errors['email'] = 'Email is required.';
}
if (!this.mobile) {
formIsValid = false;
errors['mobile'] = 'Mobile Number is required.';
}
if (!this.message) {
formIsValid = false;
errors['message'] = 'Message is required.';
}
this.errors = errors;
return formIsValid;
}
handleSubmit() {
if (this.validateForm()) {
const whatsappUrl = `https://api.whatsapp.com/send?phone=${this.phoneNumber}&text=${encodeURIComponent(this.message)}&app_absent=0`;
window.open(whatsappUrl, '_blank');
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.setUser(this.email, this.name, {
phoneNumber: this.mobile,
description: this.message
});
this.name = "";
this.mobile = "";
this.email = "";
this.message = "";
}
}
toggleChatBox() {
this.isChatBoxVisible = !this.isChatBoxVisible;
}
componentDidLoad() {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/@inleads/event-logger/dist/events.js";
script.type = 'text/javascript';
script.onload = () => {
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.init(this.apiKey);
inleadsEventKey.track('VISIT');
};
document.body.appendChild(script);
}
render() {
return (h("div", { key: 'edf53c5e1da0eda77cdb7653d4c8a91d26ae2877', class: "whatsapp-container" }, !this.isChatBoxVisible ? (h("div", { class: "chat-circle", onClick: () => this.toggleChatBox() }, h("img", { src: whatsappLogoSvg, class: "whatsapp-image", alt: "WhatsApp Logo" }))) : (h("div", { class: "chat-box" }, h("div", { class: "chat-box-header" }, h("span", { class: "chat-title" }, "Chat with Us"), h("span", { class: "chat-box-toggle", onClick: () => this.toggleChatBox() }, h("img", { src: closeSvg, alt: "Close" }))), h("div", { class: "chat-box-body" }, h("div", { class: "chat-box-overlay" }, h("div", { class: "chat-logs" }, h("form", null, h("div", { class: "form-group" }, h("label", null, h("span", { class: "required" }, "*"), "Name"), h("input", { type: "text", value: this.name, onInput: (e) => (this.name = e.target.value), class: "form-control" }), this.errors['name'] && h("div", { class: "error-message" }, this.errors['name'])), h("div", { class: "form-group" }, h("label", null, h("span", { class: "required" }, "*"), "Email"), h("input", { type: "email", value: this.email, onInput: (e) => (this.email = e.target.value), class: "form-control" }), this.errors['email'] && h("div", { class: "error-message" }, this.errors['email'])), h("div", { class: "form-group" }, h("label", null, h("span", { class: "required" }, "*"), "Mobile"), h("input", { type: "tel", value: this.mobile, onInput: (e) => (this.mobile = e.target.value), class: "form-control" }), this.errors['mobile'] && h("div", { class: "error-message" }, this.errors['mobile'])), h("div", { class: "form-group" }, h("label", null, h("span", { class: "required" }, "*"), "Message"), h("textarea", { rows: 3, value: this.message, onInput: (e) => (this.message = e.target.value), class: "form-control" }), this.errors['message'] && h("div", { class: "error-message" }, this.errors['message'])))), h("div", { class: "send-button" }, h("img", { src: sendSvg, alt: "Send", onClick: () => this.handleSubmit(), class: "send-image" })), h("div", { class: "chat-accreditation" }, "Powered by ", h("a", { href: "https://inleads.ai", target: "_blank" }, "inleads.ai"))))))));
}
static get style() { return WhatsappWidgetStyle0; }
}, [1, "whatsapp-widget", {
"phoneNumber": [1, "phone-number"],
"apiKey": [1, "api-key"],
"name": [32],
"email": [32],
"mobile": [32],
"message": [32],
"errors": [32],
"isChatBoxVisible": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["whatsapp-widget"];
components.forEach(tagName => { switch (tagName) {
case "whatsapp-widget":
if (!customElements.get(tagName)) {
customElements.define(tagName, WhatsappWidget$1);
}
break;
} });
}
defineCustomElement$1();
const WhatsappWidget = WhatsappWidget$1;
const defineCustomElement = defineCustomElement$1;
export { WhatsappWidget, defineCustomElement };
//# sourceMappingURL=whatsapp-widget.js.map