|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>Chatbot Embed with AnythingLLM</title> |
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: #f4f4f4; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
padding: 1rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
main { |
|
|
flex: 1; |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot-widget { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
|
|
|
.chatbot-button { |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
transition: background-color 0.3s ease; |
|
|
font-size: 18px; |
|
|
} |
|
|
|
|
|
.chatbot-button:hover { |
|
|
background-color: #45a049; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<header> |
|
|
<h1>Welcome to Our Website</h1> |
|
|
<p>Interact with our chatbot below!</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main> |
|
|
<h2>About Us</h2> |
|
|
<p>Here is some information about our services...</p> |
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="chatbot-widget"> |
|
|
|
|
|
<button class="chatbot-button" id="open-chatbot">💬</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script |
|
|
data-embed-id="f873bd25-2eb1-4e69-9f13-114ca6585a5b" |
|
|
data-base-api-url="https://severian-anything.hf.space/api/embed" |
|
|
src="https://severian-anything.hf.space/embed/anythingllm-chat-widget.min.js"> |
|
|
</script> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const chatbotButton = document.getElementById('open-chatbot'); |
|
|
|
|
|
|
|
|
chatbotButton.addEventListener('click', function() { |
|
|
|
|
|
const chatbotIframe = document.querySelector('iframe[src*="anythingllm-chat-widget"]'); |
|
|
if (chatbotIframe) { |
|
|
if (chatbotIframe.style.display === 'none' || !chatbotIframe.style.display) { |
|
|
chatbotIframe.style.display = 'block'; |
|
|
} else { |
|
|
chatbotIframe.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
