Egendefinert åpneknapp

Legg til en knapp eller lenke hvor som helst på nettstedet ditt for å åpne chat-widgeten

Som standard åpner besøkende chatten ved å klikke på det flytende chatikonet i hjørnet av siden din. Men du kan også legge til din egen egendefinerte knapp eller lenke — i navigasjonslinjen, hero-seksjonen, CTA-området eller hvor som helst ellers — som åpner chatwidgeten når den klikkes.

Tips: Dette er flott for å legge til en «Chat med oss»-lenke i navigasjonslinjen på nettstedet ditt, en «Få hjelp»-knapp på en produktside, eller en CTA som åpner chatten direkte.

Slik fungerer det

Når Asyntai-widgetskriptet er installert på siden din, eksponerer det et globalt JavaScript-API på window.AsyntaiWidget. Du kan kalle metodene for å styre chatwidgeten programmatisk.

Tilgjengelige metoder

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

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

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

Grunnleggende eksempel

Legg til en knapp hvor som helst i HTML-en din og legg til en klikkbehandler som kaller window.AsyntaiWidget.open():

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

Det er alt. Når en besøkende klikker på knappen, åpnes chatwidgeten.

Eksempel med navigasjonslinje

Legg til en «Chat med oss»-lenke i navigasjonen på nettstedet ditt:

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

Merk: Bruk event.preventDefault() på ankerlenker for å forhindre at siden ruller til toppen når den klikkes.

Eksempel med stilisert knapp

Lag en mer fremtredende CTA-knapp med egendefinert 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>

Eksempel med veksleknapp

Hvis du vil ha en enkelt knapp som åpner og lukker chatten:

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

Sjekke om widgeten er klar

Widgeten lastes asynkront, så hvis knappen din kan bli klikket før widgeten er ferdig lastet, bør du sjekke initialized-egenskapen 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 fleste sider initialiseres widgeten innen et sekund. Sjekken med initialized er bare nødvendig hvis knappen din vises veldig tidlig på siden (f.eks. over bretten på et raskt lastende nettsted).

Skjule standard chatikon

Hvis du vil erstatte det flytende chatikonet helt med din egen egendefinerte knapp, kan du skjule det med CSS:

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

Advarsel: Hvis du skjuler standard chatikon, sørg for at din egendefinerte knapp er tydelig synlig på hver side. Ellers vil ikke besøkende vite at chatten er tilgjengelig.

Fullstendig API-referanse

Metode	Beskrivelse
`AsyntaiWidget.open()`	Åpner chatwidgeten
`AsyntaiWidget.close()`	Lukker chatwidgeten
`AsyntaiWidget.toggle()`	Veksler chatten åpen eller lukket
`AsyntaiWidget.initialized`	Boolsk — `true` når widgeten er klar

Dokumentasjon