Udesk ServiceGo Ticket SDK チケットプラグイン

こんにちは、Udesk ServiceGo Ticket SDK チケットプラグインへの接続を歓迎します。以下に基本的な使用方法、注意事項、カスタム設定などを提供します。

一、基本的な使用方法

ServiceGo システム管理者アカウントでログインし、管理センター -> チケットプラグイン に移動し、基本属性を設定した後、コードをウェブページにコピーしてください。

コード内にはいくつかのプレースホルダーを記入する必要があります。timestamp と signature です。具体的なルールについては、以下の詳細説明を参照してください。

userIdentity 属性も一緒に記入することをお勧めします。この属性は、現在ログインしているユーザーの一意の識別子を表し、チケットリストの取得や新しいチケット作成時に作成者を関連付けるために使用されます。ホームページのレンダリング時に取得できない場合は、後で setUserIdentity メソッドを使用して指定することもできますが、サーバーに実際のリクエストを送信する前に完了させる必要があります。

二、注意事項

1、ブラウザの互換性

SDK は現在、IE9+（含む）の IE ブラウザとそのカーネルに基づくブラウザ（360/qq/...）、その他の主要ブラウザ（chrome/firefox/...）をサポートしています。

IE9 ブラウザは https://developer.mozilla.org/en-US/docs/Glossary/CORS/[W3C CORS 標準] を完全にはサポートしていないため、IE9 で SDK を使用する場合には一定の制限があります。つまり、クロスオリジンリクエストの両端は同じプロトコルを採用する必要があります。Udesk はすでに全サイト HTTPS を実装しており、HTTP プロトコルのサポートを提供していないため、あなたのウェブサイトも HTTPS プロトコルをサポートする必要があります。可能であれば、最適なユーザー体験を得るために IE10 以降のバージョンにアップグレードすることをお勧めします。

2、体験の最適化

SDK は tiymce リッチテキストエディタを導入しているため、tiymce.js 静的リソースファイルを導入する必要があります。デフォルトでは SDK が自動的にロードしますが、より良い体験を希望する場合は、以下の方法で事前に tiymce.js 静的リソースファイルを導入することができます。

<script src="https://sgo-assets.udesk.cn/sgo-ticket-sdk/1.0.1/js/tiymce.min.js"></script>

三、カスタム設定

グローバルパラメータの初期化

パラメータ名	タイプ	値	必須	説明
clientAppId	String	システム生成	はい	SDK 内のチケットプラグインの一意の識別子。ServiceGo システムで取得できます
signature	String	署名暗号化された文字列	はい	SDK 認証に必要な署名。xref:ticket-sdk-custom-signature[詳細を確認]
timestamp	String	署名暗号化に使用されるタイムスタンプ文字列	はい	署名生成時に必要なタイムスタンプパラメータ。xref:ticket-sdk-custom-signature[詳細を確認]
userIdentity	String	SDK ユーザーの識別子	はい	現在ログインしているユーザーの一意の識別子（メールアドレス、電話番号など。ご自身の業務システムに基づいて指定してください）
position	Object	{ position: absolute, right: 0; bottom: 0 }	いいえ	ページに対するチケットプラグインのドッキング位置。相対位置または絶対位置を指定できます。絶対位置の場合は、上下左右の位置情報も指定できます：{ position: relative/absolute; left: 0, right: 0, top: 0, bottom: 0 }
height	String	100%	いいえ	カスタム SDK の高さを設定します
width	String	100%	いいえ	カスタム SDK の幅を設定します
theme	String	"default"	いいえ	カスタム SDK のテーマを設定します。なお、このプラグインには組み込みのマルチテーマは提供されていません。ご自身のニーズに応じて複数のテーマを設定し、この属性を使用して切り替えることができます。
language	String	ZH-CN	いいえ	SDK の国際化言語設定を構成します。デフォルト言語は中国語です。現在は中国語のみをサポートしています。より多くの言語をサポートする必要がある場合は、Udesk カスタマーサポートにお問い合わせください。
suppressDeprecationWarning	Boolean	true	いいえ	チケットプラグインは API 検出メカニズムを提供しています。将来の新しいバージョンでは、非常に初期の API 呼び出し方法のサポートを停止する可能性があり、同時にチケットプラグイン内で対応する通知を行い、新しいバージョンへのアップグレードを促します。これらの通知を表示したくない場合は、この属性を false に設定することで通知を禁止できます。
#### 署名認証アルゴリズムの初期化

