始める
Updated on 2023-10-04

ウェブチャット/チャットボット
SDK Javascriptボタンの設置

  • 1. ウェブページ内にJavaScript SDKを貼り付ける
outaigateで提供するウェブチャット/チャットボットのスクリプトをコピーし、使用するサイトのHTMLタグ内の最下段に貼り付けてください。
ウェブチャット/チャットボットの スクリプトは 設定/管理 > 相談ボタン設置 > ウェブチャット, チャットボット からご確認いただけます。
brandKeyと channelTypeは入力必須項目です。残りの値は必要に応じて設定してください。
brandKeyは 設定/管理 > 相談チャネル連動 > ウェブチャット, チャットボット からご確認いただけます。

<例>

				
					<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<div>Content</div>

<!-- TWC chatbot Scripts -->
<script src="https://public-common-sdk.s3.ap-northeast-2.amazonaws.com/sdk/seller/Twc.plugin.js"></script>

<script>
(function() {
  Twc('init', {
   brandKey: "Your_Brand_Key",
   channelType: "Chat_or_Scenario",
   appId: 'Your_App_Id',
   buttonOption: {
     showLauncher: true,
     zIndex: 10,
     bottom: 25,
     right: 25
    }
  }, function () {
      Twc.Chat.on('NewMessage', function () {
        // メッセージ(NEW) アイコン
      })
      Twc.Chat.on('EndCounsel', function () {
        // 相談終了
      })
      Twc.Chat.on('OnCounselor', function () {
        // オペレーター接続
      })
    })
})();
</script>
</body>
</html>
  • 2. TWC Parameter

outaigateSDKは、下記のTWCパラメーターを提供しています。

TWC (EventName, Option, Callback)
– EventName : String (セッティング)
– Option : Object (ブランドに対するオプション)
– Callback : Function (ブランド検証に成功した場合の呼び出し)
– 該当ブランドセクションキーの成功可否、またはコールバック関数を通じて相談バッジに対する状態を提供します。 

[パラメーターの種類と説明]

Name Type Description Required
brandKey
string
- 発行されたブランドキー(ウェブチャット/チャットボットブランドキーは異なります)
O
channelType
string
- チャネルタイプ(ウェブチャット:chat,チャットボット:scenario)
O
appId
string
- Appで活用すると、NativeuserAgentに追加されたパッケージ名
App: O, Web: X
loginId
string
- 顧客の区分ID値の固定パラメーター
- 顧客のログインID情報を送信すると、該当のID基準のウェブチャット相談ルームに接続
X
ticketId
string
- 相談内訳を該当するチケットにトラッキング
X
buttonOption
object
- 提供ボタンオプション
X
showLauncher
boolean
- 提供ボタンの表示可否 (true / false)
- 初期設定 : true
X
zIndex
number
- 提供ボタンの重ね順
- 初期設定 : 999
X
bottom
number
- ボタン下段の余白
- 初期設定 : 25
X
right
number
- ボタン右側の余白
- 初期設定 : 25
X
  • 3. TWC Interface

ユーザーがウェブチャットをコントロールできる関数を以下のように提供します。

				
					Twc.Chat.open() // ウェブチャットを開く				
			
				
					Twc.Chat.close() // ウェブチャットを閉じる(相談は終了されません。)				
			
				
					Twc.Chat.conclude() // 相談を終了し、ウェブチャットを閉じる				
			
				
					Twc.Chat.isChatStatus() // オペレーター接続可否				
			
				
					Twc.Chat.on(EventName, Function) // オペレーター接続後、相談の進行状況を確認できます。
  • 3-1. バッチ関数の説明
Name Description
NewMessage
オペレーターからメッセージが届いた時
EndCounsel
相談が終了した時
OnCounselor
オペレーターに接続された時

<例>

				
					// TWC Callback 関数活用

(function() {
  Twc('init', {...}, function () {

      // メッセージイベント
      Twc.Chat.on('NewMessage', function (data) {
        // ...
        /**
         * data = {
         *    senderType: 'AGENT', // 発信者タイプ
         *    senderName: ‘山田太郎’, // 発信者名
         *    createDate: '20220505051739', // メッセージ送信日
         *    content: {text: ‘オペレーターメッセージです。’} // メッセージ
         * }
         */
      })

      // 相談終了
      Twc.Chat.on('EndCounsel', function () {
        // ...
      })

      // オペレーター接続
      Twc.Chat.on('OnCounselor', function () {
        // ...
      })

    })
})();
  • 4. Native Interface

ウェブチャットで呼び出しているネイティブ関数の案内です。
Appで活用すると、appId(TWC Parameter)は必須値であり、Appでは相談状態についてのイベント(Twc.Chat.On())は活用できません。

  • 4-1. onShowWebChat

ウェブチャットをオープンする際、webViewを通じて要請します。
非表示処理された場合には、隠されたwebViewを表示します。

				
					const parameters = {
    func: 'onShowWebChat',
    url: 'WebChat Url'
}

// Android
window.AppJSInterface.onShowWebChat(JSON.stringify(parameters))
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)
  • 4-2. onHideWebChat

ウェブチャットを非表示に処理します。 相談は終了しません。

				
					const parameters = {
    func: 'onShowWebChat',
    url: 'WebChat Url'
}

// Android
window.AppJSInterface.onShowWebChat(JSON.stringify(parameters))
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)
  • 4-3. onCloseWebChat

ウェブチャットを終了します。 相談中の場合は相談終了になります。

				
					const parameters = {
    func: 'onCloseWebChat'
}
// Android
window.AppJSInterface.onCloseWebChat()
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)
  • 4-4. onOrderPage

webViewで新しいウィンドウを開きます。

				
					const parameters = {
    func: 'onOrderPage',
    url: data.url
}
// Android
window.AppJSInterface.onOrderPage(JSON.stringify(parameters))
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)