Mukautettu avauspainike

Lisää painike tai linkki mihin tahansa sivustollasi avataksesi chat-widgetin

Oletuksena vierailijat avaavat chatin napsauttamalla kelluvaa chat-kuvaketta sivusi kulmassa. Voit kuitenkin lisätä myös oman mukautetun painikkeen tai linkin — navigointipalkkiin, hero-osioon, CTA-alueelle tai minne tahansa muualle — joka avaa chat-widgetin napsautettaessa.

Vinkki: Tämä sopii erinomaisesti "Keskustele kanssamme" -linkin lisäämiseen sivustosi navigaatiopalkkiin, "Pyydä apua" -painikkeeseen tuotesivulle tai toimintakehotteeseen, joka avaa chatin suoraan.

Miten se toimii

Kun Asyntai-widget-skripti on asennettu sivullesi, se tarjoaa globaalin JavaScript-rajapinnan osoitteessa window.AsyntaiWidget. Voit kutsua sen metodeja hallitaksesi chat-widgetiä ohjelmallisesti.

Käytettävissä olevat metodit

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

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

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

Perusesimerkki

Lisää painike mihin tahansa HTML-koodiisi ja liitä siihen napsautuksen käsittelijä, joka kutsuu window.AsyntaiWidget.open():

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

Siinä kaikki. Kun vierailija napsauttaa painiketta, chat-widget avautuu.

Navigointipalkin esimerkki

Lisää "Keskustele kanssamme" -linkki sivustosi navigaatioon:

<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>

Huomautus: Käytä event.preventDefault() ankkurilinkeissä estääksesi sivun vierittymisen ylös napsautettaessa.

Tyylitellyn painikkeen esimerkki

Luo näkyvämpi CTA-painike mukautetulla tyylillä:

<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>

Vaihtopainikkeen esimerkki

Jos haluat yhden painikkeen, joka avaa ja sulkee chatin:

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

Tarkistetaan, onko widget valmiina

Widget latautuu asynkronisesti, joten jos painikettasi saatetaan napsauttaa ennen kuin widget on latautunut, sinun tulisi tarkistaa initialized-ominaisuus ensin:

<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>

Vinkki: Useimmilla sivuilla widget alustuu sekunnissa. initialized-tarkistus tarvitaan vain, jos painikkeesi näkyy hyvin aikaisin sivulla (esim. taitoksen yläpuolella nopeasti latautuvalla sivustolla).

Oletuskeskustelukuvakkeen piilottaminen

Jos haluat korvata kelluvan chat-kuvakkeen kokonaan omalla mukautetulla painikkeellasi, voit piilottaa sen CSS:llä:

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

Varoitus: Jos piilotat oletuskeskustelukuvakkeen, varmista, että mukautettu painikkeesi on selvästi näkyvissä jokaisella sivulla. Muuten vierailijat eivät tiedä, että chat on käytettävissä.

Täydellinen API-viite

Metodi	Kuvaus
`AsyntaiWidget.open()`	Avaa chat-widgetin
`AsyntaiWidget.close()`	Sulkee chat-widgetin
`AsyntaiWidget.toggle()`	Vaihtaa chatin auki tai kiinni
`AsyntaiWidget.initialized`	Totuusarvo — `true` kun widget on valmiina

Dokumentaatio