Tilda AI интеграция

<div id="ai-chat-widget"></div>
<script>
(function() {
  const API_KEY = 'sk-aitunnel-xxx'; // Используйте серверную прослойку!
  const API_URL = 'https://api.aitunnel.ru/v1/chat/completions';
  
  // Создаём виджет чата
  const widget = document.createElement('div');
  widget.innerHTML = `
    <div id="chat-toggle" style="position:fixed;bottom:20px;right:20px;width:60px;height:60px;
      background:#4F46E5;border-radius:50%;cursor:pointer;display:flex;align-items:center;
      justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:9999;">
      <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
      </svg>
    </div>
    <div id="chat-window" style="display:none;position:fixed;bottom:90px;right:20px;
      width:350px;height:450px;background:white;border-radius:12px;
      box-shadow:0 4px 24px rgba(0,0,0,0.15);z-index:9999;flex-direction:column;">
      <div style="padding:16px;background:#4F46E5;color:white;border-radius:12px 12px 0 0;">
        AI Консультант
      </div>
      <div id="chat-messages" style="flex:1;overflow-y:auto;padding:16px;"></div>
      <div style="padding:12px;border-top:1px solid #eee;display:flex;gap:8px;">
        <input id="chat-input" type="text" placeholder="Введите сообщение..."
          style="flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;">
        <button id="chat-send" style="padding:8px 16px;background:#4F46E5;color:white;
          border:none;border-radius:8px;cursor:pointer;">→</button>
      </div>
    </div>
  `;
  document.body.appendChild(widget);
  
  // Логика чата
  const toggle = document.getElementById('chat-toggle');
  const window = document.getElementById('chat-window');
  const messages = document.getElementById('chat-messages');
  const input = document.getElementById('chat-input');
  const send = document.getElementById('chat-send');
  
  toggle.onclick = () => {
    window.style.display = window.style.display === 'none' ? 'flex' : 'none';
  };
  
  async function sendMessage() {
    const text = input.value.trim();
    if (!text) return;
    
    messages.innerHTML += `<div style="margin:8px 0;text-align:right;">
      <span style="background:#4F46E5;color:white;padding:8px 12px;border-radius:12px;
        display:inline-block;max-width:80%;">${text}</span></div>`;
    input.value = '';
    
    // Отправка в AI
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + API_KEY
      },
      body: JSON.stringify({
        model: 'gpt-5-mini',
        messages: [{
          role: 'system',
          content: 'Ты консультант на сайте. Отвечай кратко и помогай посетителям.'
        }, {
          role: 'user',
          content: text
        }]
      })
    });
    
    const data = await response.json();
    const reply = data.choices[0].message.content;
    
    messages.innerHTML += `<div style="margin:8px 0;">
      <span style="background:#f1f1f1;padding:8px 12px;border-radius:12px;
        display:inline-block;max-width:80%;">${reply}</span></div>`;
    messages.scrollTop = messages.scrollHeight;
  }
  
  send.onclick = sendMessage;
  input.onkeypress = (e) => e.key === 'Enter' && sendMessage();
})();
</script>

// Используйте Cloudflare Workers или свой backend
const API_URL = 'https://your-backend.com/api/chat';

// Webhook для обработки формы
// Добавьте в Tilda: Настройки формы → Webhook