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

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 趣味: 映画: スピルバーグとタランティーノと成瀬⺒喜男を敬愛 ⾳楽: すべての踊れる⾳楽を愛しています あとお酒を飲むのが普通の⼈より少しよけいに好きです 

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

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

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...? 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 Thank you