HubSpotアプリケーションを組み込む

Webflow マーケットプレイスからアクセスできる検証済みの HubSpot アプリケーションを使用して、HubSpot を Web サイトに埋め込むことができます。このアプリケーションを使用すると、HubSpot フォームを挿入およびデザインしたり、現在の Webflow フォームを HubSpot インスタンスにリンクしたり、HubSpot 要素やチャットボットを Webflow Web サイトに導入したり、サイト監視を設定したりできます。

従来の Enterprise 専用の HubSpot フォーム統合に関する詳細が必要な場合は、HubSpot フォームに関するチュートリアルを参照してください。

このガイドでは、次の内容について説明します。

1. HubSpotアプリケーションのインストールと許可の手順
2. HubSpotアプリケーションの機能と特徴   
3. HubSpotアプリケーションをアンインストールする方法のガイド
4. よくある質問とトラブルシューティングのヒント

HubSpotアプリケーションのインストールと許可のガイド

HubSpotアプリケーションを操作するには、まず HubSpotプロファイルを確立する次に、アプリケーションを設定およびカスタマイズします。

1. 訪問 HubSpot アプリケーションの詳細ページ
2. プレス サイトに追加
3. HubSpotアプリケーションにリンクするWebflowサイトを選択します
4. 要求された権限を確認する 
5. タップ アプリを承認
6. HubSpotアカウントを選択してください
7. タップ アカウントを選択
8. タップ アプリを接続 —ダッシュボードにリダイレクトされます

重要な： HubSpot アプリケーションをワークスペース全体に接続することはできません。アプリケーションをインストールして許可するときに、アプリケーションと統合する特定のサイトを選択してください。 

アプリケーションのインストールが正常に完了すると、デザイナーでアプリケーションにアクセスできるようになります。

1. 開く アプリパネル 
2. HubSpotアプリケーションにマウスを移動します
3. クリック 打ち上げ

デザイナーでのアプリケーションの利用について詳しくご覧ください。

HubSpotアプリケーションの機能と特徴

HubSpot アプリケーションを使用すると、マーケティング担当者やサイト所有者は、Webflow サイトと HubSpot 間の直接接続を確立することができ、次の 5 つの重要な機能を備えています。

1. WebflowにHubSpotフォームを埋め込み、スタイルを設定する
2. WebflowフォームをHubSpotにリンクする
3. WebflowサイトにHubSpot要素を組み込む
4. サイトの監視を処理する
5. HubSpotチャットボットをWebflowサイトに統合する

WebflowにHubSpotフォームを埋め込んでカスタマイズする

HubSpot アプリケーションを使用すると、サポートされている HubSpot フォームをデザイナー キャンバスに挿入して、サイトの外観やスタイルに合わせてフォームをカスタマイズできます。フォームを埋め込むには、次の手順を実行します。 

1. HubSpotアプリケーションを起動する
2. クリック 既存のHubSpotフォームをページに追加する 
3. フォームを埋め込むキャンバス上の場所を選択します
4. 埋め込むHubSpotフォームを選択します（サポートされている場合）
5. フォームのスタイルをHubSpotから採用するか、スタイルなしバージョンを使用するかを選択します。
6. クリック ページにフォームを追加
7. （オプション）好みに合わせてフォームをカスタマイズします

HubSpotフォームの管理について詳しく見る. 

重要な： reCAPTCHAフィールドなどの一部のHubSpotフォームフィールドは、HubSpot開発者プラットフォームの制限により現在サポートされていません。アプリケーションがフォームの埋め込みが不可能であると通知した場合、またはiframeソリューションを選択した場合は、 フォームの共有URL （HubSpotで入手可能）に HubSpot URLを共有 フィールドに入力して、フォームを iframe として埋め込みます。iframe 経由で埋め込まれたフォームのスタイルを設定する機能は失われますが、Hubspot 側で行われた変更が反映されるように自動的に更新されます。

WebflowフォームをHubSpotに接続する

HubSpot アプリケーションを使用して、既存の Webflow フォームを HubSpot アカウントにリンクすることもできます。接続を確立するには、次の手順を実行します。 

1. HubSpotアプリケーションを起動する
2. クリック WebflowフォームをHubSpotフォームにマッピングする 
3. Webflowキャンバス上でマッピングしたいフォームを選択します
4. 選択したフォームにフォームラベルが含まれていることを確認します
5. HubSpotフォームフィールドを対応するWebflowフォームフィールドと一致させる
6. クリック 保存

以下は、Webflow と HubSpot で互換性のあるフォーム フィールド タイプの概要です。記載されている Webflow フォーム入力タイプごとに、シームレスなデータ対応のための関連する HubSpot 入力タイプが見つかります。このガイドをリソースとして使用して、フォーム マッピング手順を効率化してください。

リマインダー： アプリケーションは、HubSpot のパスワード フィールドへのマッピングを容易にしません。

リンクされたフォームを管理するテクニック

アプリケーションメニューを起動して選択することで、ページ上の任意のフォームから接続を変更したりマッピングを切り離したりできます。 連結フォーム. 

HubSpotフォームの管理について詳しく見る. 

ご注意ください： Webflow フォームを「接続された Webflow フォーム」の下に表示するには、フォームを含むページにアクセスする必要があります。「関連付けられた Webflow フォーム」の下にフォームが見つからない場合は、Webflow ページに正しく配置されていることを確認してください。

WebflowサイトにHubSpotリソースを追加する

HubSpot アプリケーションを使用すると、HubSpot アカウントのあらゆるリソースを探索し、Webflow サイトに統合することができます。開始するには: 

