ShifterにZendeskに連携する問合せフォームを作ってみる

[5/20 Zoom 開催] Shifter オンラインミートアップ！ での登壇資料
https://eventregist.com/e/XnxQC63841qb?lang=ja_JP

Transcript

1. Shifter オンラインミートアップ 2020.05.20
   株式会社エクレクト 逢坂文哉
   ShifterにZendeskに連携する問合せフォームを作ってみる
   

   View Slide

2. 2
   自己紹介
   逢坂 ⽂哉（おおさか ふみや）
   出⾝: ⼤阪市此花区
   住まい: 兵庫県⻄宮市
   勤務: なんばのWeWork（無限⽣ビールが復活しないといかない）
   職歴:
   出版・印刷業を相⼿にするSIerでSE: 4.3年
   AWSとか物理サーバとかApacheの再起動とかを売る営業・プリセ: 5年
   エクレクトでZendeskに関わるいろんなこと: 0.7年
   ※フロントエンドちゃんとやったことありません...
   Shifter歴: 0.3年（前回の1⽉神⼾のMeetupの書初め回から）
   コミュニティ:
   JAWS-UG Osaka
   JAWS-UG Sales
   Cloud Native Kansai
   趣味:
   映画: スピルバーグとタランティーノと成瀬⺒喜男を敬愛
   ⾳楽: すべての踊れる⾳楽を愛しています
   あとお酒を飲むのが普通の⼈より少しよけいに好きです
   

   View Slide

3. 3
   ShifterにZendeskに連携するフォームを作ってみる
   

   View Slide

4. 4
   Shifter歴を鑑みてご拝聴ください。。。
   

   View Slide

5. 5
   そもそもShifterで作ったサイトに問合せフォームを置くには？
   前提︓WPサーバで何か（postfixとか、phpがdb内の設定⾒に⾏くとか、phpがどこかにWebhook投げ
   るとか）が動かないといけないフォームは動かない
   ⽅法︓その何かの代わりをしてくれる何かを組み合わせる
   代わりの何かs︓
   ・WP Serverless Forms + Basin（フォームのバックエンドサービスでメール送信したりする）
   ・FormKeep（フォームのバックエンドサービスだけどformのactionでpostすれば使えるっぽい）
   ・Formspree （フォームのバックエンドサービスだけどformのactionでpostすれば使える）
   ・API Gateway（マッピングテンプレート頑張る） + Lambda + SNS とかを頑張って作る...
   etc...?
   

   View Slide

6. 6
   そもそもZendeskって？
   複数チャネルからのお問合せや
   コンタクトを集約しチケット化する
   コミュニケーション統合プラットフォーム
   外部システム連携
   アプリケーション
   ブログのようにメンテナンスしやすい
   FAQサイト構築ソフトウェア
   デザインのカスタマイズも自由です
   Webサイトなどに簡単に設置できる
   リアルタイムチャットソフトウェア
   AIサービスとの連携も可能です
   コールセンターに必要な様々な機能を
   備えた、簡単に構築ができるクラウド
   型のコールセンターソフトウェア
   Zendesk各種製品に蓄積されたデータ
   を集約し、分析するBIソフトウェア
   CX全体の測定と改善を可能にします
   マーケットプレイスからのインストール/
   オリジナルアプリケーションの開発によって
   より使いやすい環境の構築が可能
   基幹システム/コミュニケーションシステム
   受注管理システム/CRMやSFA
   様々なシステムとの連携が可能
   各関係部署
   カスタマー
   無制限のデータ蓄積
   Zendeskの製品群は、顧客とオムニチャネルでシームレスにコミュニケーションをするために必要な、あらゆるサービスを提供します。
   オペレーター
   

   View Slide

7. 7
   Shifterで作ったサイトで問合せフォームをZendeskに連携してみるには？
   まずは既存のWP PluginをShifterで作ったサイトで試してみる
   

   View Slide

