Aangepaste openknop

Voeg een knop of link overal op uw site toe om de chatwidget te openen

Standaard openen bezoekers de chat door op het zwevende chatpictogram in de hoek van uw pagina te klikken. Maar u kunt ook uw eigen aangepaste knop of link toevoegen — in uw navigatiebalk, hero-sectie, CTA-gebied of elders — die de chatwidget opent wanneer erop wordt geklikt.

Tip: Dit is ideaal voor het toevoegen van een "Chat met ons"-link in de navigatiebalk van uw site, een "Hulp nodig"-knop op een productpagina, of een CTA die de chat direct opent.

Hoe het werkt

Zodra het Asyntai-widgetscript op uw pagina is geïnstalleerd, wordt een globale JavaScript API beschikbaar gesteld via window.AsyntaiWidget. U kunt de methoden ervan aanroepen om de chatwidget programmatisch te bedienen.

Beschikbare methoden

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

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

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

Basisvoorbeeld

Voeg een knop toe op een willekeurige plek in uw HTML en koppel een klikhandler die window.AsyntaiWidget.open() aanroept:

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

Dat is alles. Wanneer een bezoeker op de knop klikt, opent de chatwidget.

Voorbeeld navigatiebalk

Voeg een "Chat met ons"-link toe aan de navigatie van uw site:

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

Opmerking: Gebruik event.preventDefault() bij ankerlinks om te voorkomen dat de pagina naar boven scrolt wanneer erop wordt geklikt.

Voorbeeld gestylede knop

Maak een opvallendere CTA-knop met aangepaste 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>

Voorbeeld schakelknop

Als u één knop wilt die de chat opent en sluit:

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

Controleren of de widget gereed is

De widget laadt asynchroon, dus als er op uw knop kan worden geklikt voordat de widget klaar is met laden, dient u eerst de eigenschap initialized te controleren:

<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: Op de meeste pagina's initialiseert de widget binnen een seconde. De initialized-controle is alleen nodig als uw knop heel vroeg op de pagina verschijnt (bijv. boven de vouw op een snel ladende site).

Het standaard chatpictogram verbergen

Als u het zwevende chatpictogram volledig wilt vervangen door uw eigen aangepaste knop, kunt u het verbergen met CSS:

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

Waarschuwing: Als u het standaard chatpictogram verbergt, zorg er dan voor dat uw aangepaste knop duidelijk zichtbaar is op elke pagina. Anders weten bezoekers niet dat de chat beschikbaar is.

Volledige API-referentie

Methode	Beschrijving
`AsyntaiWidget.open()`	Opent de chatwidget
`AsyntaiWidget.close()`	Sluit de chatwidget
`AsyntaiWidget.toggle()`	Schakelt de chat open of dicht
`AsyntaiWidget.initialized`	Boolean — `true` wanneer de widget gereed is

Documentatie