独自ボタンからチャットを開く

ページ内に設置した任意のボタンから、SolidChat のチャットウィンドウを開閉できます。実装方法は 2 種類あります。

いずれの方法においても、埋め込みタグの読み込み完了を待機する必要はありません。読み込みの完了前にクリックされた場合も、完了後に自動的に開きます。

前提条件:埋め込みタグの設置

以下のタグがページに設置されている必要があります(管理画面から取得できます)。

<script id="solidchat" src="https://cdn.solidchat.ai/s/main.js" data-appid="YOUR_APP_ID"></script>

このタグには async および defer を指定しないでください。

方法1:HTML 属性による実装(推奨)

ボタンに data-solidchat-toggle 属性を付与してください。JavaScript の記述は不要です。

<button type="button" data-solidchat-toggle>チャットでのお問い合わせ</button>

属性は次の 3 種類です。

仕様は以下のとおりです。

• 属性の値は不要です(data-solidchat-toggle="true" と記述した場合も動作は同じです)。
• 1 ページ内に複数設置できます。
• 後から DOM に追加された要素でも動作します(JavaScript で生成したボタン、モーダル内のボタンなど)。
• <button> 以外の要素(<a>、<div> など)にも付与できます。<a href="..."> に付与した場合、ページ遷移はキャンセルされます。
• ボタンの内部に <span> や <img> を含む場合も、子要素のクリックで正しく動作します。
• 1 つの要素に複数の属性を付与した場合の優先順位は close > open > toggle です。

方法2:JavaScript API による実装

window.sc オブジェクトのメソッドを呼び出します。

<button type="button" id="chat-support">チャットでのお問い合わせ</button>
<script>
  document.getElementById('chat-support').addEventListener('click', function () {
    sc.toggle();
  });
</script>

jQuery を使用している場合は以下のとおりです。

<script>
  $(function () {
    $('#chat-support').on('click', function () {
      sc.toggle();
    });
  });
</script>

読み込み完了の待機は不要です

sc は埋め込みタグが評価された時点で必ず定義されています。初期化が完了していない状態で sc.open() を呼び出した場合、その操作は保持され、初期化の完了と同時に実行されます。

したがって、以下のような待機処理は記述しないでください。

// 以下は不要な実装です。記述しないでください
var timer = setInterval(function () {
  if (window.sc && typeof window.sc.toggleWindow === 'function') {
    clearInterval(timer);
    window.sc.toggleWindow();
  }
}, 100);

応用:チャットが利用できない場合にボタンを非表示にする

通信エラーなどにより設定を取得できなかった場合、sc の各メソッドは何も行いません(エラーは発生しません)。この状態を検知してボタン自体を非表示にする場合は、sc.ready() を使用します。

sc.ready(function (status) {
  if (!status.available) {
    document.getElementById('chat-support').hidden = true;
  }
});

応用:ボタンの表示を開閉状態に同期する

var button = document.getElementById('chat-support');
function sync() {
  var open = sc.isOpen();
  button.setAttribute('aria-expanded', String(open));
  button.textContent = open ? 'チャットを閉じる' : 'チャットでのお問い合わせ';
}
sc.on('open', sync);
sc.on('close', sync);

標準チャットボタン(画面隅のボタン)の非表示設定

独自ボタンのみで運用する場合は、管理画面の「ランチャー > 標準ボタンの表示」を「非表示」に設定してください。標準ボタンは描画されなくなりますが、独自ボタンおよび JavaScript API からの起動は引き続き動作します。

JavaScript API リファレンス

window.sc は埋め込みタグの評価直後から使用できます。

初期化の完了前に呼び出した場合

open / close / toggle の呼び出しは保持され、初期化の完了時に最後の 1 回のみが実行されます。連続して呼び出された場合に、開閉が繰り返されることはありません。

初期化に失敗した場合

設定の取得に失敗した場合、または 8 秒以内に完了しなかった場合、ready のコールバックは { available: false } で呼び出され、open / close / toggle は何も行いません。例外は発生しません。

{ available: false } は、8 秒以内に利用可能な状態にならなかったことを示します。その後に設定を取得できた場合は、通常どおり動作を開始します。

sc が既に別の用途で定義されている場合

ページ側で window.sc が別の用途で既に定義されている場合、SolidChat はこれを上書きせず、ブラウザのコンソールに警告を出力します。この場合、JavaScript API は使用できません(属性による起動は使用できます)。

互換性ポリシー

以下を公開インターフェースとし、後方互換性を維持します。破壊的変更が必要な場合は事前に告知します。

• 埋め込みタグの形式(id="solidchat" および data-appid)
• data-solidchat-toggle / -open / -close 属性
• window.sc の上記各メソッド。イベント名は追加される場合がありますが、削除および意味の変更は行いません
• #solidchat-chatbot-fab(標準ボタンの CSS カスタマイズ用 ID)

以下は内部実装であり、予告なく変更されます。依存しないでください。

• 上記以外の DOM 構造・要素 ID・クラス名(#solidchat-ui を含む)
• iframe の生成タイミング、src が設定されるタイミング、チャット本体の読み込みタイミング
• 通信するエンドポイントおよびそのレスポンス形式

内部実装に依存した実装は、表示速度の最適化などの改善に伴い、予告なく動作しなくなる場合があります。

うまく動かないとき