Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ShifterにZendeskに連携する問合せフォームを作ってみる
Search
Fumiya Osaka
May 20, 2020
Technology
0
1.7k
ShifterにZendeskに連携する問合せフォームを作ってみる
[5/20 Zoom 開催] Shifter オンラインミートアップ! での登壇資料
https://eventregist.com/e/XnxQC63841qb?lang=ja_JP
Fumiya Osaka
May 20, 2020
Tweet
Share
More Decks by Fumiya Osaka
See All by Fumiya Osaka
SaaSインテグレータのプリセから見たAWS
fmyosaka
1
140
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
710
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
fmyosaka
0
140
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
690
Other Decks in Technology
See All in Technology
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
150
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
120
完璧を捨てろ! “攻め”のQAがもたらすスピードと革新/20250306 Hiroki Hachisuka
shift_evolve
0
150
Pwned Labsのすゝめ
ken5scal
2
580
Охота на косуль у древних
ashapiro
0
130
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
270
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
180
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
250
AIエージェント入門
minorun365
PRO
35
20k
User Story Mapping + Inclusive Team
kawaguti
PRO
3
550
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
200
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
130
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Agile that works and the tools we love
rasmusluckow
328
21k
BBQ
matthewcrist
87
9.5k
Visualization
eitanlees
146
15k
Gamification - CAS2011
davidbonilla
80
5.2k
Code Reviewing Like a Champion
maltzj
521
39k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Transcript
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