<!DOCTYPE html>
<meta charset=”UTF-8″>
<title>AI Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f8f9fa;
padding: 40px;
}
.chatbox {
max-width: 420px;
margin: auto;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
textarea {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
resize: none;
}
button {
margin-top: 10px;
padding: 10px 15px;
border: none;
border-radius: 8px;
background: #4f46e5;
color: white;
cursor: pointer;
}
button:hover {
background: #4338ca;
}
.reply {
margin-top: 20px;
background: #f1f1f1;
padding: 10px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class=”chatbox”>
<h3>💬 AI Chatbot</h3>
<textarea id=”msg” rows=”3″ placeholder=”Ask me anything…”></textarea>
<button id=”send”>Send</button>
<div id=”reply” class=”reply”></div>
</div>
<script>
// ——————————————
// ✅ OPTION 1: Using free CORS proxy (works immediately)
const makeWebhook = “https://api.allorigins.win/raw?url=” + encodeURIComponent(“https://hook.eu2.make.com/gm6wgpmvuwplc7a9u7k61m0j6t4gd7bg”);
// ✅ OPTION 2 (better, faster):
// Replace above line with your own proxy URL from Vercel (see Part 2)
// ——————————————
document.getElementById(“send”).onclick = async () => {
const msg = document.getElementById(“msg”).value.trim();
if (!msg) return alert(“Please enter a message!”);
document.getElementById(“reply”).innerText = “Thinking…”;
try {
const res = await fetch(makeWebhook, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({ message: msg })
});
const data = await res.json();
console.log(data);
document.getElementById(“reply”).innerText = data.reply || “(No reply received)”;
} catch (err) {
console.error(err);
document.getElementById(“reply”).innerText = “⚠️ Error contacting AI agent.”;
}
};
</script>
</body>
</html>