emmanuel.rizky
1df74e274d
This commit updates the form title in index.html to "Mayagen Demo Gratis". It also removes unused code related to user details from script.js, which was likely leftover from a previous feature and is no longer needed.
320 lines
12 KiB
JavaScript
320 lines
12 KiB
JavaScript
// Fungsi untuk menambahkan pesan baru ke area chat
|
|
function addMessage(content, isSent) {
|
|
const chatArea = document.querySelector('.chat-area');
|
|
|
|
// Buat elemen pesan
|
|
const message = document.createElement('div');
|
|
message.className = `message ${isSent ? 'sent' : 'received'}`;
|
|
|
|
// Ambil inisial dari nama pengguna yang mengisi form, atau default 'M'
|
|
let userInitial = 'M';
|
|
const leadData = localStorage.getItem('leadData');
|
|
if (leadData) {
|
|
const data = JSON.parse(leadData);
|
|
if (data.nama) {
|
|
userInitial = data.nama.split(' ').map(n => n[0]).join('').substring(0, 1);
|
|
}
|
|
}
|
|
|
|
// Tambahkan avatar kecil untuk pesan masuk
|
|
if (!isSent) {
|
|
const smallAvatar = document.createElement('div');
|
|
smallAvatar.className = 'small-avatar';
|
|
smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
|
|
message.appendChild(smallAvatar);
|
|
} else {
|
|
// Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
|
|
const personIcon = document.createElement('i');
|
|
personIcon.className = 'bi bi-person sent-user-icon';
|
|
message.appendChild(personIcon);
|
|
}
|
|
|
|
// Tambahkan konten pesan
|
|
const messageContent = document.createElement('div');
|
|
messageContent.className = 'message-content';
|
|
messageContent.textContent = content;
|
|
|
|
// Tambahkan waktu pesan
|
|
const now = new Date();
|
|
const time = now.getHours().toString().padStart(2, '0') + ':' +
|
|
now.getMinutes().toString().padStart(2, '0');
|
|
|
|
const messageTime = document.createElement('div');
|
|
messageTime.className = 'message-time';
|
|
messageTime.textContent = time;
|
|
|
|
// Gabungkan semua elemen
|
|
message.appendChild(messageContent);
|
|
message.appendChild(messageTime);
|
|
|
|
// Tambahkan ke area chat dengan animasi
|
|
chatArea.appendChild(message);
|
|
|
|
// Scroll ke bawah untuk melihat pesan terbaru
|
|
chatArea.scrollTop = chatArea.scrollHeight;
|
|
}
|
|
|
|
// Fungsi untuk menampilkan indikator mengetik
|
|
function showTypingIndicator() {
|
|
const chatArea = document.querySelector('.chat-area');
|
|
const typingIndicator = document.createElement('div');
|
|
typingIndicator.className = 'typing-indicator';
|
|
typingIndicator.innerHTML = `
|
|
<div class="typing-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
`;
|
|
chatArea.appendChild(typingIndicator);
|
|
chatArea.scrollTop = chatArea.scrollHeight;
|
|
return typingIndicator;
|
|
}
|
|
|
|
// Fungsi untuk menyembunyikan indikator mengetik
|
|
function hideTypingIndicator(indicator) {
|
|
if (indicator) {
|
|
indicator.remove();
|
|
}
|
|
}
|
|
|
|
// Generate unique session ID
|
|
function generateSessionId() {
|
|
return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
|
}
|
|
|
|
// Fungsi untuk mengirim pesan
|
|
async function sendMessage() {
|
|
const input = document.querySelector('.message-input');
|
|
const message = input.value.trim();
|
|
|
|
if (message) {
|
|
addMessage(message, true);
|
|
input.value = '';
|
|
toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
|
|
|
|
const typingIndicator = showTypingIndicator();
|
|
|
|
try {
|
|
// Get or create session ID
|
|
let sessionId = localStorage.getItem('chatSessionId');
|
|
if (!sessionId) {
|
|
sessionId = generateSessionId();
|
|
localStorage.setItem('chatSessionId', sessionId);
|
|
}
|
|
|
|
const response = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
text: message,
|
|
sessionId: sessionId
|
|
})
|
|
});
|
|
|
|
hideTypingIndicator(typingIndicator);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Cek apakah ada balasan dari bot
|
|
if (data && data.output) {
|
|
addMessage(data.output, false);
|
|
} else {
|
|
addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
|
|
}
|
|
|
|
} catch (error) {
|
|
hideTypingIndicator(typingIndicator);
|
|
console.error('Error sending message:', error);
|
|
addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to toggle attachment icons visibility
|
|
function toggleAttachmentIcons(show) {
|
|
const icons = document.querySelector('.attachment-icons');
|
|
if (icons) { // Check if icons element exists
|
|
if (show) {
|
|
icons.style.opacity = '1';
|
|
icons.style.transform = 'translateY(-50%)';
|
|
} else {
|
|
icons.style.opacity = '0';
|
|
icons.style.transform = 'translateY(-50%) translateX(20px)';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle viewport height for mobile browsers
|
|
const setVh = () => {
|
|
const vh = window.innerHeight * 0.01;
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
};
|
|
|
|
// Simulate explanatory demo conversation
|
|
const simulateConversation = async () => {
|
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
|
|
|
|
let typingIndicator = showTypingIndicator();
|
|
await new Promise(resolve => setTimeout(resolve, 2500));
|
|
hideTypingIndicator(typingIndicator);
|
|
addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 2500));
|
|
addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
|
|
|
|
typingIndicator = showTypingIndicator();
|
|
await new Promise(resolve => setTimeout(resolve, 3500));
|
|
hideTypingIndicator(typingIndicator);
|
|
addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
|
|
|
|
typingIndicator = showTypingIndicator();
|
|
await new Promise(resolve => setTimeout(resolve, 3500));
|
|
hideTypingIndicator(typingIndicator);
|
|
addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
|
|
|
|
typingIndicator = showTypingIndicator();
|
|
await new Promise(resolve => setTimeout(resolve, 2500));
|
|
hideTypingIndicator(typingIndicator);
|
|
addMessage('Apakah ada fitur atau channel spesifik yang ingin Anda ketahui lebih lanjut?', false);
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
addMessage('Silakan bertanya mengenai fitur-fitur Mayagen yang relevan dengan bidang bisnis yang Anda pilih.', false);
|
|
};
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const formSection = document.getElementById('form-section');
|
|
const chatSection = document.getElementById('chat-section');
|
|
const bidangBisnisSelect = document.getElementById('bidang-bisnis');
|
|
const otherBisnisWrapper = document.getElementById('other-bisnis-wrapper');
|
|
const otherBidangBisnisInput = document.getElementById('other-bidang-bisnis');
|
|
const messageInput = document.querySelector('.message-input');
|
|
const sendButton = document.querySelector('.send-btn');
|
|
|
|
bidangBisnisSelect.addEventListener('change', function() {
|
|
if (this.value === 'other') {
|
|
otherBisnisWrapper.style.display = 'block';
|
|
otherBidangBisnisInput.required = true;
|
|
} else {
|
|
otherBisnisWrapper.style.display = 'none';
|
|
otherBidangBisnisInput.required = false;
|
|
}
|
|
});
|
|
|
|
document.getElementById('demo-form').addEventListener('submit', async function(event) {
|
|
event.preventDefault(); // Mencegah form dari submit default
|
|
|
|
// Ambil data dari form
|
|
const nama = document.getElementById('nama').value;
|
|
const emailValue = document.getElementById('email').value;
|
|
let nomorHp = document.getElementById('nomor-hp').value;
|
|
let bidangBisnis = bidangBisnisSelect.value;
|
|
|
|
if (bidangBisnis === 'other') {
|
|
bidangBisnis = otherBidangBisnisInput.value;
|
|
}
|
|
|
|
// Format nomor HP
|
|
nomorHp = document.getElementById('nomor-hp').value;
|
|
if (nomorHp.startsWith('0')) {
|
|
nomorHp = '62' + nomorHp.slice(1);
|
|
}
|
|
|
|
// Validasi email
|
|
if (!isValidEmail(emailValue)) {
|
|
alert('Alamat email tidak valid.');
|
|
return;
|
|
}
|
|
|
|
// Simpan data ke localStorage (untuk tujuan demo)
|
|
const leadData = {
|
|
nama: nama,
|
|
email: emailValue,
|
|
nomorHp: nomorHp,
|
|
bidangBisnis: bidangBisnis,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
// Kirim data ke webhook sebelum melanjutkan
|
|
try {
|
|
const webhookResponse = await fetch('https://bot.kediritechnopark.com/webhook/2afaf386-603b-484c-af51-6dd0f48fae20', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(leadData)
|
|
});
|
|
|
|
if (!webhookResponse.ok) {
|
|
console.error('Webhook error:', webhookResponse.status, webhookResponse.statusText);
|
|
// Handle error appropriately, e.g., display a message to the user
|
|
alert('Terjadi kesalahan saat mengirim data ke server. Silakan coba lagi.');
|
|
return; // Prevent navigation to chat page
|
|
}
|
|
|
|
console.log('Webhook berhasil dikirim!');
|
|
|
|
} catch (error) {
|
|
console.error('Webhook error:', error);
|
|
// Handle error appropriately
|
|
alert('Tidak dapat terhubung ke server. Silakan coba lagi nanti.');
|
|
return; // Prevent navigation to chat page
|
|
}
|
|
|
|
// Sembunyikan form dan tampilkan chat
|
|
formSection.style.display = 'none';
|
|
chatSection.style.display = 'flex'; // Use flex to maintain column layout
|
|
|
|
// Initialize chat functionality
|
|
setVh();
|
|
window.addEventListener('resize', setVh);
|
|
window.addEventListener('load', setVh);
|
|
|
|
toggleAttachmentIcons(true);
|
|
const chatArea = document.querySelector('.chat-area');
|
|
if (chatArea) {
|
|
chatArea.scrollTop = chatArea.scrollHeight;
|
|
}
|
|
|
|
// Add event listeners for chat
|
|
if (sendButton) {
|
|
sendButton.addEventListener('click', sendMessage);
|
|
}
|
|
if (messageInput) {
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
messageInput.addEventListener('input', function() {
|
|
if (this.value.trim() !== '') {
|
|
toggleAttachmentIcons(false);
|
|
} else {
|
|
toggleAttachmentIcons(true);
|
|
}
|
|
});
|
|
messageInput.addEventListener('focus', function() {
|
|
setTimeout(() => {
|
|
this.scrollIntoView({behavior: 'smooth', block: 'end'});
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
simulateConversation();
|
|
});
|
|
});
|
|
|
|
// Function to validate email format
|
|
function isValidEmail(email) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
}
|