@inleads/inleads-widgets
Version:
Widgets for chatbot, WhatsApp, nps, contact-form
132 lines (131 loc) • 6.16 kB
JavaScript
import { h } from "@stencil/core";
import whatsappImage from "./assets/images/whatsapp-logo.svg";
import close from "./assets/images/close.svg";
import send from "./assets/images/send.svg";
export class WhatsappWidget {
constructor() {
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: whatsappImage, 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: close, 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: send, 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 is() { return "whatsapp-widget"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["whatsapp-widget.css"]
};
}
static get styleUrls() {
return {
"$": ["whatsapp-widget.css"]
};
}
static get properties() {
return {
"phoneNumber": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "phone-number",
"reflect": false
},
"apiKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "api-key",
"reflect": false
}
};
}
static get states() {
return {
"name": {},
"email": {},
"mobile": {},
"message": {},
"errors": {},
"isChatBoxVisible": {}
};
}
}
//# sourceMappingURL=whatsapp-widget.js.map