Βάλτε το chatbot
στο δικό σας site.

ΕΠΙΣΚΟΠΗΣΗ

Τι χρειάζεται για να εμφανιστεί το chat;

Δεν εγκαθιστάτε WordPress plugin. Το widget είναι ανεξάρτητο JavaScript και προσθέτει μόνο του το floating κουμπί και το chat panel στο document.body.

ΒΗΜΑ 01

Αντιγράψτε τα αρχεία και το snippet

Κατεβάστε τα δύο αρχεία της ίδιας έκδοσης και βάλτε τα, για παράδειγμα, στον δημόσιο φάκελο /assets/ai-chat/ του site σας.

Στο κοινό layout της σελίδας προσθέστε τον παρακάτω κώδικα. Αλλάξτε τα κείμενα του brand και το proxyUrl αν χρησιμοποιείτε διαφορετική διαδρομή.

<link rel="stylesheet" href="/assets/ai-chat/chat-widget.css">
<script>
  window.aiChatWidgetConfig = {
    enabled: true,
    mode: 'site-proxy',
    proxyUrl: '/api/chatbot/chat',
    companyName: 'Η εταιρεία σας',
    welcomeMessage: 'Γεια σας! Πώς μπορώ να βοηθήσω;',
    storeTranscript: false,
    timeout: 30
  };
</script>
<script defer src="/assets/ai-chat/chat-widget.js"></script>

Βάλτε το CSS στο <head> και το config μαζί με το JS πριν από το </body>. Το config πρέπει να οριστεί πριν φορτωθεί το widget script. Φορτώστε τα αρχεία μία φορά ανά σελίδα.

ΒΗΜΑ 02

Σε ποιο αρχείο του site μπαίνει;

Δεν χρειάζεται να γράψετε χειροκίνητα container <div>. Για επιπλέον κουμπί που ανοίγει το chat, προσθέστε <button type="button" data-ai-chat-open>Μιλήστε μαζί μας</button>.

ΒΗΜΑ 03

Συνδέστε το site με το backend

Στο προτεινόμενο site-proxy mode, ο browser καλεί endpoint στο ίδιο domain, όπως /api/chatbot/chat. Ο server του site προωθεί το αίτημα στο {BACKEND_URL}/chat και επιστρέφει την απάντηση. Το backend URL και τυχόν API key μένουν στον server.

Ο endpoint μπορεί να είναι Laravel route/controller, custom PHP route ή reverse proxy. Πρέπει να δέχεται JSON POST, να προωθεί το X-Chat-History-Token όταν υπάρχει και να επιστρέφει JSON. Εφαρμόστε όριο μηνύματος, rate limit, timeout και ασφαλή μηνύματα σφάλματος. Το URL του backend ορίζεται μόνο στη ρύθμιση του server.

ΕΝΑΛΛΑΚΤΙΚΗ

Direct mode για στατικό HTML site

Αν δεν έχετε server, ο browser μπορεί να καλεί το chatbot backend απευθείας. Αντικαταστήστε μόνο τις δύο ρυθμίσεις στο προηγούμενο snippet:

mode: 'direct',
backendUrl: 'https://your-chatbot-backend.example'

Το backend πρέπει να επιτρέπει με CORS το ακριβές origin του site σας, POST/OPTIONS και τα headers Content-Type, X-Chat-History-Token. Το backend URL είναι ορατό στον browser. Μην βάλετε μυστικά ή API keys στο JavaScript. Το base URL δεν τελειώνει σε /chat· το widget το προσθέτει μόνο του.

ΠΡΟΣΑΡΜΟΓΗ

Κείμενα, εμφάνιση και απόρρητο

Στο aiChatWidgetConfig μπορείτε να ορίσετε companyName, companySubtitle, logoUrl, bubbleIconUrl, welcomeMessage, readyQuestions, disclaimer, onlineText, timeout και μεταφράσεις στο i18n. Για τα χρώματα χρησιμοποιήστε CSS variables μετά το widget CSS:

:root {
  --ai-chat-primary: #193b7a;
  --ai-chat-secondary: #d91f3d;
  --ai-chat-bg: #f8fafc;
  --ai-chat-text: #1e293b;
}

Το session ID αποθηκεύεται στο localStorage και το history token στο sessionStorage. Με storeTranscript: true αποθηκεύεται και το κείμενο της συνομιλίας στο localStorage. Κρατήστε το false αν δεν έχετε αποφασίσει ότι η αποθήκευση συνομιλιών καλύπτει τις απαιτήσεις απορρήτου σας.

ΤΕΧΝΙΚΟ ΣΥΜΒΟΛΑΙΟ

Τι στέλνει και τι περιμένει το widget

Το πρώτο μήνυμα δεν έχει history token. Στα επόμενα requests το widget στέλνει το historyAccessToken ως header αν το backend το επέστρεψε στην προηγούμενη απάντηση.

POST /chat
Content-Type: application/json
X-Chat-History-Token: <μόνο αν έχει δοθεί από το backend>

{
  "sessionId": "uuid-v4",
  "message": "Γεια σας",
  "channel": "chat"
}

{
  "sessionId": "uuid-v4",
  "text": "Γεια σας!",
  "channel": "chat",
  "historyAccessToken": "opaque-token (προαιρετικό)"
}

Το text πρέπει να είναι string. Γίνεται δεκτό και array με την απάντηση ως πρώτο στοιχείο. Για σφάλμα επιστρέψτε κατάλληλο HTTP status και ασφαλές JSON {"message":"..."}. Μην επιστρέφετε εσωτερικές λεπτομέρειες που θα εμφανιστούν στον επισκέπτη.