8. 8
   Shifterで作ったサイトで問合せフォームをZendeskに連携してみるには？
   まずは既存のWP PluginをShifterで作ったサイトで試してみた
   動かない
   Zendeskアカウントと連携して、フォーム
   を表⽰するところまではいくけど、送信す
   る時に wp-admin/admin-ajax.phpを呼
   ばはる。
   動かないっぽい︖
   Zendeskアカウントと連携するまではいく
   けど、Zendeskのフォームを読み込む設定
   の段階でうまくいかないが、そっから深堀
   りしてない。
   試してない
   Gravity Forms⼊れるのがもう⾯倒だ︕た
   ぶん動かんだろう︕と思って、試してませ
   ん︕動いたらごめん︕
   動くけど...
   

   View Slide

9. 9
   Zendesk Support for WordPress Plugin
   FAQを検索できたり、メッセージを残せたり、チャットできたりする便利なウィジェットが表⽰されます。
   もともとイメージしていた所謂「フォーム」とは違うけど、機能的にはこれでいいんじゃ...
   

   View Slide

10. 10
    Shifterで作ったサイトで問合せフォームをZendeskに連携してみるには？
    ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう
    ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう
    ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう
    ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう
    すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける...
    ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕
    適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w
    

    View Slide

11. 11
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    ひとまずこのブログを参考に進めます
    

    View Slide

12. 12
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Formspreeにサインアップ
    

    View Slide

13. 13
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    そのままログインできちゃうけど、フォームを作る前にメールアドレスのVerifyが必要。
    「Action Requied: Verify email linked to Formspree」という件名のメールが⾶んで来てる。
    

    View Slide

14. 14
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    フォームを作る。
    フォーム名を⼊⼒するだけでOK。
    

    View Slide

15. 15
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Zendesk Pluginを有効にする。
    

    View Slide

16. 16
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Zendesk Pluginを有効にする︖︖︖
    

    View Slide

17. 17
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    GOLDプランが必要だったので$10払う。。。
    

    View Slide

18. 18
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Zendesk Pluginを有効にする。
    Zendeskのサブドメインを⼊⼒して接続。
    

    View Slide

19. 19
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Zendeskにログインして、ブランドを選んだら、Formspree側の設定はほぼ完了。
    あとは、タイムゾーン変えたり、メール通知⽌めたり、reCAPTCHAを有効にしたり。
    

    View Slide

20. 20
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Shifterにサインインして、WPを⽴ち上げて、ダッシュボードでフォームの固定ページを作る。
    

    View Slide

21. 21
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    ShifterでGenerateして、フォームの動作確認
    

    View Slide

22. 22
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Submitすると、formspree.ioに遷移して、reCAPTCHAが出てきて、送信完了。
    

    View Slide

23. 23
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみる！
    Zendeskにこんな感じのチケットができた︕
    

    View Slide

24. 24
    Shifterで作ったサイトで問合せフォームをFormspreeのPluginでZendeskに連携してみた！
    ・すっごく簡単にできるけど、$10/month必要。
    ・Zendesk側のカスタムフィールドと連動できればなおよい。（リクエスト投げてみたけど実装する気なさ
    そう）
    ・最初のコメントに余計な値（_replyto, _name, _priority）が⼊るから、そのまま返信しづらい。
    ・このへんはZendesk側で⼯夫（トリガで、liquidで加⼯したjsonをAPIに投げるとか）すればなんとかな
    るかも。
    ・お⾦を払いたくなければ、単純にZendeskのサポートアドレスにFormspreeでメール投げるでもいいかも。
    （ホワイトリストにformspree.ioを⼊れないとSuspende Ticketになるので注意）
    ・フォームでの⼊⼒値のバリデーションとか、⼊⼒値によって違うフィールド表⽰させるとかは⼯夫が必要
    ・やっぱり、Zendesk⾃体のフォームへのリンク貼るか、ウィジェット使うのがいいんでないか説が有⼒...
    

    View Slide

25. 25
    Thank you
    

    View Slide