<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<title>Visual Production Chatbot Widget</title>
<style>
/* ===== CHATBOT WIDGET ===== */
#vp-chat-btn {
position: fixed;
bottom: 28px;
right: 28px;
width: 58px;
height: 58px;
background: #1a1a2e;
border-radius: 50%;
border: 2px solid #e0a800;
cursor: pointer;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
#vp-chat-btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 28px rgba(224,168,0,0.35);
}
#vp-chat-btn svg { width: 26px; height: 26px; }
#vp-chat-window {
position: fixed;
bottom: 100px;
right: 28px;
width: 360px;
max-height: 520px;
background: #0f0f1a;
border: 1px solid #2a2a4a;
border-radius: 16px;
box-shadow: 0 12px 48px rgba(0,0,0,0.6);
z-index: 99998;
display: none;
flex-direction: column;
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
}
#vp-chat-window.open { display: flex; }
#vp-chat-header {
background: linear-gradient(135deg, #1a1a2e, #16213e);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #2a2a4a;
}
#vp-chat-header .avatar {
width: 36px; height: 36px;
background: #e0a800;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
#vp-chat-header .info { flex: 1; }
#vp-chat-header .name {
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
}
#vp-chat-header .status {
color: #4ade80;
font-size: 11px;
}
#vp-chat-header .close-btn {
background: none; border: none;
color: #888; cursor: pointer; font-size: 20px;
line-height: 1; padding: 2px 6px;
}
#vp-chat-header .close-btn:hover { color: #fff; }
#vp-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 280px;
max-height: 360px;
}
#vp-chat-messages::-webkit-scrollbar { width: 4px; }
#vp-chat-messages::-webkit-scrollbar-track { background: transparent; }
#vp-chat-messages::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 4px; }
.msg {
max-width: 85%;
padding: 10px 14px;
border-radius: 12px;
font-size: 13.5px;
line-height: 1.5;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: none; } }
.msg.bot {
background: #1e1e35;
color: #d0d0e8;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.msg.user {
background: #e0a800;
color: #0f0f1a;
align-self: flex-end;
font-weight: 500;
border-bottom-right-radius: 4px;
}
.msg.typing {
background: #1e1e35;
color: #888;
align-self: flex-start;
font-style: italic;
font-size: 12px;
}
#vp-chat-input-area {
padding: 12px 14px;
border-top: 1px solid #2a2a4a;
display: flex;
gap: 8px;
background: #0f0f1a;
}
#vp-chat-input {
flex: 1;
background: #1e1e35;
border: 1px solid #2a2a4a;
border-radius: 8px;
padding: 9px 12px;
color: #d0d0e8;
font-size: 13px;
outline: none;
resize: none;
font-family: inherit;
transition: border-color 0.2s;
}
#vp-chat-input:focus { border-color: #e0a800; }
#vp-chat-input::placeholder { color: #555; }
#vp-send-btn {
background: #e0a800;
border: none;
border-radius: 8px;
width: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
flex-shrink: 0;
}
#vp-send-btn:hover { background: #c99600; }
#vp-send-btn svg { width: 18px; height: 18px; }
#vp-chat-footer {
text-align: center;
font-size: 10px;
color: #333;
padding: 6px;
background: #0a0a14;
}
@media (max-width: 420px) {
#vp-chat-window { width: calc(100vw - 20px); right: 10px; bottom: 90px; }
}
</style>
</head>
<body>
<!-- Chat Button -->
<button id="vp-chat-btn" onclick="toggleChat()" title="Pitajte nas">
<svg viewBox="0 0 24 24" fill="none" stroke="#e0a800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</button>
<!-- Chat Window -->
<div id="vp-chat-window">
<div id="vp-chat-header">
<div class="avatar">🎬</div>
<div class="info">
<div class="name">Visual Production Asistent</div>
<div class="status">● Online</div>
</div>
<button class="close-btn" onclick="toggleChat()">×</button>
</div>
<div id="vp-chat-messages">
<div class="msg bot">Zdravo! 👋 Ja sam asistent Visual Production agencije. Mogu da vam pomognem sa informacijama o našim uslugama, projektima ili kako da nas kontaktirate. Kako mogu da vam pomognem?</div>
</div>
<div id="vp-chat-input-area">
<textarea id="vp-chat-input" placeholder="Napišite poruku..." rows="1" onkeydown="handleKey(event)"></textarea>
<button id="vp-send-btn" onclick="sendMessage()">
<svg viewBox="0 0 24 24" fill="none" stroke="#0f0f1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"/>
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
</svg>
</button>
</div>
<div id="vp-chat-footer">Powered by Gemini AI · Visual Production</div>
</div>
<script>
const API_KEY = 'AIzaSyDf179j-zz1_k1tky5D16UfrINakWk5uSM';
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${API_KEY}`;
const SYSTEM_PROMPT = `Ti si ljubazni asistent agencije Visual Production (visualproduction.rs).
O agenciji:
- Visual Production je kreativna agencija koja se bavi dizajnom, video produkcijom i digitalnim marketingom
- Usluge: Branding i identitet, E-commerce shop, UI/UX dizajn, Digitalni marketing
- Sajt: https://www.visualproduction.rs
- Kontakt: https://www.visualproduction.rs/contact-us/
- Projekti: Digital Presence Design, Business Boost Design, Smart Web Solutions, Web Design For Business
- Blog teme: brendiranje, web dizajn, SEO marketing
Pravila:
- Uvek odgovaraj na srpskom jeziku
- Budi kratak, ljubazan i profesionalan
- Ako ne znaš nešto specifično, uputi posetioce na kontakt stranicu
- Ne izmišljaj cene niti detalje koje ne znaš
- Ohrabri posetioce da kontaktiraju agenciju za konkretne ponude`;
let conversationHistory = [];
let isOpen = false;
function toggleChat() {
isOpen = !isOpen;
const win = document.getElementById('vp-chat-window');
if (isOpen) {
win.classList.add('open');
document.getElementById('vp-chat-input').focus();
} else {
win.classList.remove('open');
}
}
function handleKey(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}
function appendMessage(text, type) {
const msgs = document.getElementById('vp-chat-messages');
const div = document.createElement('div');
div.className = `msg ${type}`;
div.textContent = text;
msgs.appendChild(div);
msgs.scrollTop = msgs.scrollHeight;
return div;
}
async function sendMessage() {
const input = document.getElementById('vp-chat-input');
const text = input.value.trim();
if (!text) return;
input.value = '';
input.style.height = 'auto';
appendMessage(text, 'user');
const typing = appendMessage('Pišem odgovor...', 'typing');
conversationHistory.push({ role: 'user', parts: [{ text }] });
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
system_instruction: { parts: [{ text: SYSTEM_PROMPT }] },
contents: conversationHistory,
generationConfig: {
temperature: 0.7,
maxOutputTokens: 400
}
})
});
const data = await response.json();
if (data.candidates && data.candidates[0]) {
const reply = data.candidates[0].content.parts[0].text;
conversationHistory.push({ role: 'model', parts: [{ text: reply }] });
typing.remove();
appendMessage(reply, 'bot');
} else {
typing.remove();
appendMessage('Izvините, došlo je do greške. Pokušajte ponovo ili nas kontaktirajte direktno.', 'bot');
}
} catch (err) {
typing.remove();
appendMessage('Greška u konekciji. Proverite internet vezu i pokušajte ponovo.', 'bot');
}
}
</script>
</body>
</html>
Blog Comment (01)
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.