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
150
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
730
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
fmyosaka
0
140
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
700
Other Decks in Technology
See All in Technology
更新系と状態
uhyo
8
2.2k
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
2
520
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
1
530
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
450
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
5.1k
genspark_presentation.pdf
haruki_uiru
1
210
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
650
Gateway H2 モジュールで スマートホーム入門
minoruinachi
0
130
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
380
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
110
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
21
4.5k
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
150
Featured
See All Featured
Side Projects
sachag
453
42k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
420
Automating Front-end Workflow
addyosmani
1370
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Applications with DynamoDB
mza
94
6.4k
RailsConf 2023
tenderlove
30
1.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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