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.8k
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
150
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
750
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
fmyosaka
0
150
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
720
Other Decks in Technology
See All in Technology
What’s new in Android development tools
yanzm
0
310
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
ゼロからはじめる採用広報
yutadayo
3
950
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
110
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf 2023
tenderlove
30
1.1k
Done Done
chrislema
184
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building an army of robots
kneath
306
45k
Code Reviewing Like a Champion
maltzj
524
40k
Six Lessons from altMBA
skipperchong
28
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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