<!-- 🌟 Embed Code Box for Users -->
<div style="max-width: 600px; margin: 40px auto; padding: 20px; background: #f9fafb; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif;">
<h2 style="margin-bottom: 12px; color: #111827;">Embed Your Chatbot</h2>
<p style="margin-bottom: 16px; color: #4b5563; font-size: 14px;">
Paste the following script <strong>before the <code></body></code> tag</strong> of your website.
</p>
<div style="position: relative;">
<textarea id="embedCode" readonly style="width: 100%; padding: 12px; font-size: 13px; border-radius: 8px; border: 1px solid #d1d5db; background: #ffffff; color: #1f2937; font-family: monospace; resize: none;" rows="26">
<!-- 🌟 Voiceflow Webchat Container -->
<div id="vf-chat" style="position: fixed; bottom: 24px; right: 24px; z-index: 9999;"></div>
<!-- 🌟 Voiceflow Dynamic Chatbot -->
<script type="module" src="https://cdn.voiceflow.com/widget-next/bundle.mjs"></script>
<script type="module">
const businessID = localStorage.getItem('businessID')?.trim();
const businessName = localStorage.getItem('businessName')?.trim() || 'Our Store';
const specialty = localStorage.getItem('specialty')?.trim() || 'Our Specialty';
const websiteURL = localStorage.getItem('websiteURL') || 'Our website';
if (!businessID) {
console.error('❌ No businessID found in localStorage. Cannot load chatbot.');
} else {
console.log('✅ Using businessID:', businessID);
window.voiceflow.chat.load({
verify: { projectID: '680e1f986074d454a37ba5ec' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
userID: businessID,
assistant: { persistence: 'localStorage' },
render: { container: '#vf-chat' },
launch: {
event: {
type: 'launch',
payload: {
businessID: businessID,
businessName: businessName,
specialty: specialty,
websiteURL: websiteURL
}
}
}
});
}
</script>
</textarea>
<button onclick="copyEmbedCode()" title="Copy to clipboard"
style="position: absolute; top: 8px; right: 8px; padding: 6px 10px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;">
📝 Copy
</button>
</div>
<p id="copySuccess" style="color: #16a34a; margin-top: 10px; font-size: 13px; display: none;">✅ Script copied to clipboard!</p>
</div>
<!-- 📋 Script to copy embed code -->
<script>
function copyEmbedCode() {
const textarea = document.getElementById("embedCode");
navigator.clipboard.writeText(textarea.value).then(() => {
const successMsg = document.getElementById("copySuccess");
successMsg.style.display = "block";
setTimeout(() => {
successMsg.style.display = "none";
}, 2500);
}).catch((err) => {
console.error('❌ Failed to copy:', err);
});
}
</script>