お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月15日

Webflowロジックを使用してHubSpotで接続を確立する

Logic の HTTP リクエストの作成ブロックを使用して、Webflow フォームの送信から HubSpot に新しい連絡先を作成します。

HubSpot は、顧客データを監視して販売およびマーケティング戦略を最適化できる、広く使用されている顧客関係管理 (CRM) システムです。Logic を利用することで、フォーム送信から Hubspot に連絡先を効率的に転送し、Webflow ポータルを CRM と統合できます。

始める： まだ行っていない場合は、 HubSpotにアカウントを設定するさらに、HubSpot の必須フィールドと一致するフィールドを含むフォームが Webflow サイトに含まれていることを確認してください。

このチュートリアルでは、次の内容について説明します。

  1. HubSpot APIキーを生成するプロセス
  2. Logicワークフローの認証を設定する
  3. HubSpot API documentation の検索
  4. HTTPリクエスト設定の構成
  5. ワークフローのテストと展開
  6. ワークフローの潜在的な問題のトラブルシューティング

HubSpot APIキーの生成

覚えておいてください: HubSpotは2つの選択肢を提供します 認証方法 （OAuthとプライベートアプリアクセストークン）。このガイドでは、 プライベートアプリアクセストークン 方法。
  1. アクセス HubSpotアカウント そして、 プライベートアプリを作成するまだ行っていない場合は
  2. を選択 スコープ タブをクリックし、このAPIキーを使用して実行するアクションを CRM ドロップダウン（少なくとも crm.objects.contacts.write 連絡先をHubspotに送信する
  3. クリック トークンを表示 そしてあなたの APIキー

Logicワークフローの認証を構成する

  1. 新しいタブを開いてWebflowデザイナーでWebflowサイトを開きます
  2. デザイナーキャンバスでフォームを選択し、アクセスします フォーム設定
  3. を選択 ソース ドロップダウンから選択 論理
  4. クリック 新しいフローを追加
  5. 新しいフローに名前を付けます（例：「HubSpotで接続を確立」）。 名前 フィールドに説明を追加し、必要に応じて 説明 分野
  6. ドラッグ HTTPリクエストを行う フローエディタキャンバスにブロックを追加し、名前を割り当てます（例：「HubSpotで新しいコンタクトを開始」） 
  7. から 認証 ドロップダウンメニューで選択 APIトークン
  8. 選ぶ ヘッダ から に追加 オプション
  9. 「承認」と入力し、 ヘッダ 分野
  10. クリック 資格情報を選択 > 新しい資格情報を追加
  11. APIトークンに名前を付けます（例：「HubSpot APIトークン」）。 名前 フィールドに説明を記入し、 説明 必要に応じてフィールド
  12. 「ベアラー」と入力 {API キー}" の中に トークン フィールド、置換 {API キー} HubSpotからコピーしたAPIキー
  13. クリックして新しい認証情報を保存します 作成する そして確実に このタブを開いたままにしておく! 
プロのヒント: さらに、フォームを新しいロジックワークフローにリンクすることもできます。 ロジックパネル > 流れ タブ。フォーム送信トリガーに関する詳細は、Logic で確認できます。
ロジックがソースとして選択されている場合、フォーム設定に新しいフローの追加またはフローの参照のオプションが表示されます。
フォームとロジックの接続は、フォーム設定、フォームブロック設定、または ロジックパネル > 流れ タブ。
「追加先」ドロップダウンで「ヘッダー」を選択し、ヘッダー入力フィールドに「認証」を入力します。
「新しい資格情報」モーダル ウィンドウには、API 資格情報の名前、説明、タイプ、値のフィールドが表示されます。
ベアラー認証を採用しているAPI（例：HubSpot）の場合は、APIキーの前に「Bearer」を挿入することを忘れないでください。 トークン 分野。

HubSpot API documentation の検索

  1. 訪問 HubSpot APIリファレンス documentation
  2. 下にスクロール CRM 左パネルにあります
  3. 案内する オブジェクト > 連絡先 > 連絡先を作成する そして このタブを開いたままにする ガイダンスのために！

HTTPリクエスト設定の構成

ロジック フローと HubSpot 認証資格情報を設定したら、Webflow に戻ってフロー内の HTTP リクエストを定義します。この段階での HTTP リクエスト構成により、訪問者がフォームを送信するたびに、Hubspot に新しい連絡先が作成されます。

注記： Webflowサイトが開いていたタブを閉じた場合は、 ロジックパネル > 流れ タブを開き、前の手順で作成したフローを選択します。 HTTPリクエストを行う フロー エディター キャンバスのブロックをクリックしてブロック設定を開き、次の手順に進みます。
  1. 選ぶ 役職 から リクエスト方法 落ちる
  2. 「https://api.hubapi.com/crm/v3/objects/contacts」を貼り付けます。 URL 分野
  3. 隣にある「プラス」アイコンをクリックします ヘッダー 新しいヘッダーを追加する
  4. 「content-type」を入力 名前 フィールドと「application/json」 価値 分野 
  5. の中に 体 フィールドにコードスニペットを貼り付けます 連絡先の作成 HubSpotで提供される API 1TP32 チューニング — こんな感じになります（ただし、プロパティが含まれています） 

    { "organization": "Biglytics", "contact-email": "[email protected]", "givenname": "Bryan", "surname": "Cooper", "telephone": "(877) 929-0687", "webpage": "biglytics.net" }

続行するには、フォーム経由で受信した送信からデータを収集するために、HTTP リクエストにライブ情報を組み込む必要があります。

  1. HubSpotの連絡先から既存のコンテンツを消去し、空の引用符内にカーソルを置きます。 コンテンツ セクション
  2. 紫色を選択してくださいドット” 記号をクリックし、対応する動的フォーム要素 (名前、電子メールなど) を選択します。
コンテンツ セクションには、フォーム送信から姓、名、連絡先メールを取得するための動的フォーム コンポーネントが含まれます。
Hubspot にデータを送信するための包括的な HTTP リクエスト設定のセットアップには、認証プロセス、リクエスト手法、URL、ヘッダー、および Webflow フォームからデータを取得するための変数を含むリクエスト本文が含まれます。
Logic の Construct HTTP リクエスト ブロックから Hubspot への POST リクエスト全体。

シーケンスをテストしてリリースする手順

  1. プレス 構成を確定するためにテストを実行する
  2. 適切なフィールドにテスト値を入力します
  3. プレス テストを実行する
  4. タップする 終了 または データを受け入れる テストモードを終了する
  5. クリック 公にする
  6. 打つ 公開フローの準備
  7. ウェブサイトの公開に進む
ヒント： テスト プロセス中にエラー通知が発生した場合は、問題解決の手順に従って問題を解決し、前述の手順を繰り返します。HTTP リクエストの調査に関する追加の詳細を確認してください。

シーケンス内の懸念に対処する手順

シーケンスのテスト中にエラーが発生した場合は、次の対策を試してください。

  • 資格情報を設定するときに、API キーの前に「Bearer」（スペースを含む）が含まれていることを確認します（例：Bearer 123456789）
  • 次のような無料ツールを使用してリクエスト本文にエラーがないか検査します。 JSONリント
ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

によるユアン・マック
更新日