Προσαρμοσμένο Κουμπί Ανοίγματος

Προσθέστε ένα κουμπί ή σύνδεσμο οπουδήποτε στον ιστότοπό σας για να ανοίξετε το widget συνομιλίας

Από προεπιλογή, οι επισκέπτες ανοίγουν τη συνομιλία κάνοντας κλικ στο αιωρούμενο εικονίδιο συνομιλίας στη γωνία της σελίδας σας. Μπορείτε όμως να προσθέσετε το δικό σας προσαρμοσμένο κουμπί ή σύνδεσμο — στη γραμμή πλοήγησης, στην κεντρική ενότητα, στην περιοχή CTA ή οπουδήποτε αλλού — που ανοίγει το widget συνομιλίας όταν κάνετε κλικ.

Συμβουλή: Αυτό είναι εξαιρετικό για την προσθήκη συνδέσμου "Συνομιλήστε μαζί μας" στη γραμμή πλοήγησης του ιστότοπού σας, ενός κουμπιού "Λάβετε βοήθεια" σε σελίδα προϊόντος ή ενός CTA που ανοίγει απευθείας τη συνομιλία.

Πώς λειτουργεί

Μόλις εγκατασταθεί το script widget Asyntai στη σελίδα σας, εκθέτει ένα καθολικό JavaScript API στο window.AsyntaiWidget. Μπορείτε να καλείτε τις μεθόδους του για να ελέγχετε το widget συνομιλίας προγραμματιστικά.

Διαθέσιμες Μέθοδοι

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

Βασικό Παράδειγμα

Προσθέστε ένα κουμπί οπουδήποτε στο HTML σας και επισυνάψτε έναν χειριστή κλικ που καλεί το window.AsyntaiWidget.open():

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

Αυτό ήταν. Όταν ένας επισκέπτης κάνει κλικ στο κουμπί, θα ανοίξει το widget συνομιλίας.

Παράδειγμα Γραμμής Πλοήγησης

Προσθέστε έναν σύνδεσμο "Συνομιλήστε μαζί μας" στην πλοήγηση του ιστότοπού σας:

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

Σημείωση: Χρησιμοποιήστε το event.preventDefault() σε συνδέσμους αγκύρωσης για να αποτρέψετε την κύλιση της σελίδας στην κορυφή κατά το κλικ.

Παράδειγμα Κουμπιού με Στυλ

Δημιουργήστε ένα πιο εμφανές κουμπί CTA με προσαρμοσμένο στυλ:

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg 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-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

Παράδειγμα Κουμπιού Εναλλαγής

Αν θέλετε ένα μόνο κουμπί που ανοίγει και κλείνει τη συνομιλία:

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

Έλεγχος αν το Widget Είναι Έτοιμο

Το widget φορτώνεται ασύγχρονα, οπότε αν το κουμπί σας ενδέχεται να πατηθεί πριν ολοκληρωθεί η φόρτωση του widget, θα πρέπει να ελέγξετε πρώτα την ιδιότητα initialized:

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

Συμβουλή: Στις περισσότερες σελίδες, το widget αρχικοποιείται μέσα σε ένα δευτερόλεπτο. Ο έλεγχος initialized απαιτείται μόνο αν το κουμπί σας εμφανίζεται πολύ νωρίς στη σελίδα (π.χ., πάνω από τη γραμμή αναδίπλωσης σε ιστότοπο με γρήγορη φόρτωση).

Απόκρυψη Προεπιλεγμένου Εικονιδίου Συνομιλίας

Αν θέλετε να αντικαταστήσετε πλήρως το αιωρούμενο εικονίδιο συνομιλίας με το δικό σας προσαρμοσμένο κουμπί, μπορείτε να το αποκρύψετε με CSS:

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

Προειδοποίηση: Αν αποκρύψετε το προεπιλεγμένο εικονίδιο συνομιλίας, βεβαιωθείτε ότι το προσαρμοσμένο κουμπί σας είναι ευκρινώς ορατό σε κάθε σελίδα. Αλλιώς οι επισκέπτες δεν θα γνωρίζουν ότι η συνομιλία είναι διαθέσιμη.

Πλήρης Αναφορά API

Μέθοδος	Περιγραφή
`AsyntaiWidget.open()`	Ανοίγει το widget συνομιλίας
`AsyntaiWidget.close()`	Κλείνει το widget συνομιλίας
`AsyntaiWidget.toggle()`	Εναλλάσσει το άνοιγμα ή κλείσιμο της συνομιλίας
`AsyntaiWidget.initialized`	Boolean — `true` όταν το widget είναι έτοιμο

Τεκμηρίωση