顧客認証。SDKはまず顧客認証を行う必要があり、認証は以下のパラメータおよびsignature暗号化アルゴリズムを参照してください。

パラメータ名	型	値	必須	説明
clientAppId	String	システム生成	はい	SDK内のチケットプラグインの一意の識別子
clientAppKey	String	システム生成	はい	ServiceGoシステムテナントの秘密鍵
timestamp	String	タイムスタンプ	はい	リクエストを開始した時のタイムスタンプで、1970-01-01T00:00:00から現在までの秒数。生成された署名はサーバー側で有効性が検証され、有効期限は5分です。

1、以下のパラメータと順序で文字列を連結し、&で区切ります: clientAppId、clientAppKey、timestamp。

signature_content = clientAppId&clientAppKey&timestamp

clientAppIdはServiceGoシステムで取得でき、取得方法は【管理センター-チケットコンポーネント-チケットコンポーネント情報編集内のId】です。 clientAppKeyはServiceGoシステムで取得でき、取得方法は【管理センター-システム設定-基本設定情報内の秘密鍵】です。

2、 SHA1 アルゴリズムを使用して署名文字列のハッシュ値を計算します

signature_str = sha1(sign_str)

インスタンス初期化コード

Udesk.ticket.sdk.init({
    clientAppId: "XXXXXXX-XXXXXXXXXXX-XXXXXXXX-XXXXXX",
    signature: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    userIdentity: "135XXXXXXXX",
    timestamp: "1510884424",
    position: {
        position: relative
    },
    height: "100%",
    width: "100%",
    theme: "default",
    language: "ZH-CN"
});

メソッド説明

メソッド名	パラメータ	説明
setNewTicketExtraData	{}	新規チケット作成時の追加データを設定します。この方法により、新規チケット作成時に、プログラムでいくつかの追加フィールドを付加することができます。このメソッドは、UIでは見えないフィールドの値を送信する際に非常に便利です。
setLocales	{}	このメソッドにより、現在の言語における特定の国際化リソースを変更できます。リソースはすべてkey: valueペアの形式で提供されます。
setUserIdentity	{}	このメソッドは、現在ログインしているユーザーの一意の識別子userIdentityを指定できますが、サーバーへの実際のリクエストを送信する前に完了する必要があります。

四、NewTicketクラスの使用説明

NewTicketクラスは新規チケット作成フォームをインスタンス化します

パラメータ説明

パラメータ名	型	値	必須	説明
container	Element	document.body	いいえ	インスタンス化されたフォームの親要素
height	String	"100%"	いいえ	インスタンス化されたフォームの高さを設定します（initで設定された高さを上書きします）
width	String	"100%"	いいえ	インスタンス化されたフォームの幅を設定します（initで設定された幅を上書きします）
position	String	{}	いいえ	インスタンス化されたフォームの位置スタイルを設定します（initで設定された位置スタイルを上書きします）
classNames	String	"test"	いいえ	インスタンス化されたフォームのclass属性を設定します
#### 方法説明

メソッド名	パラメータ	説明
destroy	なし	レンダリングされたNewTicketコンポーネントを破棄する

使用例

new Udesk.ticket.sdk.NewTicket({
    container: document.body
    height: "100%",
    width: "100%",
    position: {
        position: relative
    },
    classNames: "example"
});

五、TicketListクラス使用説明

TicketListクラスはチケットリストフォームをインスタンス化します。ユーザーは自分が作成したチケットを閲覧できます。 チケットをクリックすると、チケット詳細ページに移動し、チケットの詳細情報を確認したり、チケットにコメントしたり、サポート担当者からの返信状況を確認したりできます。

パラメータ説明

パラメータ名	型	値	必須	説明
container	Element	[Element body]	いいえ	インスタンス化するフォームの親要素
height	String	"100%"	いいえ	インスタンス化するフォームの高さを設定します（initで設定した高さを上書きします）
width	String	"100%"	いいえ	インスタンス化するフォームの幅を設定します（initで設定した幅を上書きします）
position	String	{}	いいえ	インスタンス化するフォームの位置スタイルを設定します（initで設定した位置スタイルを上書きします）
classNames	String	"test"	いいえ	インスタンス化するフォームのclassを設定します

方法説明

メソッド名	パラメータ	説明
destroy	なし	レンダリングされたTicketListコンポーネントを破棄する

使用例

new Udesk.ticket.sdk.TicketList({
    container: document.body
    height: "100%",
    width: "100%",
    position: {
        position: relative
    },
    classNames: "example"
});