Bouton d’ouverture personnalisé

Ajoutez un bouton ou un lien n'importe où sur votre site pour ouvrir le widget de chat

Par défaut, les visiteurs ouvrent le chat en cliquant sur l'icône de chat flottante dans le coin de votre page. Mais vous pouvez également ajouter votre propre bouton ou lien personnalisé — dans votre barre de navigation, section principale, zone d'appel à l'action ou n'importe où ailleurs — qui ouvre le widget de chat au clic.

Astuce : C'est idéal pour ajouter un lien "Discutez avec nous" dans la barre de navigation de votre site, un bouton "Obtenir de l'aide" sur une page produit, ou un CTA qui ouvre le chat directement.

Comment ça marche

Une fois le script du widget Asyntai installé sur votre page, il expose une API JavaScript globale à window.AsyntaiWidget. Vous pouvez appeler ses méthodes pour contrôler le widget de chat de manière programmatique.

Méthodes disponibles

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

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

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

Exemple de base

Ajoutez un bouton n'importe où dans votre HTML et associez-lui un gestionnaire de clic qui appelle window.AsyntaiWidget.open() :

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

C'est tout. Lorsqu'un visiteur clique sur le bouton, le widget de chat s'ouvrira.

Exemple de barre de navigation

Ajoutez un lien "Discutez avec nous" à la navigation de votre 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>

Note : Utilisez event.preventDefault() sur les liens d'ancrage pour empêcher la page de défiler vers le haut lorsqu'on clique dessus.

Exemple de bouton stylisé

Créez un bouton d'appel à l'action plus visible avec un style personnalisé :

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

Exemple de bouton bascule

Si vous souhaitez un seul bouton qui ouvre et ferme le chat :

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

Vérifier si le widget est prêt

Le widget se charge de manière asynchrone, donc si votre bouton risque d'être cliqué avant que le widget ait fini de se charger, vous devriez d'abord vérifier la propriété 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>

Astuce : Sur la plupart des pages, le widget s'initialise en moins d'une seconde. La vérification initialized n'est nécessaire que si votre bouton apparaît très tôt sur la page (par ex., au-dessus de la ligne de flottaison sur un site à chargement rapide).

Masquer l'icône de chat par défaut

Si vous souhaitez remplacer entièrement l'icône de chat flottante par votre propre bouton personnalisé, vous pouvez la masquer avec du CSS :

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

Avertissement : Si vous masquez l'icône de chat par défaut, assurez-vous que votre bouton personnalisé est clairement visible sur chaque page. Sinon, les visiteurs ne sauront pas que le chat est disponible.

Référence complète de l'API

Méthode	Description
`AsyntaiWidget.open()`	Ouvre le widget de chat
`AsyntaiWidget.close()`	Ferme le widget de chat
`AsyntaiWidget.toggle()`	Ouvre ou ferme le chat
`AsyntaiWidget.initialized`	Booléen — `true` lorsque le widget est prêt

Documentation