JavaScript ウィジェット

本機能を利用すると、外部の Web アプリケーション (顧客管理システム (CRM)、予約管理システム、発注システム、在庫管理システムなど) に MiiTel を埋め込むことができます。

また、SaaS アプリケーションの提供会社が、MiiTel をご利用中のお客様向けに本機能を組み込んで提供する用途でも利用できます。

目次

本ページの記載内容はアプリケーション開発者向けの内容です。本ウィジェットの組み込みは、Web アプリケーションの開発者が実施する必要があり、一般に Web アプリケーションの利用者が実施できるものではありません。

埋め込み用コードを取得する

  1. MiiTel Analytics で [設定]__________2019-10-01_18.33.51.pngをクリックします。
  2. [JavaScript ウィジェット] をクリックします。

JS_______.png

  1. 画面上に表示される HTML コードを Web アプリケーションの HTML の <body> タグ内もしくは、<head> タグ内に組み込みます。

JS_______.png

  1. 組み込まれたページには右下の位置に [MiiTel Phone] のボタンが配置されます。

JS_miitel_phone_button.png

  1. [MiiTel Phone] のボタンをクリックすると、ソフトフォンが表示されます。

JS_miitelphone.png

ウィジェットをカスタマイズする

以下のコードを追加することで、発着信のイベントを追加できるほか、ルック&フィールを変更する事ができます。

着信時のコールバック関数を追加する

miitelWidget.call("onReceiveCall", [コールバック関数]) のメソッドで、着信があった際に指定されたコールバック関数を実行します。

着信時イベントのパラメーター

phoneNumber: 発信元電話番号 (内線の場合は、内線番号)
groupName: 着信先グループ名
circuitTitle: 着信先回線名
circuitNumber: 着信先電話番号
isInternal: 内線かどうか
userName: 発信元ユーザ名 (内線の場合のみ)

実装例

function receiveCall(e) {
if (e.isInternal) {
let text = "内線です\n";
text += e.phoneNumber + " から着信です\n";
text += "相手は " + e.userName + " です\n";
alert(text);
} else {
let text = "外線です\n";
text += e.phoneNumber + " から ";
text += e.circuitNumber + " への着信です\n";
text += "回線名は " + e.circuitTitle + ' です\n";
text += "グループ " + e.groupName + " が鳴動しています\n";
alert(text);
}
}
miitelWidget("onReceiveCall", receiveCall);

発信を行う

miitelWidget.call() メソッドで、ソフトフォンから指定された電話番号に発信します。 onClick イベントなどと組み合わせて、クリック to コールを行うことが可能です。

実装例

miitelWidget.call("09012345678");

発信可否を返すコールバック関数を追加する

miitelWidget("onChangeReadyState", [コールバック関数]) メソッドで発信可否の状態に変更が生じた際、指定されたコールバック関数を実行します。

ログアウト済状態や通話中など、発信できない状態にあるときに、クリックtoコールボタンを無効にするなどの目的で利用できます。

実装例

function updateReadyState(e){
  if(e.state){
    alert("発信機能が有効になりました。")
  } else{
    alert("発信機能が無効になりました。")
  }
}
miitelWidget("onChangeReadyState", updateReadyState);

シーケンス ID を返すコールバック関数を追加する

miitelWidget("onReceiveSequenceId", [コールバック関数]) メソッドで通話開始直後にシーケンス ID (個々の応対を識別する ID) を受け取ったタイミングでコールバック関数を実行します。シーケンス ID は、MiiTel Analytics の個々の応対履歴画面を直接参照する際に利用でき、その場合の URL は https://<企業 ID>.miitel.jp/app/call/<シーケンス ID> となります。

実装例

function receiveSequenceId(e){
  document.write("URL は https://<企業 ID>.miitel.jp/app/call/"+ e.sequenceId +" です")
}
miitelWidget("onReceiveSequenceId", receiveSequenceId);

ダイヤル開始時に通知するコールバック関数を追加する

miitelWidget("onDialBegin", [コールバック関数]) メソッドを利用すると、発信を開始したタイミングまたは着信を受け取ったタイミングでコールバック関数を実行します。

実装例

function dialBegin(e){
  document.write("ダイヤルを開始しました")
}
miitelWidget("onDialBegin", dialBegin);

通話開始時に通知するコールバック関数を追加する

miitelWidget("onCallBegin", [コールバック関数]) メソッドを利用すると、発信後相手が電話に出た場合、着信後「電話に出る」ボタンを押して音声通話を開始したタイミングでコールバック関数を実行します。

実装例

function callBegin(e){
  document.write("通話を開始しました")
}
miitelWidget("onCallBegin", callBegin);

通話終了時に通知するコールバック関数を追加する

miitelWidget("onCallEnd", [コールバック関数]) メソッドを利用すると、通話が終了したタイミングでコールバック関数を実行します。

実装例

function callEnd(e){
  document.write("通話を終了しました")
}
miitelWidget("onCallEnd", callEnd);

表示位置をカスタマイズする

miitelWidget("position", [位置]) メソッドでボタンおよびキーパッド画面の表示位置をカスタマイズできます。設定していない場合は、 right_bottom (右下) となります。

指定可能な値は、 left_bottom (左下) および right_bottom (右下) です。

実装例

miitelWidget("position", "left_bottom");

色をカスタマイズする

miitelWidget("color", [色]) メソッドでボタンおよびキーパッド画面の色をカスタマイズできます。設定していない場合は、 black (黒基調) となります。

指定可能な値は、 white (白基調) および black (黒基調) です。

実装例

miitelWidget("color", "white");

ウィジェットを展開するボタンのイメージを変更する

miitelWidget("openButtonImage", [画像の URL]) メソッドでウィジェットを展開する際にクリックするボタンの画像を変更できます。

指定可能な画像は SVG 形式、180 × 30 px を推奨します。URL には、 https:// で始まるURLを指定する必要があります。

実装例

miitelWidget("openButtonImage", "https://yourwebsite.com/button.svg");

JS_awesomeButton.png

ロゴのイメージを変更する

miitelWidget("logoImage", [画像の URL]) メソッドでロゴの画像を変更できます。

指定可能な画像は SVG 形式、180 × 30 px を推奨します。URL には、 https:// で始まるURLを指定する必要があります。

実装例

miitelWidget("logoImage", "https://yourwebsite.com/logo.svg");

JS_awsomephone.png

JavaScript ウィジェットは、HTTP サイトに組み込むことはできません。HTTPS サイト、または localhost に組み込み、ご利用ください。

この記事は役に立ちましたか?

外部の Web アプリケーションをご利用の場合