カスタムオープンボタン

サイトの任意の場所にチャットウィジェットを開くためのボタンやリンクを追加する

デフォルトでは、訪問者はページの隅にあるフローティングチャットアイコンをクリックしてチャットを開きます。ただし、ナビゲーションバー、ヒーローセクション、CTAエリアなど、任意の場所に独自のカスタムボタンやリンクを追加して、クリック時にチャットウィジェットを開くこともできます。

ヒント: これはサイトのナビゲーションバーに「チャットで相談」リンクを追加したり、製品ページに「ヘルプ」ボタンを追加したり、チャットを直接開くCTAを追加するのに最適です。

仕組み

Asyntaiウィジェットスクリプトがページにインストールされると、window.AsyntaiWidgetにグローバルJavaScript APIが公開されます。そのメソッドを呼び出してチャットウィジェットをプログラムで制御できます。

利用可能なメソッド

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

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

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

基本的な例

HTMLの任意の場所にボタンを追加し、window.AsyntaiWidget.open()を呼び出すクリックハンドラーを設定します：

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

以上です。訪問者がボタンをクリックすると、チャットウィジェットが開きます。

ナビゲーションバーの例

サイトのナビゲーションに「チャットで相談」リンクを追加：

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

注記: アンカーリンクにevent.preventDefault()を使用して、クリック時にページがトップにスクロールするのを防いでください。

スタイル付きボタンの例

カスタムスタイリングでより目立つCTAボタンを作成します：

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

トグルボタンの例

チャットの開閉を1つのボタンで行いたい場合：

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

ウィジェットの準備状態を確認する

ウィジェットは非同期で読み込まれるため、ウィジェットの読み込みが完了する前にボタンがクリックされる可能性がある場合は、まず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>

ヒント: ほとんどのページでは、ウィジェットは1秒以内に初期化されます。initializedチェックは、ボタンがページの非常に早い段階で表示される場合（高速読み込みサイトのファーストビューなど）にのみ必要です。

デフォルトのチャットアイコンを非表示にする

フローティングチャットアイコンを独自のカスタムボタンに完全に置き換えたい場合は、CSSで非表示にできます：

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

警告: デフォルトのチャットアイコンを非表示にする場合は、すべてのページでカスタムボタンが明確に表示されるようにしてください。そうしないと、訪問者はチャットが利用可能であることがわかりません。

完全なAPIリファレンス

メソッド	説明
`AsyntaiWidget.open()`	チャットウィジェットを開きます
`AsyntaiWidget.close()`	チャットウィジェットを閉じます
`AsyntaiWidget.toggle()`	チャットの開閉を切り替えます
`AsyntaiWidget.initialized`	ブール値 — `true` ウィジェットの準備が完了した時

ドキュメント