サードパーティの埋め込みコード

  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels を使用すると、フォーム、カレンダー、カスタム アイコン、ウィジェットなどのサードパーティ コンテンツを埋め込むことで、ページを強化できます。このガイドでは、 HTML/JS 要素、 ヘッダー コード、 およびフッター コード エディターを使用して、外部コードをページに埋め込む方法を示します。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

  • 外部埋め込みコード

埋め込むことができるもの

ClickFunnels ページに埋め込むことができるサードパーティ コンテンツの例をいくつか示します。

  • 予約スケジューラ: Calendly、Acuity Scheduling、1on1 などのツールを埋め込んで、ユーザーがページ上で直接予約できるようにします。

  • カスタムフォーム: データ収集には、JotForm、Google フォーム、Typeform などのサービスを使用してフォームを追加します。

  • メディア プレーヤー: SoundCloud や Spotify プレイリストなどの 外部 ビデオおよび オーディオ プレーヤーを埋め込んで、マルチメディアでページを強化します。

  • インタラクティブ機能: Google マップの地図、Calconic の電卓、Tidio や Intercom などのライブ チャット ツールなどのウィジェットを追加します。

手記：

これらは人気のあるツールのほんの一例です。埋め込みコードを提供するサービスなら誰でも埋め込むことができ、ページの機能を完全にカスタマイズできます。

HTML/JS 要素の使用

ページエディタの HTML/JS 要素 は、サードパーティのコンテンツを埋め込む最も簡単な方法です。次の手順を実行します:

  1. HTML/JS 要素を追加します。

    • HTML/JS 要素をページにドラッグ アンド ドロップします。

    • セクションと行内に配置して、レイアウトを整理します。

  2. 埋め込みコードを貼り付けます。

    • 要素設定の [ コード エディターを開く ] オプションをクリックします。

    • 外部コードをエディターに貼り付けます。

    • [ 保存] をクリックします。

ヒント: 埋め込みのスペースを調整する

要素を追加したセクションと行に、ウィジェットが正しくレンダリングされるのに十分なスペースがあることを確認してください。たとえば、カレンダー ウィジェットを埋め込む場合は、セクション内に 1 列の行を使用して、表示に十分なスペースを確保します。ウィジェットが正しく表示されるようにするには、ウィジェットの最小寸法を確認し、ClickFunnelsレイアウトの行と列の幅を調整します。

ヘッダーとフッターのコードエディタの使用

ClickFunnels には、カスタム コードを追加するための 2 つの追加領域、 ヘッダー コード エディターと フッター コード エディターが用意されています。これらのオプションを使用すると、ページの HTML 構造の特定の部分にコードを直接挿入できます。

  • ヘッダー コード は、ページの <head> タグと </head> タグの間にコードを追加するために使用されます。これは、ページ コンテンツの前にロードする必要があるメタ タグ、外部スタイルシート、トラッキング スクリプト、または構造化データを追加するのに最適です。

  • フッターコードは 、カスタムコードを <body> タグ内の終了 </body> タグの直前に配置します。これは通常、ページ コンテンツの後に読み込む必要がある JavaScript またはその他のスクリプトに使用されます。

例: 外部カレンダーウィジェットの埋め込み

以下は、Calendlyウィジェットをページに埋め込む例です。

  1. カレンダーイベントを作成したら、 インライン埋め込み コードをコピーします。

  2. ClickFunnels のページ エディター内で、要素を配置 するセクションを追加します 。

  3. そのセクション内に 行 を追加します。

  4. 行内のオレンジ色の + プラスまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。

  5. MISC (その他) カテゴリから、HTML/JS 要素を選択します。

  6. コード エディターを開き、埋め込みコードを貼り付けます。

  7. [保存] をクリックして変更を保存します。

ページが保存されたら、[ プレビュー] 👁️ アイコンをクリックして、レンダリングされたウィジェットを表示します。

埋め込みコードのトラブルシューティング

ウィジェットが期待どおりにレンダリングされない場合は、次の手順に従います。

  1. HTML と JavaScript を分離する

    • HTML コードを HTML/JS 要素内に配置します。

    • JavaScript コードをフッターコードエディターに貼り付けます。

    大事な：

    埋め込みコードが提供されるソースには、多くの場合、コードを貼り付けて構成する方法に関する手順が含まれています。それでも問題が解決しない場合は、資格のある開発者にトラブルシューティングについて相談することを検討してください。

  2. コードを確認する
    埋め込みコードが正確であることを確認してください。属性の欠落、構文エラー、またはコードの形式が不適切であると、失敗する可能性があります。

  3. ページレイアウトの検査
    ウィジェットが埋め込まれているセクションまたは行に、ウィジェットを正しく表示するのに十分なスペースがあることを確認します。必要に応じてレイアウトのサイズを変更または調整して、クリッピングや不適切なレンダリングを防ぎます。

  4. ディスプレイの問題
    ウィジェットがページプレビューで期待どおりに表示されない場合は、コードを変更する必要があるか、ウィジェットのデザインに調整が必要になる場合があります。たとえば、Calendly ウィジェットの背景色を変更するには、カレンダー イベント設定の Calendly アカウントで直接設定する必要があります。

    ヒント：

    特定のカスタマイズ オプションについては、必ずサードパーティ ツールのドキュメントを参照してください。

関連記事