首頁/ 免費工具/ 嵌入程式碼生成器

免費嵌入程式碼生成器

貼上一個 URL,選擇你的寬度和高度,切換幾個選項,然後複製乾淨的 <iframe> 嵌入 HTML —— 用於你的 Knocket 頁面、影片、地圖或瀏覽器可以顯示的任何內容。檢視即時預覽,然後將程式碼貼上到你的網站中。無需登入,也不儲存任何內容。

即時預覽
輸入一個網址以檢視預覽……

空白預覽?該網站阻止了嵌入——程式碼仍然是正確的。

嵌入 HTML —— 複製此內容
 
Embed your Knocket contact page — visitors chat with you without leaving your site. Get your page →
◈ 嵌入你自己的聯絡名片

最實用嵌入內容是一個能讓別人聯絡到你的頁面。一個免費的Knocket聯絡名片就是為嵌入而設計——將其放在你的網站上,訪客即可獲得線上聊天、WhatsApp、電子郵件和預約功能,而你無需編寫表單或搭建後端。 建立免費頁面 →

為什麼嵌入程式碼生成器很重要

在一個頁面中嵌入另一個頁面是最早的網頁原語之一,但手動編寫<iframe>標籤——具有正確的寬度、螢幕閱讀器的標題、延遲載入和安全沙盒——既繁瑣又容易出錯。生成器每次都能正確生成,並在你釋出之前顯示結果。

如何嵌入頁面

  1. 貼上你想要嵌入的URL(你的Knocket頁面、影片、地圖、文件)。
  2. 設定尺寸 —— 固定寬度/高度,或響應式(100% 寬度)。
  3. 新增標題,以提高可訪問性並切換選項(全屏、懶載入、邊框、沙盒)。
  4. 複製HTML並將其貼上到你網站的HTML或CMS嵌入塊中。
◈ 貼上位置

在 WordPress 的自定義 HTML 塊中,在 Wix 的程式碼嵌入中,在 Squarespace 的嵌入塊中,或直接嵌入到你網站的 HTML 中。在 React/Astro 佈局中,通過原始 HTML 元素插入<iframe>。該標籤是自包含的——無需載入指令碼或樣式表。

人們嵌入的內容

什麼時候 iframe 不是合適的工具

iframe非常適合在你的頁面內展示另一個網頁。但當你需要以下功能時,它並非合適工具:

為了獲得原生整合在你網站上的聯絡體驗(無需 iframe,使用你的域名和樣式),Knocket 小部件只需要一個指令碼標籤。

常見問題

這個嵌入程式碼生成器是免費的嗎?

是的——完全免費,無需登入,沒有限制。HTML在你的瀏覽器中生成,沒有任何內容被上傳或儲存。你可以生成任意數量的嵌入程式碼。

為什麼我的預覽是空白的?

你要嵌入的網站傳送了一個 X-Frame-Options 或 Content-Security-Policy 頭部,拒絕被嵌入。Google、Instagram、Facebook 和大多數需要登入的頁面都會這樣做。生成的程式碼仍然是正確的——只是該網站不允許自己被任何人嵌入到任何地方。Knocket 頁面和大多數影片播放器(YouTube、Vimeo)允許嵌入。

沙盒選項有什麼作用?

sandbox 屬性限制了嵌入頁面可以執行的操作,因此不受信任的嵌入內容無法彈出視窗、執行表單或訪問你的頁面。受限(推薦)允許嵌入內容執行指令碼和表單,但阻止危險操作;嚴格僅允許指令碼。對於需要完整功能且受信任的頁面,請將其關閉。

標題欄位是用來做什麼的?

iframe 上的 title 屬性會告訴螢幕閱讀器其中的內容——這對於可訪問性至關重要。如果沒有它,使用輔助技術的訪客只會聽到“框架”,而沒有上下文。始終將其設定為描述嵌入內容(例如“Knocket 聯絡名片”)。

自適應尺寸還是固定尺寸?

當嵌入內容應填滿其容器時(大多數現代網站),使用 響應式(100% 寬度)。當你需要精確尺寸時(如影片播放器或方形地圖),使用 固定寬度和高度。響應式嵌入通常與頁面上的寬高比包裝器配合使用。

懶載入有幫助嗎?

是的。loading="lazy" 告訴瀏覽器僅在使用者滾動到 iframe 附近時才載入它,從而加快初始頁面載入速度 —— 尤其是在一個頁面上有多個嵌入內容時特別有用。

你會儲存我輸入的URL嗎?

不。所有內容均在你的瀏覽器中執行——URL、標題和選項從未離開你的裝置。沒有伺服器、沒有資料庫、沒有賬戶。

我可以嵌入我的 Knocket 頁面嗎?

是的——而且這是一個很好的用途。你的 Knocket 聯絡名片旨在嵌入:訪客可以直接在你的網站上獲得線上聊天、WhatsApp、電子郵件和預訂,無需填寫表單或編寫後端。貼上你的 knocket.trtc.io/your-handle 網址並複製程式碼。

更多免費工具

嵌入一個 會回應的 頁面。

最適合嵌入的是能讓人聯絡到你的事物。一個 Knocket 頁面可以將線上聊天、WhatsApp、電子郵件和預約功能帶到任何網站。

建立你的免費頁面