提供: Bright Pattern Documentation
• English
ローカルホスティング用のチャットコード全体を編集する方法
Webチャットは、モバイルおよびデスクトップのWebサイトに組み込まれたチャットアプリケーションによって実現されています。Bright Pattern Contact CenterのMobile/Web APIを使用して独自のチャットアプリケーションを作成したい場合は、まずチャットクライアントの完全なコードをダウンロードして修正し、必要な追加機能を実装した上で、ご自身のウェブサイトにホストすることから始められます。
|
ほとんどのWebチャットのユースケースは、単にチャットウィジェットのHTMLスニペットをウェブサイトに追加し、必要に応じてウィジェットのスタイル設定や構成を行うだけで解決できます。カスタムチャットアプリケーションの作成は手間がかかるため、お勧めできません。 | |
前提条件
- Bright Pattern Contact Centerのユーザーであり、管理者ロールと権限をお持ちであること。
- Contact Center Administrator アプリケーションおよびコンタクトセンターの運用について熟知しており、アクセス権限を持っていること。
手順
ステップ 1: クライアントアプリケーションのダウンロード
- 「Contact Center Administrator」アプリケーションで、[設定] > [シナリオエントリー] > [メッセージ送信/チャットシナリオエントリー] の順に移動し、対象のチャットシナリオエントリーを選択してそのプロパティを表示してください。
- プロパティ画面で、「ローカルホスティング用の完全なチャットコード」に移動し、「ダウンロード」ボタンをクリックしてください。チャットアプリケーションのコードが含まれたzipファイル（chat-client.zip）が、お使いのコンピュータにダウンロードされます。
Web HTML スニペットのプロパティ - chat-client.zip のコンテンツを解凍してください。以下のフォルダーとファイルが含まれているはずです：
- build/
- css/
- images/
- js/
- media/
- stage/
- test/
- build.xml
- check-session.HTML
- client-chat-page.HTML
- client-chat-page-dev.html
- default.HTML
- default-dev.HTML
- README.md
- すべてのファイルとディレクトリをWebサーバーにデプロイしてください。
- 修正したファイルやフォルダーが配信される Web アドレスを控えておいてください。
default.htmlを編集し、この URL をいくつかの箇所に追加する必要があります。
ステップ 2: スニペットコードを開く
default.htmlを開いて編集してください。default.htmlには、チャットアプリケーションの JavaScript が含まれています。以下は、ダウンロードした default.html に表示される内容の例です。
default.html のコンテンツ
<!DOCTYPE html>
<!--___PRODUCT_BUILD___ (___PRODUCT_COMMENTS___) ___PRODUCT_DATE___-->
<html>
<head>
<title>Chat Test Page</title>
</head>
<body>
<!-- You have to put this piece of JavaScript code into your web page -->
<script type="text/javascript">
SERVICE_PATTERN_CHAT_CONFIG = {
appId: '123', /* Unique identifier of Mobile/Web record of Portal Tenant Management */
clientId: 'WebChat', /* no need to change this */
apiUrl: '/clientweb/api/v1', /* path to public API can be absolute like http://example.brightpattern.com:98/clientweb/api/v1 or relative*/
tenantUrl: 'example.com',
width: 300, /* chat width */
chatPath: '', /* relative path to client-chat-page.html i.e empty here because default.html and
client-chat-page.html in same directory */
callback:false,
subject: 'TEST SUBJECT',
sound_notification: true,
sound_notification_file: 'media/ding.mp3',
email: 'someone@example.com'
/* Default customer data, it can be collected on current site's context*/
/* Customer data also can be requested via "Request Input" block + "MobileChatCustomerData" formName */
/*
togetherJS_enabled : true,
first_name: '',
last_name: '',
from: '',
email: '',
account_number: '',
phone_number: 91001,
location : {
latitude: 37.5151481,
longitude: -122.4183997
}
*/
};
</script>
<script type="text/javascript" src="js/snippet.js"></script>
</body>
</html>
ステップ 3: スニペットコードを編集する
default.htmlからの以下のスニペットには、ウェブページ上でチャットアプリケーションを起動するために最低限必要な内容が含まれています。<!DOCTYPE html> <link type="text/css" rel="stylesheet" href="https://<Address serving chat widget code>/css/form.css"> <script type="text/javascript"> SERVICE_PATTERN_CHAT_CONFIG = { appId: '<app_id>', apiUrl: 'https://<tenant_url>/clientweb/api/v1', tenantUrl: '<tenant_url>', chatPath: 'https://<Address serving chat widget code>' /* // Default customer data, it can be collected on current site's context first_name: '', last_name: '', email: '', phone_number: '' */ }; </script> <script src="https://<Address serving chat widget code>/js/init.js"></script>
- 以下のパラメータの値を編集し、お客様のコンタクトセンターおよびチャットウィジェットがホストされるドメインを指定してください。
- link href -
https://<チャットウィジェットコードを提供するアドレス>を、チャットクライアントのファイルやディレクトリがホストされている URL に置き換えてください。 - appId - チャットアプリケーションの一意の識別子（例：「'428938e0-7b11-41b5-bbaa-b28ebb27812c」）。これは、チャットシナリオエントリーの起動ポイントとも呼ばれます。 appIDは、チャットアプリケーションのシナリオエントリーのプロパティで確認できます。
- apiUrl - API エンドポイントを含むドメインの URL です（例：「https://company.brightpattern.com/clientweb/api/v1」）。
- tenantUrl - コンタクトセンターの URL です（例：「company.brightpattern.com」）。
- chatpath -
https://<チャットウィジェットのコードを提供するアドレス>を、チャットクライアントのファイルやディレクトリをホストしている URL に置き換えてください。 - script src -
https://<チャットウィジェットのコードを提供するアドレス>を、チャットクライアントのファイルおよびディレクトリをホストしている URL に置き換えてください。
- link href -
- ファイルを保存してください。
default.html の編集例
<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="https://url.of.self-hosted.code.com/directory-with-chat-client-files/css/form.css">
<script type="text/javascript">
SERVICE_PATTERN_CHAT_CONFIG = {
appId: 'f58ccefbdc6f41f1baa468dd82186c02',
apiUrl: 'https://company.brightpattern.com/clientweb/api/v1',
tenantUrl: 'company.brightpattern.com',
chatPath: 'https://url.of.self-hosted.code.com/directory-with-chat-client-files'
/*
// Default customer data, it can be collected on current site's context
first_name: '',
last_name: '',
email: '',
phone_number: ''
*/
};
</script>
<script src="https://url.of.self-hosted.code.com/directory-with-chat-client-files/js/init.js"></script>
ステップ 4: JavaScript をウェブページに埋め込む
default.htmlファイルからJavaScriptをコピーします（<!DOCTYPE HTML>を除くすべて）。- チャットウィジェットを顧客が利用するウェブページに貼り付けてください。
- ウェブページを保存して公開してください。
ステップ 5: (オプション、推奨されません) ソースコードの修正
|
|
ウィジェットのソースコードをカスタマイズすると、将来のバージョンの Bright Pattern Contact Center との互換性の問題が生じる可能性があることにご注意ください。このリスクを理解している場合にのみ、作業を続けてください。 | |
- 必要に応じて、（ステップ 1 でダウンロードした）コードを修正してください。
js/フォルダー内のファイルに変更を加えた場合は、README.mdに記載されているビルドプロセスを実行する必要があります：
- ソースからチャットスニペットコードをビルドするために必須の依存関係をインストールしてください：java、ant、node.js、および npm。
build.xmlで使用されているすべての外部依存関係、具体的には'yuicompressor-2.4.8.jar'およびyarn-1.19.1.jsを手動でダウンロードしてください。- ビルドプロセスを実行してください。
build/フォルダーのコンテンツは、ビルドプロセスによって更新される点にご注意ください。
- ソースからチャットスニペットコードをビルドするために必須の依存関係をインストールしてください：java、ant、node.js、および npm。
- 修正したファイルおよびディレクトリをWebサーバーにデプロイしてください（
build/フォルダー内のすべての変更を含みます）。