1. HubSpot申請を開始する
2. プレス HubSpotリソースをサイトに統合する
3. 持ち込みたいリソースについて問い合わせて選択してください
4. リソースを含めるキャンバス上のコンポーネントを選択します
5. プレス ページに含める

HubSpot資産の管理について詳しく見る.

注記： アプリケーションを通じて HubSpot アセットから Webflow サイトに導入されたアセットは、Webflow アセット セクションに追加されません。

ウェブサイトの追跡を監視する

固有の HubSpot トラッキング コードは各 HubSpot アカウントに固有であり、HubSpot がウェブサイトのトラフィックを監視できるようにします。ウェブサイトのトラッキングを制御するには:

1. HubSpot申請を開始する
2. プレス ウェブサイトの追跡を監視する
3. スイッチ HubSpotサイトトラッキングコードを有効にする に の上
4. プレス 保存

トラッキングが機能していることを確認するには、サイトを公開する必要があります。‍

HubSpotのトラッキングコードに関する詳細情報.

注記： HubSpotトラッキングコードが有効化されると、HubSpotはサイト全体のすべてのフォーム送信を自動的に監視し（フォームがHubSpotにリンクされていない場合でも）、WebflowフォームIDを使用して新しいフォームに保存します。これを望まない場合は、 HubSpotアカウント設定でこの機能をオフにしてください.

WebflowサイトにHubSpotチャットボットを組み込む

アプリケーションでは、カスタム コードを使用して Webflow サイトに HubSpot チャットボットを追加するための体系的な手順も提供されます。 

注記： カスタム コードの機能は、すべてのプレミアム サイト プランと、コア、成長、エージェンシー、フリーランサー ワークスペース プランで利用できます。

始める：

1. HubSpot申請を開始する
2. プレス サイトにHubSpotチャットボットを追加する
3. プレス HubSpot チャットボットライブラリを表示 HubSpotチャットボットの品揃えを検査および変更する
4. HubSpot追跡コードが有効になっていることを確認してください
5. サイトを公開する 

HubSpotチャットボットの設定と構成について詳しく知る.

HubSpotアプリケーションを消去する方法

Webflow サイトから HubSpot アプリケーションを削除するには、サイト設定から削除する方法とデザイナーから削除する方法の 2 つがあります。

サイト設定からアプリケーションを削除するには:

1. へ移動 サイト設定 > アプリと統合 タブ > リンクされたアプリ
2. HubSpotを見つける
3. プレス 詳細を見る 
4. プレス アプリを消去

デザイナー経由でアンインストールするには:

1. 開く アプリケーションパネル
2. HubSpotを押してください
3. プレス アプリを削除 

FAQと解決のヒント

HubSpot アプリケーションは開いていますが、データが読み込まれていません。

アクセス サイト設定 > アプリケーションと統合 タブをクリックして、HubSpotアプリケーションがインストール済みアプリとしてリストされていることを確認します。リストされていない場合は、 HubSpotアプリケーションの詳細ページをご覧ください アプリケーションをサイトに再インストールしてください。HubSpotが存在する場合は、 アプリケーションパネルHubSpotアプリケーションを起動し、 接続を管理する Webflow サイトに接続されているすべての HubSpot アカウントを表示します。

アプリケーションを通じて HubSpot フォームを埋め込みましたが、送信内容が HubSpot に正確に転送されません。

挿入する フォームの共有URL （HubSpotでアクセス可能）に HubSpot URLを共有 アプリケーションのフィールドにフォームをiframeとして埋め込み、問題が引き続き発生するかどうかを確認します。問題が発生する場合は、 Webflowのカスタマーサポートチームにお問い合わせください さらなるガイダンスについては、

HubSpot フォームを変更しましたが、更新が Webflow サイトに自動的に反映されません。

HubSpot フォームを修正した後、デザイナーでアプリケーションを開始し、既存の HubSpot フォームを修正したフォームに置き換えることができます。HubSpot と Webflow 間の変更を瞬時に同期するには、フォームを iframe として埋め込むための共有 URL を使用することをお勧めします。

アプリケーションを使用して Webflow フォームを HubSpot に接続しましたが、送信が表示されません。

Webflowフォームのフィールドにフィールド指定が含まれていることを確認してください。指定が含まれている場合は、 Webflowのカスタマーサポートチームにお問い合わせください さらにサポートが必要な場合はお問い合わせください。

どの HubSpot アカウントが各 Webflow サイトにリンクされているかを確認するにはどうすればよいですか?

アクセス サイト設定 > アプリケーションと統合 タブをクリックして、HubSpotアプリケーションがインストール済みアプリとして認識されていることを確認します。見つからない場合は、 HubSpotアプリケーションの詳細ページをご覧ください アプリケーションをサイトに再インストールしてください。HubSpotが含まれている場合は、 アプリケーションパネルHubSpotアプリケーションを起動し、 接続を管理する Webflow サイトにリンクされているすべての HubSpot アカウントを表示します。 

アプリケーションを通じて HubSpot フォームを埋め込みましたが、特定のフィールドまたはロジックが引き継がれません。

フォームの共有 URL を入力し、アプリケーションを使用して iframe として埋め込むか、フォームをカスタム コード埋め込み要素として埋め込むことをお勧めします。

HubSpot リソースのアセットをサイトに組み込みましたが、画像が Webflow アセット パネルに表示されません。

アプリケーションを使用して HubSpot リソースから Webflow サイトに導入されたアセットは、Webflow アセット パネルに自動的には表示されません。

HubSpotアプリケーションでまだ問題が発生している場合は、 Webflowのカスタマーサポートチームにお問い合わせください.