ZendeskのWebWidgetAPIを叩いてみた

Zendeskについて

Zendeskとは

Zendeskはチャット、メール、チケット、レポート、ヘルプセンター（FAQサイト）構築など様々なカスタマーヘルプ支援サービスを提供するクラウド型のソフトウェアです。

WebWidget(従来版)とは

公式ページでは以下のように説明があります。

Web Widget(従来版)では、Zendesk Guide、Support、Talk、Chatなどのカスタマーサポート機能をWebサイトやヘルプセンターに追加することができます。これにより、カスタマーは1つのインターフェイスから、好きな形式でサポートを受けることができます。

参考URL：https://support.zendesk.com/hc/ja/articles/203908456

APIについて

Zendeskでは様々なAPIが用意されているようですが、この記事はWebWidget(従来版)のAPIを実行してみようと思います。

この記事で実施すること

WebWidget(従来版)のAPIはJavascriptで提供されているので、

そのAPIを使用し、Webページに追加するということを実施します。

API使用までの準備

Zendeskにユーザ登録

Zendeskを使用するためには、まずユーザ登録が必要となります。

ユーザ登録は他のサービスでもよくあるように個人情報を入力して登録すると、メールアドレスに認証メールがくるので、そこにアクセスすればZendeskへの登録完了となります。

こちらから登録を行うと、アカウントが発行されます。

※Zendeskは有料サービスですが、試用期間（トライアル）として２週間無料で使用することができるので、まずどんなことができるのかを試すことができます。

WebWidget(従来版)の設定ページにアクセス

まず、WebWidget(従来版)とはどのようなものなのかを理解するためにZendeskでAPIを使用せず設定できるWebWidget(従来版)を確認します。

以下キャプチャのようにTopページの左のメニューの「WebWidget（従来版）」をの項目をクリックします。

右の画面が表示されるので、「カスタマイズ」タブのWebWidget(従来版)のスイッチを全てONにして、一番右下の保存ボタンをクリックします。

次に、ページの一番上に戻り、「設定」タブをクリックします。以下のタブに遷移するので、一番下の「ヘルプセンターに追加」のスイッチをONにします。

WebWidget(従来版)の確認

以下では例としてヘルプセンターのWebWidget(従来版)の確認をします。
以下キャプチャのようにTopページの右上の4つの四角のマークから「Guide（ヘルプセンターの活用）」の項目をクリックします。

クリックすると以下のヘルプセンターのページにアクセスできます。
右下に出ている「ヘルプ」ボタンがWebWidget(従来版)です。

※反映するまで時間がかかると記載があったので、以下のボタンが存在しない場合は少し待ってからアクセスしてみてください。

「ヘルプ」ボタンをクリックすると以下の画面が表示されます。

WebWidgetのスクリプトタグの取得

WebWidget(従来版)のAPIを使用するためには、スクリプトタグを取得する必要がありますので、スクリプトタグを取得します。

以下キャプチャのようにTopページの左のメニューの「WebWidget（従来版）」をの項目をクリックします。

※こちらのスクリプトタグは後ほど使用します。

右の画面が表示されるので、「設定」タブの真ん中下部あたりにある「クリップボードにコピー」ボタンを押下します。

API実行

それではいよいよ以下のzendesk developpersの公式APIリファレンスのページに記載されているヘルプセンターのAPIについて実施していこうと思います。

※デフォルトは英語となっています。

※基本的な流れは以下の「参考URL2」を参考にしています

参考URL：https://developer.zendesk.com/api-reference/widget/api/

参考URL2：https://developer.zendesk.com/documentation/classic-web-widget-sdks/web-widget/quickstart-tutorials/web-widget-javascript-apis/

API確認用ファイル作成

まず、任意のパスに「test.html」というファイルを作成します。

次にそのファイルを編集していきます。

※できればVisualStudioCodeなどを使用した方が良いと思いますが、テキストエディタでも作成はできます。

以下のコードを貼り付けて保存してください。

Hello, World!

test.htmlをダブルクリックしブラウザで開くと、以下の画面が表示されると思います。

WebWidgetAPI追加 と実行

まず、「WebWidget(従来版)のスクリプトタグの取得」の手順でスクリプトタグをコピーします。

（コピーボタンを押下した状態で良いです。）

以下の例のように「test.html」に貼り付け保存します。       

Hello, World!

ファイルを開き、ブラウザで開くと以下のようにWebWidget(従来版)がページに追加されます。

「ヘルプ」ボタンをクリックすると以下の画面が表示されます。

上記画面で「連絡をとる」ボタンを押下すると以下の画面が表示されます。

上記画面で「メッセージを残す」をクリックすると以下画面が表示されます。

「名前」と「メールアドレス」に任意の値を入力し、「送信」ボタンを押下します。押下すると以下の画面が表示されます。

上記操作を実施すると、Topページのビュー画面をクリックすると、

チケットとして追加されます。

WebWidgetAPIのその他の操作

WebWidget(従来版)の配置は3−2で実施しましたが、その他操作について説明していきます。

WebWidget(従来版)の色の変更

以下のようにファイルにコードを追記し保存します。       

Hello, World!

ファイルをクリックし、ブラウザで開くと以下のようになります。

WebWidget(従来版)の位置の変更

以下のようにファイルにコードを追記し保存します。

Hello, World!

ファイルをクリックし、ブラウザで開くと以下のようになります。

WebWidget(従来版)のロケール（言語）の変更

以下のようにファイルにコードを追記し保存します。

Hello, World!

ファイルをクリックし、ブラウザで開くと以下のようになります。

WebWidget(従来版)の非表示設定

以下のようにファイルにコードを追記し保存します。

Hello, World!

ファイルをクリックし、ブラウザで開くと以下のようになります。

ボタンを押下すると以下画面のようにWidget(従来版)が非表示となります。

WebWidget(従来版)の表示設定

以下のようにファイルにコードを追記し保存します。

Hello, World!

ファイルをクリックし、ブラウザで開くと以下のようになります。

※以下画面は「Hide Web Widget」ボタンを押下して、WebWidget(従来版)を非表示にした状態です。

「Show Web Widget」ボタンを押下するとWebWidget(従来版)が再表示されます。

最後に

ZendeskのAPIは、WebWidgetAPI以外も様々存在するので、他の記事で検証してみたいと思います。