ホーム/ 無料ツール/ 埋め込みコード生成器

無料埋め込みコードジェネレーター

URLを貼り付け、幅と高さを選択し、いくつかのオプションを切り替えて、きれいな <iframe> 埋め込みHTML をコピー — Knocketページ、動画、地図、またはブラウザーで表示できるものなら何でも。ライブプレビューを確認してから、コードをサイトに貼り付けます。ログイン不要、何も保存されません。

ライブプレビュー
プレビューを見るにはURLを入力…

プレビューが空白ですか? サイトが埋め込みをブロックしています — コード自体は正しい状態です。

HTML を埋め込む — これをコピー
 
Embed your Knocket contact page — visitors chat with you without leaving your site. Get your page →
◈ 独自のコンタクトページを埋め込む

埋め込むのに最も有用なのは、人々があなたにアクセスできるページです。無料のKnocketコンタクトページは埋め込み用に作られており、あなたのサイトにドロップするだけで、訪問者はフォームやバックエンドを作成せずにライブチャット、WhatsApp、メール、予約が可能になります。 無料ページを作る →

埋め込みコードジェネレーターが重要な理由

1つのページを別のページに埋め込むことは、最も古いウェブの基本機能の1つですが、<iframe>タグを手動で記述する — 適切な幅、スクリーンリーダー向けのタイトル、遅延読み込み、安全なサンドボックス — は面倒で簡単に間違えます。ジェネレーターを使えば、毎回正しく生成され、公開前に結果を確認できます。

ページを埋め込む方法

  1. 埋め込みたいURLを貼り付けてください(Knocketページ、動画、地図、文書など)。
  2. サイズを設定 — 固定幅/高さ、またはレスポンシブ(100% 幅)。
  3. アクセシビリティとオプション(フルスクリーン、遅延読み込み、枠線、サンドボックス)のためにタイトルを追加
  4. HTMLをコピーして、ご自身のサイトのHTMLまたはCMSの埋め込みブロックに貼り付けてください。
◈ 貼り付ける場所

WordPress の カスタム HTML ブロック、Wix の コード埋め込み、Squarespace の 埋め込みブロック、またはサイトの HTML に直接。React/Astro レイアウトでは、<iframe> を生の HTML 要素として挿入します。このタグは自己完結型です — スクリプトやスタイルシートを読み込む必要はありません。

人々が埋め込むもの

iframeが適切なツールでない場合

iframeは、他のページを自分のページ内に表示するのに最適です。ただし、以下のような場合には適していません:

サイトにネイティブに組み込まれた(iframeなし、自分のドメイン、自分のスタイリング)コンタクト体験を求める場合、Knocketウィジェットは1つのスクリプトタグで済みます。

よくある質問

この埋め込みコード生成ツールは無料ですか?

はい — 完全に無料、ログイン不要、制限なし。HTMLはブラウザ上で構築され、何もアップロードまたは保存されません。必要なだけ埋め込みコードを生成できます。

プレビューが空白の理由は何ですか?

埋め込んでいるサイトが、フレーミングを拒否する X-Frame-Options または Content-Security-Policy ヘッダーを送信しています。Google、Instagram、Facebook、およびほとんどのログイン済みページではこれが行われます。生成されたコード自体は正しいですが、そのサイトは単に誰によっても、どこでも埋め込まれることを許可していないだけです。Knocketページやほとんどの動画プレイヤー(YouTube、Vimeo)は埋め込みを許可しています。

サンドボックスオプションは何をするものですか?

sandbox属性は埋め込みページができることを制限するため、信頼できない埋め込みはウィンドウをポップアップ表示したり、フォームを実行したり、あなたのページにアクセスしたりできません。制限付き(推奨)では埋め込みはスクリプトやフォームを実行できますが、危険な操作はブロックされます。厳格ではスクリプトのみを許可します。完全な機能が必要な信頼できるページの場合は無効にしてください。

タイトル欄は何のためですか?

iframeのtitle属性は、スクリーンリーダーに中身が何であるかを伝えます — アクセシビリティに不可欠です。これがないと、支援技術を使用している訪問者は文脈なしで「フレーム」と聞きます。常に埋め込みコンテンツを説明するように設定してください(例:「Knocket連絡先ページ」)。

レスポンシブまたは固定サイズ?

埋め込みがコンテナを埋める必要がある場合(最新のサイトのほとんど)はレスポンシブ(100%幅)を使用してください。正確な寸法(動画プレーヤーや四角いマップなど)が必要な場合は、固定幅と高さを使用してください。レスポンシブ埋め込みは通常、ページ上のアスペクト比ラッパーと組み合わせて使用されます。

遅延読み込みは役立ちますか?

はい。loading="lazy"は、ユーザーがiframeの近くにスクロールしたときにのみブラウザが読み込むよう指示します。これにより初期ページの読み込みが速くなります — 特に1ページに複数の埋め込みがある場合に役立ちます。

入力したURLを保存しますか?

いいえ。すべてがブラウザ上で実行されます。URL、タイトル、オプションはデバイスから外に出ることはありません。サーバーも、データベースも、アカウントもありません。

Knocketページを埋め込むことはできますか?

はい — そしてそれは素晴らしい利用方法です。あなたのKnocketコンタクトページは埋め込み用に作られています:訪問者はライブチャット、WhatsApp、メール、予約をあなたのサイト上で直接利用でき、フォームやバックエンドを書く必要はありません。 knocket.trtc.io/your-handle のURLを貼り付けてコードをコピーしてください。

ほかの無料ツール

返答するページを埋め込む。

埋め込むのに最適なのは、人々があなたに連絡できるものです。Knocketページは、ライブチャット、WhatsApp、メール、予約機能を任意のサイトに持ってきます。

無料ページを作る