背景
私たちは普段、HubSpot経由で商談の日程調整をしています。その中で、HubSpotに溜まっていくコンタクトデータとNotionで管理している議事録の管理が煩雑になっていきました。
そこで、NotionとHubSpotのAPIを利用して、商談前後のワークフローを管理するUIをローコードツールのクエリアを使って構築することにしました。
要件
今回解決したい課題は以下のとおりです。
- Notion上の議事録とHubSpot上のコンタクトを手動で紐づけていると、ミスが発生する
- NotionとHubSpotを言ったり来たりしなければならなく、一覧性が低い&管理が煩雑になる
今回は上記課題を1つの画面で解決できるように、最小限の要件でまずは作ってみます。
- Querier上で、HubSpotに溜まっているコンタクト一覧を閲覧できる
- HubSpotのコンタクトを指定してNotion上に議事録を作る
- HubSpotのコンタクトのメモにNotionの議事録のリンクを自動で貼り付ける
NotionのAPIキーを取得する
NotionのAPIを使用するためには、まずAPIキーを取得する必要があります。このキーは、Notionのプラットフォームとの安全な通信を可能にし、あなたのアプリケーションがNotionのデータにアクセスできるようにします。以下の手順でAPIキーを取得できます。
1. Notionアカウントの作成
まだNotionアカウントを持っていない場合は、Notionの公式サイトにアクセスし、アカウントを作成します。
2. Notion開発者コンソールへのアクセス
Notionアカウントでログインした後、開発者コンソールにアクセスします。
3. 新しいIntegrationの作成
「New integration」ボタンをクリックして、新しい統合を作成します。
必要な情報（統合名、ワークスペースなど）を入力し、「Submit」をクリックします。
4. APIキーの取得
Integrationが作成されると、APIキーが表示されます。
このキーは、QuerierとNotionを連携する際に使用します。
HubSpotのAPIキーを取得する
HubSpotのAPIを利用するには、まずAPIキーを取得する必要があります。
このキーを用いることで、HubSpotのデータに安全にアクセスし、アプリケーションとの統合が可能になります。
1. HubSpotアカウントの作成
HubSpotアカウントがまだない場合は、HubSpotの公式サイトにアクセスしてアカウントを作成します。
2. HubSpotアカウントにログイン
HubSpotアカウントにログインします。
3. 設定へのアクセス
HubSpotダッシュボードの右上にある設定アイコン（歯車マーク）をクリックします。
4. APIキーの管理画面への移動
設定メニューの中から「統合」を選び、「APIキー」を選択します。
5. APIキーの生成
「APIキーの表示」または「APIキーの生成」をクリックします。
すでにAPIキーが生成されている場合は、そのキーを使用します。まだ生成されていない場合は、新しく生成します。
生成されたAPIキーは、QuerierとHubSpotを連携する際に使用します。
クエリアを使ってツールを構築する
1. クエリアとNotion、HubSpotを連携する
Notionと連携する
- クエリアのREST APIとの連携導線にアクセスする
- クエリア上で、 [Base URL] に
https://api.notion.comを入力する -
[Headers] に、
Content-Type: application/jsonとNotion-Version: 2022-06-28を入力する -
[認証方法] で
Bearerを選択する - [Bearerトークン] に取得したAPIキーを入力する
- [保存する] ボタンをクリックする。
HubSpotと連携する
- クエリアのREST APIとの連携導線にアクセスする
- クエリア上で、 [Base URL] に
https://api.hubspot.comを入力する -
[認証方法] で
Bearerを選択する - [Bearerトークン] に取得したAPIキーを入力する
- [保存する] ボタンをクリックする。
2. HubSpotのコンタクト一覧をテーブルに表示する
-
検索用のインプットとボタン、テーブルを配置する
-
データフローを作成し、データフロー名を
listContactsに変更する -
[アクションを選択] で先程連携した
HubSpot APIを選択する -
[Path] に
/crm/v3/objects/contacts/searchと入力する -
[Body] に以下のJSONを入力する
{
"sorts": [{
"propertyName": "createdate",
"direction": {{ select1.value }}
}],
"properties": [
"company",
"firstname",
"lastname",
"createdate",
"email",
"hs_lead_status",
"primary_company"
],
"limit": {{ input1.value }}
}
※{{ select1.value }} は Order用のセレクト、 {{ input1.value }} はLimit用のインプットを参照しています。
- JavaScriptのアクションを追加する
- 以下のJavaScriptでHubSpotから取得したデータを整形する
const data = {{ action1.data.results }}
return data.map(d => {
return {
"first_name": d.properties.firstname,
"last_name": d.properties.lastname,
"email": d.properties.email,
"create_date": d.properties.createdate,
"id": d.id,
"company": d.properties.company,
"hs_lead_status": d.properties.hs_lead_status
}
})
-
以下が完成したデータフローの全体像です
-
配置したテーブルの [データ] に
{{ listContacts.data }}と入力する
3. Notion上に議事録を作成する
- 議事録作成用のボタンを配置する
- データフローを作成し、データフロー名を
createNotionPageに変更する -
[アクションを選択] で先程連携した
Notion APIを選択する -
[メソッド] を
POSTに変更する -
[Path] に
/v1/pagesと入力する - Bodyに以下のJSONを入力する
{
"parent": {
"page_id": "b2a430dabc2c44bc8995100a8e20ce2b"
},
"properties": {
"title": [
{
"text": {
"content": {{ text8.value }}
}
}
]
}
}
- 新しいアクションを追加し、
HubSpot APIを選択する -
[メソッド] を
POSTに変更する -
[Path] に
/crm/v3/objects/notesと入力する - Bodyに以下のJSONを入力する
{
"properties": {
"hs_timestamp": {{ new Date() }},
"hs_note_body": {{ "Notion: " + action1.data.url }}
}
}
※{{ action1.data.url }} はaction1でNotion APIから取得したURLを参照しています。
- 1で配置したボタンに今回作成した
createNotionPageデータフローを紐づける
さいごに
今回は最小限のツールを解説しました。実際にお問い合わせが来たら、HubSpotとNotionを行き来することなく、クエリアの1つのページに入りオペレーションを完結できます。
今回は解説しませんでしたが、HubSpotからNotionのページURLを取得し、クエリアから議事録に飛べるようにしたり、HubSpot上のステータスをクエリアから変更したりと、様々な機能を追加することでより便利なツールを構築することが可能です。
運用上問題が出てきたら、すぐに修正したり、新しい機能を追加することができるのがローコードツールの良いところですので、ぜひ一度お試しください。
クエリアを無料で使ってみる: https://www.querier.io
Discussion