Anpassad öppningsknapp

Lägg till en knapp eller länk var som helst på din webbplats för att öppna chattwidgeten

Som standard öppnar besökare chatten genom att klicka på den flytande chattikonen i hörnet av din sida. Men du kan också lägga till din egen anpassade knapp eller länk — i navigeringsfältet, hero-avsnittet, CTA-området eller var som helst — som öppnar chatt-widgeten när man klickar på den.

Tips: Det här är utmärkt för att lägga till en länk med \"Chatta med oss\" i din webbplats navigeringsfält, en knapp med \"Få hjälp\" på en produktsida eller en CTA som öppnar chatten direkt.

Hur det fungerar

När Asyntai widget-skriptet är installerat på din sida exponerar det ett globalt JavaScript-API på window.AsyntaiWidget. Du kan anropa dess metoder för att styra chattwidgeten programmatiskt.

Tillgängliga metoder

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

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

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

Grundläggande exempel

Lägg till en knapp var som helst i din HTML och koppla en klickhanterare som anropar window.AsyntaiWidget.open():

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

Det var det. När en besökare klickar på knappen öppnas chattwidgeten.

Navigeringsfält – exempel

Lägg till en "Chatta med oss"-länk i din webbplats navigering:

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

Obs! Använd event.preventDefault() på ankarlänkar för att förhindra att sidan scrollar till toppen vid klick.

Exempel på stiliserad knapp

Skapa en mer framträdande CTA-knapp med anpassad stil:

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

Exempel på växlingsknapp

Om du vill ha en enda knapp som öppnar och stänger chatten:

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

Kontrollerar om widgeten är redo

Widgeten laddas asynkront, så om din knapp kan klickas innan widgeten är klar bör du kontrollera egenskapen initialized först:

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

Tips: På de flesta sidor initieras widgeten inom en sekund. Kontrollen initialized behövs bara om din knapp visas mycket tidigt på sidan (t.ex. ovanför mitten på en snabbladdande webbplats).

Dölja standardchattikonen

Om du vill ersätta den flytande chattikonen helt med din egen anpassade knapp kan du dölja den med CSS:

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

Varning: Om du döljer standard-chattikonen, se till att din anpassade knapp är tydligt synlig på varje sida. Annars vet inte besökarna att chatten finns tillgänglig.

Fullständig API-referens

Metod	Beskrivning
`AsyntaiWidget.open()`	Öppnar chattwidgeten
`AsyntaiWidget.close()`	Stänger chattwidgeten
`AsyntaiWidget.toggle()`	Öppnar eller stänger chatten
`AsyntaiWidget.initialized`	Booleskt — `true` när widgeten är redo

Dokumentation