Tilpasset åbn-knap

Tilføj en knap eller et link hvor som helst på dit websted for at åbne chat-widgetten

Som standard åbner besøgende chatten ved at klikke på det flydende chatikon i hjørnet af din side. Men du kan også tilføje din egen brugerdefinerede knap eller link — i din navigationslinje, hero-sektion, CTA-område eller andre steder — der åbner chat-widgetten, når der klikkes.

Tip: Dette er ideelt til at tilføje et "Chat med os"-link i dit websteds navigationslinje, en "Få hjælp"-knap på en produktside eller en CTA, der åbner chatten direkte.

Sådan fungerer det

Når Asyntai widget-scriptet er installeret på din side, eksponerer det en global JavaScript API på window.AsyntaiWidget. Du kan kalde dens metoder for at styre chat-widgetten programmatisk.

Tilgængelige metoder

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

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

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

Grundlæggende eksempel

Tilføj en knap et vilkårligt sted i din HTML og tilknyt en klik-handler, der kalder window.AsyntaiWidget.open():

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

Det er det. Når en besøgende klikker på knappen, vil chat-widgetten åbne.

Eksempel på navigationslinje

Tilføj et "Chat med os"-link til dit websteds navigation:

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

Bemærk: Brug event.preventDefault() på ankerlinks for at forhindre siden i at rulle til toppen, når der klikkes.

Eksempel på stiliseret knap

Opret en mere fremtrædende CTA-knap med brugerdefineret styling:

<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 på til/fra-knap

Hvis du ønsker en enkelt knap, der åbner og lukker chatten:

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

Kontroller om widgetten er klar

Widgetten indlæses asynkront, så hvis din knap kan blive klikket, før widgetten er færdig med at indlæse, bør du først kontrollere egenskaben 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>

Tip: På de fleste sider initialiseres widgetten inden for et sekund. initialized-kontrollen er kun nødvendig, hvis din knap vises meget tidligt på siden (f.eks. over folden på et hurtigt indlæsende websted).

Skjul standardchatikonet

Hvis du ønsker at erstatte det flydende chatikon fuldstændigt med din egen brugerdefinerede knap, kan du skjule det med CSS:

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

Advarsel: Hvis du skjuler standardchatikonet, skal du sørge for, at din brugerdefinerede knap er tydeligt synlig på alle sider. Ellers vil besøgende ikke vide, at chatten er tilgængelig.

Fuld API-reference

Metode	Beskrivelse
`AsyntaiWidget.open()`	Åbner chat-widgetten
`AsyntaiWidget.close()`	Lukker chat-widgetten
`AsyntaiWidget.toggle()`	Skifter chatten mellem åben og lukket
`AsyntaiWidget.initialized`	Boolean — `true` når widgetten er klar

Dokumentation