バナーの実装

バナーの作成

HTML

interpanda-banner という名前のクラスがついた要素をクリックするとバナーのインタラクションが始まります。

1

<div class="interpanda-banner">バナーをクリック</div>

CSS

以下がサンプルの css となります。

1
2
3
4
5
6
7
8
9
10

.interpanda-banner {
  position: fixed;
  background-color: orange;
  color: white;
  border: solid 2px orangered;
  padding: 20px;
  bottom: 80px;
  right: 80px;
  cursor: pointer;
}

仕様について

interpanda-banner というクラスがついた要素をクリックすると、interpanda-banner-container がフェードアウトし、
チャットあるいはバナーを閉じると、 interpanda-banner-containerがフェードインします。
interpanda-banner-close というクラスがついた要素をつけると閉じるボタンになります。

Chatを自動的に開始する

interpanda.io のサーバーに接続されると、window.interpanda.showChat というメソッドが定義されます。
setTimeout を用いて接続を待ち、このメソッドを実行します。

1
2
3
4
5
6
7
8
9
10

(function(){
  function startChat() {
    if (window.interpanda.showChat) {
      window.interpanda.showChat();
    } else {
	  setTimeout(startChat, 300);
    }
  }
  startChat();
})();

具体的にはJavaScript APIの初期化callbackでの実装例を参照して下さい。