ZendeskとShopifyを連携させて、Zendesk上でShopifyの注文を操作してみた

2021.06.20

コンタクトセンターアプリケーションの理想は、1つの画面上で対応に必要な情報を参照でき、操作も行えることです。

コンタクト履歴の検索や登録、顧客検索(コンタクト履歴が顧客に紐づいてる場合)、電話操作画面など、最低限必要なもの以外にコンタクトセンターで取り扱う業務特有の機能を提供する画面も必要になってきます。その場合、Zendeskのようなコンタクト管理システムをメインに開発していくのか?それとも業務システムをメインにしてコンタクト履歴機能や電話操作画面などを開発していくのか?といったことを毎回考えることになります。

どちらの画面をメインにするのかはケースバイケースであると感じておりますが、ShopifyとZendeskを使用している環境の場合は、Shopifyアプリを活用してZendesk側にShopifyの注文管理機能を組み込むという選択肢がございます。

今回はそれを行うためのセットアップから動作確認までやってみました。

Shopifyアプリ (Zendesk) のインストール

Shopifyの管理画面にログインした状態で下記へアクセスします。

https://apps.shopify.com/zendesk?locale=ja

アプリ管理 > アプリを探す から検索ボックスに zendesk と入力する方法でも結構です。

アプリを追加するボタンを押します。

確認画面が出るので アプリをインストール を押します。

Shopifyと連携させるZendesk環境のサブドメインを入力し、 Submit を押します。

Zendesk環境へのログインが求められたら、ログインします。

Zendeskの画面に移動します。任意のコネクション名を入力して、 接続 を押します。

その後、下記画面が表示されたら、 アプリを更新する を押します。

Zendeskの管理画面の インテグレーション > Shopify に接続したShopify情報が表示されていればShopifyアプリのインストール完了です。

Shopifyの管理画面の アプリ管理 にZendeskが表示されていることも確認しておきます。

Zendesk SupportのWeb Widgetを有効にする

Zendeskの管理画面の インテグレーション > Shopify > {{設定したコネクション名}} > Web Widget を選択して、 Web Widgetを有効にする にチェックをつけて保存します。

Support設定 のリンクから移動できますが、Zendesk Supportの管理画面の 設定 > ウィジェット > {{設定対象のウィジェット}} を選択して 設定 タブにあるソースコードをコピーしておきます。このあとShopifyのテーマテンプレートファイルに貼り付けます。

Shopifyの管理画面を開き、 販売チャネル > オンラインストア > テーマ を選択します。 現在のテーマアクション > コードを編集する を選択し、 theme.liquid を開いて </body> タグの上に吐きほどコピーしたZendesk Support Widgetのタグを貼り付けます。保存するボタンを押して保存します。

Shopifyサイトを表示します。ページの右下にウィジェットが表示されております。

Shopifyのサイト上からサポートチケットを起票できるので、入力して送信してみます。

送信結果を確認してみます。

Zendesk Support上にチケットが登録されております。

リクエスタが入力したメールアドレス、Web Widget経由でチケットが起票されております。

ここはZendesk内の話ですが、チケットに返信するとリクエスタのメアドにメール通知が届いております。

Zendesk Support用サイドバーアプリを有効にする

Zendeskの管理画面の インテグレーション > Shopify > {{設定したコネクション名}} > サイドバーアプリ を選択して、 Support用サイドバーアプリ設定 をクリックします。

インストール をクリックします。

サイドバーアプリ返金とキャンセル にチェックをつけて、 保存 をクリックします。

チケット画面(ここでは新規登録)を開き、右側のアプリバーを展開すると、 Shopifyの {{設定したコネクション名}} が見出しになっているアプリ画面が出てきます。

Shopifyから注文情報を取得する条件は下記です。

https://support.zendesk.com/hc/ja/articles/360054030413 より

Supportでは、インテグレーションにShopifyの注文情報を取得させるには、チケットリクエスタのメールアドレスまたは電話番号と、Shopifyの注文およびアカウントのメールアドレスまたは電話番号を一致させる必要があります。Chatでは、訪問者がメールアドレスまたは電話番号を提供した場合、Shopifyにその訪問者と同じメールアドレスまたは電話番号が見つかれば、注文情報が取得されます。

動作確認をしていてハマったのは、エイリアスのメールアドレスだと注文情報を取得できませんでした。

Zendesk Supportサイドバーアプリで注文に紐づく顧客情報を表示する

Zendeskサイドバーアプリの注文者名の横の Shopifyで表示 のリンクをクリックすると、Shopifyの顧客情報が表示されます。

Zendesk Supportサイドバーアプリで注文情報を表示する(サイドバーアプリ画面)

Zendeskサイドバーアプリの注文番号をクリックすると、

Zendeskサイドバーアプリ上で注文情報が表示されます。

Zendesk Supportサイドバーアプリで注文に紐づく商品情報を表示する

Zendeskサイドバーアプリの商品名をクリックすると、

Shopifyの商品情報画面が表示されます。

Zendesk Supportサイドバーアプリで注文情報を表示する(Shopify画面)

Zendeskサイドバーアプリの注文を表示をクリックすると、

Shopifyの注文情報画面が表示されます。

Zendesk Supportサイドバーアプリで注文をキャンセルする

Zendeskサイドバーアプリ上の 注文をキャンセル ボタンをクリックすると、そのまま注文キャンセル画面が表示されます。

キャンセルを確定 ボタンをクリックすると、

キャンセルが確定します。 終了する ボタンをクリックして画面を閉じます。

注文者にキャンセル完了メールが送信されております。

Zendesk Supportサイドバーアプリで注文を返金する

Zendeskサイドバーアプリの注文を表示をクリックして

Zendeskサイドバーアプリ上の 注文を返金 ボタンをクリックすると、

返金情報の入力画面が表示されます。

返金情報を入力して、 返金を確認 ボタンをクリックすると、

返金確認画面が表示されます。 返金を確定 ボタンをクリックすると、

返金が確定します。 終了する ボタンをクリックして画面を閉じます。

注文者に返金通知メールが送信されております。

Zendesk Chat用サイドバーアプリを有効にする

Zendeskの管理画面の インテグレーション > Shopify > {{設定したコネクション名}} > サイドバーアプリ を選択して、 Chat用サイドバーアプリ設定 をクリックします。

インストール をクリックします。

サイドバーアプリ にチェックをつけて、 保存 をクリックします。

Shopifyサイト上でチャットを開始してみます。Shopifyサイトの右下の チャット ボタンをクリックします。

チャットを開始します。

Zendesk Support画面上でチャットに応答します。応答したら メールアドレス を入力します。

実際の運用ではチャット上で本人確認を行ない、メールアドレスを確認し、Shopify上の情報を取得するといった流れになると思います。

チャット応対画面上にもShopify上の注文情報の参照、操作が可能になっております。

おわりに

API連携やアプリ連携のおかげで、だいぶシステム連携がしやすくなりましたが、とはいえ、どこを軸にしていくか?というのは毎回悩みます。面白いところでもありますが。

参考情報