見出し画像

NotionAPIでChilipepperと連携したよ

今回はまんまタイトルの通りのことをやっただけです!
APIの初期設定についてはこちらの丁寧な記事を読んでいただいたほうがわかりやすいです。Zapier噛ませるとなんでもできちゃいますね!

んでんでこの記事何がしたいの

ごく簡単な動作確認としてChilipepperから入力→Notionにデータ反映をやってみます。
Chilipepperは自由にフィールドが作れるフォームサービスなので、今回はぼんやりとしたタスクの入力という想定でやりますがもっとわかりやすいテーマがあったとは思う……ちゃんと動いて何ができるかわかってもらえばいいのでそのままやります。(わかれ)
まずこんな感じのフルサイズテーブルをNotionで作ります。

画像1

画像2

タグの中身はあいうえおとか何でもいいです。Chilipepper側のプルダウンと連携できるよってことを説明したいだけなので。

右上のShareから冒頭記事を参考に作ったIntegrationを選んでInviteし、そのままCopy linkの画面出しときます。

画像3

ここからChilipepper側で作業します。

画像4

フォームをつくるよー!って言うとデフォルトでこの画面が出てくると思いますが右下のNextで気さくにすっ飛ばして

画像5

Connect to Notionを選択。

画像6

画像7

API使うよ宣言。一旦Notionに戻って

画像8

Integrationからトークンもらってきます。ぼかし方めっちゃ雑ですね。
トークン入れてOK押したら元気なBotが産まれたよ!②のNotion Table Page URLにはさっき作ったテーブルのリンクを貼り付けて

画像9

ちゃんと認証できれば③のMap fieldsが自動生成されます。ここではまだ名寄せしません。一旦Go Back。

画像10

こんなフォームを作ります。内容(プルダウンフィールド)にNotionのデータを引っ張ってきたいのでCopy from Notionを押して

画像11

こうやって名寄せをしてConfirmすると

画像12

画像13

プルダウンができたね!やったね!フォームのプレビューが自分好みになったらさくさくと画面を飛ばして

画像19

Paid Plan、何ができちゃうんだろう。ともあれ今はFree Planしかないのでこれでフォームを作ります!

画像15

Copy linkして

画像16

自分のNotionのどこでもいいのでEmbed(埋め込み)

画像17

ヌッとフォームが現れるので好きなことを書き殴って最初のテーブルにちゃんと反映されるか確認。

画像18

うお、4行目ににょきっと生えてきた。

お疲れ様でした!

画像19

私は個人用ポートフォリオの問い合わせフォームに使っています。というかそれが一番想定しやすい使い方だったねごめんね。

↑この問い合わせフォーム用のテーブル公開しておくんで許してお兄さん

いつもの宣伝

個人の方・小規模サイトに限り無償でデザイン~コーディングやらせていただいてます!まだ依頼0件なので使えそうだなと思ったらぜひ!

ちょこちょこご相談はいただくんですが、Web上に作品を公開したり告知をしたりするプラットフォームがこれだけ無償で充実している中、わざわざレンタルサーバーというランニングコストつきでやる?どうする?という詰め寄り方をしているため怖がって誰も来ないという説があります……すみません……でも大事なことは先に言っとかないとね!


この記事が気に入ったらサポートをしてみませんか?