Custom Open Button

Add a button or link anywhere on your site to open the chat widget

By default, visitors open the chat by clicking the floating chat icon in the corner of your page. But you can also add your own custom button or link — in your navigation bar, hero section, CTA area, or anywhere else — that opens the chat widget when clicked.

Tip: This is great for adding a "Chat with us" link in your site's navigation bar, a "Get help" button on a product page, or a CTA that opens the chat directly.

How It Works

Once the Asyntai widget script is installed on your page, it exposes a global JavaScript API at window.AsyntaiWidget. You can call its methods to control the chat widget programmatically.

Available Methods

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

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

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

Basic Example

Add a button anywhere in your HTML and attach a click handler that calls window.AsyntaiWidget.open():

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

That's it. When a visitor clicks the button, the chat widget will open.

Navigation Bar Example

Add a "Chat with us" link to your site's 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>

Note: Use event.preventDefault() on anchor links to prevent the page from scrolling to the top when clicked.

Styled Button Example

Create a more prominent CTA button with custom 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>

Toggle Button Example

If you want a single button that opens and closes the chat:

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

Checking If the Widget Is Ready

The widget loads asynchronously, so if your button might be clicked before the widget finishes loading, you should check the initialized property first:

<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: On most pages, the widget initializes within a second. The initialized check is only needed if your button appears very early on the page (e.g., above the fold on a fast-loading site).

Hiding the Default Chat Icon

If you want to fully replace the floating chat icon with your own custom button, you can hide it with CSS:

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

Warning: If you hide the default chat icon, make sure your custom button is clearly visible on every page. Otherwise visitors won't know the chat is available.

Full API Reference

Method	Description
`AsyntaiWidget.open()`	Opens the chat widget
`AsyntaiWidget.close()`	Closes the chat widget
`AsyntaiWidget.toggle()`	Toggles the chat open or closed
`AsyntaiWidget.initialized`	Boolean — `true` when the widget is ready

Documentation