Gallery

</body>:

Only data-whatsapp is required. Everything else has a sensible default
and can be skipped.

OPTIONAL ATTRIBUTES:
data-whatsapp -> your WhatsApp number, country code + number, no + or spaces (REQUIRED)
data-brand -> your brand name shown in the chat header (default: "Kalvin Cross")
data-color -> hex color for buttons/header (default: "#111111")
data-position -> "right" or "left" (default: "right")
data-greeting -> first message the bot sends (has a default)
data-message -> pre-filled WhatsApp message (has a default)
========================================================================== */

(function () {
"use strict";

// ------------------------------------------------------------------------
// 1. READ CONFIG FROM THE <script> TAG ITSELF — no file editing required
// ------------------------------------------------------------------------
const scriptTag = document.currentScript;

function attr(name, fallback) {
const v = scriptTag && scriptTag.getAttribute(name);
return v && v.trim() ? v.trim() : fallback;
}

const CONFIG = {
brandName: attr("data-brand", "Kalvin Cross"),
accentColor: attr("data-color", "#111111"),
textColor: "#ffffff",
logoInitial: attr("data-initial", (attr("data-brand", "Kalvin Cross").match(/\b\w/g) || ["K", "C"]).slice(0, 2).join("").toUpperCase()),
whatsappNumber: attr("data-whatsapp", ""),
whatsappDefaultMessage: attr("data-message", "Hi! I need help with my order."),
greeting: attr("data-greeting", "Hey! Welcome to " + attr("data-brand", "Kalvin Cross") + " ✨ How can I help you today?"),
position: attr("data-position", "right"),

quickReplies: [
"Track my order",
"Shipping & delivery time",
"Returns & exchanges",
"Sizing help",
"Talk to a human"
],

// Keyword -> answer FAQ engine. To customize wording without touching
// code, edit the "answer" strings below once and re-upload the file —
// every page using the script tag updates automatically.
faq: [
{
keywords: ["track", "order status", "where is my order", "shipment", "tracking"],
answer: "You can track your order using the tracking link sent to your email/WhatsApp after dispatch. If you haven't received it yet, share your Order ID and I'll get our team to check it for you."
},
{
keywords: ["shipping", "delivery", "how long", "dispatch"],
answer: "Orders are processed within 1-2 business days and typically delivered within 5-8 business days across India. You'll get a tracking link once your order ships."
},
{
keywords: ["return", "exchange", "refund"],
answer: "We accept returns/exchanges within 7 days of delivery for unused items in original packaging. Refunds are processed within 5-7 business days after we receive the item. Want me to connect you to start a return?"
},
{
keywords: ["size", "sizing", "fit", "measurement"],
answer: "Our pieces run true to standard Indian sizing. Check the size chart on the product page for exact chest/length measurements. Between sizes? I'd recommend sizing up for a relaxed fit."
},
{
keywords: ["material", "fabric", "quality"],
answer: "Each piece is made with premium, breathable fabric and printed using high-durability techniques so the design stays sharp wash after wash."
},
{
keywords: ["payment", "cod", "cash on delivery", "upi"],
answer: "We accept UPI, cards, net banking, and Cash on Delivery (COD) on eligible orders/pincodes."
},
{
keywords: ["custom", "customi", "personalize", "own design"],
answer: "Yes, we do custom prints! Share your design idea over WhatsApp and our team will send you a mockup and quote."
},
{
keywords: ["cancel"],
answer: "Orders can be cancelled within a few hours of placing them, before they're shipped. Share your Order ID on WhatsApp and we'll cancel it for you if it's still eligible."
},
{
keywords: ["price", "cost", "discount", "coupon", "offer"],
answer: "Current prices and any active offers are shown right on the product page. Follow us on Instagram for early access to drops and discount codes!"
},
{
keywords: ["contact", "human", "agent", "support", "help me", "talk to"],
answer: "Sure — tap the WhatsApp button below and our team will help you directly."
}
],

fallback: "I don't have an exact answer for that yet — tap below to chat with our team on WhatsApp and they'll sort you out."
};

if (!CONFIG.whatsappNumber) {
console.warn("[Chatbot] Missing data-whatsapp attribute on the script tag. The WhatsApp handoff button will not work until you add it, e.g.:\n<script src=\"kalvin-cross-chatbot.js\" data-whatsapp=\"911234567890\" defer></script>");
}

// ------------------------------------------------------------------------
// 2. STYLES
// ------------------------------------------------------------------------
const css = `
.kc-chat-btn {
position: fixed; bottom: 20px; ${CONFIG.position}: 20px; z-index: 999999;
width: 58px; height: 58px; border-radius: 50%;
background: ${CONFIG.accentColor}; color: ${CONFIG.textColor};
display: flex; align-items: center; justify-content: center;
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
border: none; transition: transform 0.2s ease;
}
.kc-chat-btn:hover { transform: scale(1.06); }
.kc-chat-window {
position: fixed; bottom: 90px; ${CONFIG.position}: 20px; z-index: 999999;
width: 340px; max-width: 92vw; height: 480px; max-height: 75vh;
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
display: none; flex-direction: column;
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
}
.kc-chat-window.kc-open { display: flex; }
.kc-chat-header {
background: ${CONFIG.accentColor}; color: ${CONFIG.textColor};
padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
}
.kc-chat-header-title { font-weight: 700; font-size: 15px; letter-spacing: 0.5px; }
.kc-chat-header-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.kc-close-btn { cursor: pointer; background: none; border: none; color: ${CONFIG.textColor}; font-size: 20px; line-height: 1; }
.kc-chat-body { flex: 1; overflow-y: auto; padding: 14px; background: #f7f7f7; }
.kc-msg { max-width: 80%; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; }
.kc-msg-bot { background: #fff; border: 1px solid #eaeaea; border-bottom-left-radius: 3px; }
.kc-msg-user { background: ${CONFIG.accentColor}; color: ${CONFIG.textColor}; margin-left: auto; border-bottom-right-radius: 3px; }
.kc-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kc-quick-reply {
border: 1px solid ${CONFIG.accentColor}; color: ${CONFIG.accentColor}; background: #fff;
border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.kc-quick-reply:hover { background: ${CONFIG.accentColor}; color: ${CONFIG.textColor}; }
.kc-chat-footer { display: flex; border-top: 1px solid #eee; padding: 8px; gap: 8px; background: #fff; }
.kc-chat-input {
flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 9px 14px;
font-size: 13px; outline: none;
}
.kc-send-btn {
background: ${CONFIG.accentColor}; color: ${CONFIG.textColor}; border: none;
border-radius: 20px; padding: 0 16px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.kc-whatsapp-btn {
display: block; text-align: center; background: #25D366; color: #fff;
padding: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none;
}
@media (max-width: 400px) {
.kc-chat-window { width: 94vw; ${CONFIG.position}: 3vw; bottom: 84px; }
}
`;
const styleTag = document.createElement("style");
styleTag.textContent = css;
document.head.appendChild(styleTag);

// ------------------------------------------------------------------------
// 3. MARKUP
// ------------------------------------------------------------------------
const waLink = CONFIG.whatsappNumber
? `https://wa.me/${CONFIG.whatsappNumber}?text=${encodeURIComponent(CONFIG.whatsappDefaultMessage)}`
: "#";

const btn = document.createElement("button");
btn.className = "kc-chat-btn";
btn.setAttribute("aria-label", "Open support chat");
btn.textContent = CONFIG.logoInitial;

const win = document.createElement("div");
win.className = "kc-chat-window";
win.innerHTML = `
<div class="kc-chat-header">
<div>
<div class="kc-chat-header-title">${CONFIG.brandName} Support</div>
<div class="kc-chat-header-sub">Usually replies in a few minutes</div>
</div>
<button class="kc-close-btn" aria-label="Close chat">×</button>
</div>
<div class="kc-chat-body" id="kc-chat-body"></div>
<a class="kc-whatsapp-btn" href="${waLink}" target="_blank" rel="noopener">Continue on WhatsApp →</a>
<div class="kc-chat-footer">
<input class="kc-chat-input" id="kc-chat-input" type="text" placeholder="Type your question..." />
<button class="kc-send-btn" id="kc-send-btn">Send</button>
</div>
`;

document.body.appendChild(btn);
document.body.appendChild(win);

const body = win.querySelector("#kc-chat-body");
const input = win.querySelector("#kc-chat-input");
const sendBtn = win.querySelector("#kc-send-btn");
const closeBtn = win.querySelector(".kc-close-btn");

// ------------------------------------------------------------------------
// 4. CHAT LOGIC
// ------------------------------------------------------------------------
function addMessage(text, sender) {
const el = document.createElement("div");
el.className = "kc-msg " + (sender === "user" ? "kc-msg-user" : "kc-msg-bot");
el.textContent = text;
body.appendChild(el);
body.scrollTop = body.scrollHeight;
}

function addQuickReplies() {
const wrap = document.createElement("div");
wrap.className = "kc-quick-replies";
CONFIG.quickReplies.forEach((label) => {
const b = document.createElement("button");
b.className = "kc-quick-reply";
b.textContent = label;
b.onclick = () => handleUserMessage(label);
wrap.appendChild(b);
});
body.appendChild(wrap);
body.scrollTop = body.scrollHeight;
}

function handleUserMessage(text) {
if (!text.trim()) return;
addMessage(text, "user");
input.value = "";
setTimeout(() => {
addMessage(getBotReply(text), "bot");
}, 350);
}

let started = false;
function openChat() {
win.classList.add("kc-open");
if (!started) {
started = true;
addMessage(CONFIG.greeting, "bot");
addQuickReplies();
}
}

btn.addEventListener("click", () => {
if (win.classList.contains("kc-open")) {
win.classList.remove("kc-open");
} else {
openChat();
}
});

closeBtn.addEventListener("click", () => win.classList.remove("kc-open"));

sendBtn.addEventListener("click", () => handleUserMessage(input.value));
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") handleUserMessage(input.value);
});
})();

Did you find your Favorite Oublé?

Follow the Story

Oublé