Embed

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Immontes Immobilien Chatbot</title>
  <style>
    #chatbot-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #2e86de;
      color: white;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      font-size: 30px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    #chat-window {
      display: none;
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 350px;
      max-height: 500px;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #chat-messages {
      padding: 10px;
      flex-grow: 1;
      overflow-y: auto;
      font-family: sans-serif;
      font-size: 14px;
    }

    #chat-input {
      display: flex;
      border-top: 1px solid #ccc;
    }

    #chat-input input {
      flex-grow: 1;
      padding: 10px;
      border: none;
      font-size: 14px;
    }

    #chat-input button {
      padding: 10px;
      background-color: #2e86de;
      color: white;
      border: none;
      cursor: pointer;
    }

    .user {
      text-align: right;
      color: #2e86de;
    }

    .bot {
      text-align: left;
      color: #333;
    }
  </style>
</head>
<body>

<button id="chatbot-button">💬</button>

<div id="chat-window">
  <div id="chat-messages"></div>
  <div id="chat-input">
    <input type="text" id="user-input" placeholder="Ihre Frage...">
    <button onclick="sendMessage()">➤</button>
  </div>
</div>

<script>
  const OPENAI_API_KEY = "DEIN_API_KEY_HIER_EINFÜGEN"; // ⚠️ Ersetze das mit deinem OpenAI API Key

  const button = document.getElementById("chatbot-button");
  const chatWindow = document.getElementById("chat-window");
  const messages = document.getElementById("chat-messages");
  const input = document.getElementById("user-input");

  button.addEventListener("click", () => {
    chatWindow.style.display = chatWindow.style.display === "none" ? "flex" : "none";
  });

  async function sendMessage() {
    const text = input.value.trim();
    if (!text) return;

    appendMessage("user", text);
    input.value = "";

    const response = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [
          {
            role: "system",
            content: `Du bist ein hilfsbereiter Immobilien-Chatbot für die Webseite einer Immobilienfirma aus Tirol. Beantworte alle Fragen zu Immobilienverkauf, -kauf, Maklerrecht, Marktwert, Abwicklung usw. Nutze klare und seriöse Sprache, aber bleibe freundlich.`
          },
          {
            role: "user",
            content: text
          }
        ],
        temperature: 0.6
      })
    });

    const data = await response.json();
    const reply = data.choices[0].message.content;
    appendMessage("bot", reply);
  }

  function appendMessage(sender, text) {
    const msg = document.createElement("div");
    msg.className = sender;
    msg.textContent = text;
    messages.appendChild(msg);
    messages.scrollTop = messages.scrollHeight;
  }
</script>

</body>
</html>


Timeline

IMMONTES