Zendeskはチャット、メール、チケット、レポート、ヘルプセンター(FAQサイト)構築など様々なカスタマーヘルプ支援サービスを提供するクラウド型のソフトウェアです。
公式ページでは以下のように説明があります。
Web Widget(従来版)では、Zendesk Guide、Support、Talk、Chatなどのカスタマーサポート機能をWebサイトやヘルプセンターに追加することができます。これにより、カスタマーは1つのインターフェイスから、好きな形式でサポートを受けることができます。
Zendeskでは様々なAPIが用意されているようですが、この記事はWebWidget(従来版)のAPIを実行してみようと思います。
WebWidget(従来版)のAPIはJavascriptで提供されているので、
そのAPIを使用し、Webページに追加するということを実施します。
Zendeskを使用するためには、まずユーザ登録が必要となります。
ユーザ登録は他のサービスでもよくあるように個人情報を入力して登録すると、メールアドレスに認証メールがくるので、そこにアクセスすればZendeskへの登録完了となります。
こちらから登録を行うと、アカウントが発行されます。
※Zendeskは有料サービスですが、試用期間(トライアル)として2週間無料で使用することができるので、まずどんなことができるのかを試すことができます。
まず、WebWidget(従来版)とはどのようなものなのかを理解するためにZendeskでAPIを使用せず設定できるWebWidget(従来版)を確認します。
以下キャプチャのようにTopページの左のメニューの「WebWidget(従来版)」をの項目をクリックします。
右の画面が表示されるので、「カスタマイズ」タブのWebWidget(従来版)のスイッチを全てONにして、一番右下の保存ボタンをクリックします。
以下では例としてヘルプセンターのWebWidget(従来版)の確認をします。
以下キャプチャのようにTopページの右上の4つの四角のマークから「Guide(ヘルプセンターの活用)」の項目をクリックします。
右下に出ている「ヘルプ」ボタンがWebWidget(従来版)です。
※反映するまで時間がかかると記載があったので、以下のボタンが存在しない場合は少し待ってからアクセスしてみてください。
WebWidget(従来版)のAPIを使用するためには、スクリプトタグを取得する必要がありますので、スクリプトタグを取得します。
以下キャプチャのようにTopページの左のメニューの「WebWidget(従来版)」をの項目をクリックします。
※こちらのスクリプトタグは後ほど使用します。
右の画面が表示されるので、「設定」タブの真ん中下部あたりにある「クリップボードにコピー」ボタンを押下します。
それではいよいよ以下のzendesk developpersの公式APIリファレンスのページに記載されているヘルプセンターのAPIについて実施していこうと思います。
※デフォルトは英語となっています。
※基本的な流れは以下の「参考URL2」を参考にしています
参考URL:https://developer.zendesk.com/api-reference/widget/api/
まず、任意のパスに「test.html」というファイルを作成します。
次にそのファイルを編集していきます。
※できればVisualStudioCodeなどを使用した方が良いと思いますが、テキストエディタでも作成はできます。
以下のコードを貼り付けて保存してください。
Hello, World!
test.htmlをダブルクリックしブラウザで開くと、以下の画面が表示されると思います。
まず、「WebWidget(従来版)のスクリプトタグの取得」の手順でスクリプトタグをコピーします。
(コピーボタンを押下した状態で良いです。)
以下の例のように「test.html」に貼り付け保存します。
Hello, World!
ファイルを開き、ブラウザで開くと以下のようにWebWidget(従来版)がページに追加されます。
「ヘルプ」ボタンをクリックすると以下の画面が表示されます。
上記画面で「連絡をとる」ボタンを押下すると以下の画面が表示されます。
上記画面で「メッセージを残す」をクリックすると以下画面が表示されます。
「名前」と「メールアドレス」に任意の値を入力し、「送信」ボタンを押下します。押下すると以下の画面が表示されます。
上記操作を実施すると、Topページのビュー画面をクリックすると、
チケットとして追加されます。
WebWidget(従来版)の配置は3−2で実施しましたが、その他操作について説明していきます。
以下のようにファイルにコードを追記し保存します。
Hello, World!
ファイルをクリックし、ブラウザで開くと以下のようになります。
以下のようにファイルにコードを追記し保存します。
Hello, World!
ファイルをクリックし、ブラウザで開くと以下のようになります。
以下のようにファイルにコードを追記し保存します。
Hello, World!
ファイルをクリックし、ブラウザで開くと以下のようになります。
以下のようにファイルにコードを追記し保存します。
Hello, World!
ファイルをクリックし、ブラウザで開くと以下のようになります。
ボタンを押下すると以下画面のようにWidget(従来版)が非表示となります。
以下のようにファイルにコードを追記し保存します。
Hello, World!
ファイルをクリックし、ブラウザで開くと以下のようになります。
※以下画面は「Hide Web Widget」ボタンを押下して、WebWidget(従来版)を非表示にした状態です。
「Show Web Widget」ボタンを押下するとWebWidget(従来版)が再表示されます。
ZendeskのAPIは、WebWidgetAPI以外も様々存在するので、他の記事で検証してみたいと思います。