# 自定義代碼嵌入

嵌入元素讓您能在網站上添加自定義代碼塊。如果有一個核心或成長工作區，或者如果您的網站有活躍的網站計劃，您可以使用嵌入元素來解鎖各種自定義功能。

您可以嵌入第三方元素，如Google Docs和Sheet、社交媒體源、實時聊天應用程序、表格和調查等。您還可以使用CMS集合字段來動態更新嵌入代碼。

**注意**\
嵌入元素只支持HTML、style標籤中的CSS，以及script標籤中的JS。不能在嵌入元素中整合服務器端語言（如Perl、PHP、Python、Ruby）。

本文會提到：

1. 如何添加一個嵌入元素
2. 如何編輯嵌入元素
3. 如何在嵌入元素上設置尺寸
4. 如何預覽嵌入的內容

**重要提示**\
自定義代碼是一種高級修改，可能與Webflow的基礎功能相沖突。因此，Webflow不能保證任何自定義代碼的功能或完全兼容。此外，我們的支持團隊無法直接提供關於自定義代碼設置或故障排除的幫助，因為這些主題不屬於我們的客戶支持政策的範圍。如果您在使用自定義代碼時遇到問題，請在Webflow論壇上告訴我們，整個Webflow社區（包括工作人員）可以提供額外的幫助和資源。

## 如何添加嵌入元素

您可以在任何地方或在副文本元素中嵌入第三方代碼或自己的自定義代碼。

**注意**\
嵌入元素中的自定義代碼不能超過10,000個字符。若想嵌入的代碼比較長，您可以把它存儲在另一個服務器上，並在嵌入中引用該腳本。也可以使用第三方工具將妳的自定義代碼最小化，或者將代碼分割成多個嵌入元素（前提是這不會破壞任何JavaScript功能）。

### 如何在設計中直接添加自定義代碼

1. 把想嵌入的代碼複製到您的剪貼板上
2. 打開"添加"面板，在Webflow畫布上添加一個嵌入元素。
3. 黏貼您在步驟1中複製的自定義代碼
4. 保存並關閉模態

**重要提示**\
如果您的自定義代碼有開頭和/或結尾標籤，請確保添加這些標籤以確保您的代碼按預期運行。此外，不要在您的自定義代碼中包括html、body或head標籤，否則您的網站/布局會中斷。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FwqUerzVZFSJ7NvGXIx5I%2Fimage.png?alt=media\&token=d66f308a-da91-4046-82eb-9b4ab4caa53c)

**注意**\
默認情況下，行包裝是啟用的，以方便查看和編輯代碼，但您可以透過取消勾選HTML嵌入代碼編輯器中的行包裝複選框來關閉這一項設定。您也可以點擊"最大化"圖標來啟用全屏編輯。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FP7oUjWyUDqY8Bh1VtgTc%2Fimage.png?alt=media\&token=99b49db8-f697-4a3b-ba8b-cc87785c94c8)

**專業提示**\
如果想在網站上重複使用相同的嵌入內容，您可以使用符號將您的嵌入元素變成一個可重複使用的組件。

### 如何向副文本元素添加自定義代碼

1. 複製想嵌入的代碼到您的剪貼板上
2. 把鼠標放到想添加自定義代碼的副文本元素中
3. 點擊"加號"圖標，打開插入選單，點擊自定義代碼按鈕
4. 黏貼在步驟1中複製的自定義代碼

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FWY7jXs2BBlnvzOVdRycS%2Fimage.png?alt=media\&token=9143fbae-ee78-4f6a-bf55-d1294cb20475)

### 如何在自定義代碼中使用動態內容

您可以將Collection字段納入嵌入式代碼，為各種用途動態地提取訊息。

## 如何編輯嵌入元素

有許多方法可以打開HTML嵌入代碼編輯器並編輯嵌入元素中的代碼：\
• 選擇畫布上的嵌入元素，然後雙擊\
• 選擇畫布上的嵌入元素並按Enter鍵\
• 選擇畫布上的嵌入元素並點擊設置"齒輪"圖標\
• 選擇畫布上的嵌入元素並點擊HTML嵌入設置下的設置面板中的打開代碼編輯器

**注意**\
如果在畫布上看不到嵌入元素，您可以從導航儀面板上找到並選擇它。接著打開設置面板，點擊HTML嵌入設置下的打開代碼編輯器來編輯您的代碼。

## 如何設置嵌入元素的尺寸

如果嵌入元素中的自定義代碼沒有明確設置大小或尺寸，內容往往可以占用其父元素的全部寬度。也許可以在您的自定義代碼中附加height="100%" width="100%"，這將允許調整嵌入元素的寬度和高度，以及從樣式面板中的內容。

## 如何預覽嵌入的內容

用iframe或style標籤包裹的自定義HTML將在畫布上或在副文本元素中顯示預覽，但有些代碼嵌入只能在實時網站上查看。任何時候在代碼編輯器中使用script標籤，您會在設計器中看到該元素的占位符。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FFr0wKvqRMuHe8fpIEiri%2Fimage.png?alt=media\&token=af0dde64-40c7-469b-8aa7-74a9004e5552)

當您發布或導出網站，裡面的腳本和自定義代碼將在您放置它的地方呈現。如果您需要在自定義域名上的網站上線前預覽嵌入，您可以將您的網站發布到.webflow\.io的暫存子域。