docs: add iframe embed section for external sites to rich media page (#5613)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Devin Logan <devinannlogan@gmail.com>

Author: devin-ai-integration[bot]

AGENTS.md

@@ -23,6 +23,8 @@ Keep prose dry and direct. State requirements and behavior plainly.
 
 Internal links between documentation pages use **URL paths built from the YAML config**, not file paths on disk or relative paths.
 
+**Before writing any internal link, open the target product's `docs.yml` and walk from the product slug down to the page.** Directory paths on disk are not a reliable hint — folders can be absent from the URL, and section slugs frequently differ from folder names.
+
 ### URL format
 
 ```
@@ -74,9 +76,13 @@ The correct link is:
 <!-- WRONG: guessed URL from file path (section slug differs from folder name) -->
 [LLMs.txt](/learn/docs/ai/llms-txt)
 
+<!-- WRONG: includes folder segments that aren't part of any docs.yml section -->
+[Rich media](/learn/docs/component-library/writing-content/markdown-media)
+
 <!-- CORRECT: URL from YAML config -->
 [Overview](/learn/docs/getting-started/overview)
 [LLMs.txt](/learn/docs/ai-features/llms-txt)
+[Rich media](/learn/docs/writing-content/markdown-media)
 ```
 
 ### Steps to construct a link

fern/products/docs/pages/component-library/writing-content/markdown-media.mdx

@@ -57,7 +57,7 @@ Embed PDFs using the `<iframe>` element. Don't use the `<embed>` element, as it
 <Tab title="Rendered PDF">
 <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
 </Tab>
-<Tab title="HTML">
+<Tab title="PDF syntax">
 ```html
 <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
 ```
@@ -85,7 +85,7 @@ You can embed videos in your documentation using the HTML `<video>` tag. This gi
 >
 </video>
 </Tab>
-<Tab title="HTML">
+<Tab title="Video syntax">
 ```html
 <video
     src="path/to/your/video.mp4"
@@ -173,6 +173,33 @@ You can embed videos from YouTube, Loom, Vimeo, and other streaming platforms us
 
 See an example of [how it renders](https://elevenlabs.io/docs/conversational-ai/guides/integrations/zendesk#demo-video) on the corresponding docs page from the ElevenLabs documentation.
 
+## External sites
+
+You can embed any external web page in your documentation using an `<iframe>`.
+
+<Info>
+  If the target site sets headers like `X-Frame-Options` or a restrictive `Content-Security-Policy`, the browser blocks the embed. Verify that the site you want to embed allows being framed.
+</Info>
+
+<Tabs>
+  <Tab title="Rendered external site">
+  <iframe
+    src="https://en.wikipedia.org/wiki/Fern"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+  </Tab>
+  <Tab title="External site syntax">
+  ```mdx
+  <iframe
+    src="https://en.wikipedia.org/wiki/Fern"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  />
+  ```
+  </Tab>
+</Tabs>
+
+When [embedding a Fern Docs site](/learn/docs/customization/embedded-mode) inside another application, append `?embedded=true` to the URL to hide the header and footer.
+
 ## LaTeX
 
 Fern supports [LaTeX](https://www.latex-project.org/) math equations. To use LaTeX, wrap your inline math equations in `$`. For example, `$(x^2 + y^2 = z^2)$` will render $x^2 + y^2 = z^2$.

fern/products/docs/pages/customization/embedded-mode.mdx

@@ -1,29 +1,34 @@
 ---
 title: Embedded mode
-subtitle: Hide the header and footer when embedding docs in iframes or dashboards
+description: Hide the header and footer when embedding docs in iframes or dashboards
 ---
 
+Embedded mode strips the header and footer (including navigation and logo) from a Fern Docs site so a page renders as content only. Use it to:
 
-Embedded mode removes the header and footer from your documentation pages, making them suitable for embedding in iframes, dashboards, or other contexts where you want to display only the content.
+- Surface docs inside a product dashboard or admin panel
+- Embed a page in an iframe without the standard navigation chrome
+- Render content-only views in another application
 
 ## Enable embedded mode
 
-Add the `embedded=true` query parameter to any documentation URL:
+Add the `embedded=true` query parameter to the URL:
 
-```
-https://docs.example.com/getting-started?embedded=true
-```
-
-When enabled, the header (including navigation and logo) and footer are hidden, and the main content area adjusts to fill the available space.
+<Frame>
+    <iframe
+    src="https://elevenlabs.io/docs/overview/intro?embedded=true"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+</Frame>
 
-## Persistence
-
-Once embedded mode is activated, it persists across navigation events within the same session. Users can navigate between pages without needing to add the query parameter to each URL.
+```jsx HTML
+    <iframe
+    src="https://elevenlabs.io/docs/overview/intro?embedded=true"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+```
 
-## Use cases
+Embedded mode persists across navigation within a session, so internal links keep it active without the query string on every URL.
 
-Embedded mode is useful when you want to:
+## Embed external pages
 
-- Display documentation within a product dashboard or admin panel
-- Create a seamless experience when embedding docs in an iframe
-- Show documentation content without the standard navigation chrome
+[Embedding external pages in your docs](/learn/docs/writing-content/markdown-media#embed-external-sites) uses the same `<iframe>` syntax, without `?embedded=true`.

fern/translations/zh/products/docs/pages/component-library/writing-content/markdown-media.mdx

@@ -57,7 +57,7 @@ sidebar-title: Markdown 中的富媒体
 <Tab title="渲染的 PDF">
 <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
 </Tab>
-<Tab title="HTML">
+<Tab title="PDF 语法">
 ```html
 <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
 ```
@@ -85,7 +85,7 @@ sidebar-title: Markdown 中的富媒体
 >
 </video>
 </Tab>
-<Tab title="HTML">
+<Tab title="视频语法">
 ```html
 <video
     src="path/to/your/video.mp4"
@@ -173,6 +173,33 @@ sidebar-title: Markdown 中的富媒体
 
 请参阅 ElevenLabs 文档中相应文档页面上[渲染效果](https://elevenlabs.io/docs/conversational-ai/guides/integrations/zendesk#demo-video)的示例。
 
+## 外部网站
+
+您可以使用 `<iframe>` 在文档中嵌入任何外部网页。
+
+<Info>
+  如果目标站点设置了 `X-Frame-Options` 或限制性的 `Content-Security-Policy` 等响应头，浏览器将阻止嵌入。请验证您要嵌入的站点是否允许被框架嵌入。
+</Info>
+
+<Tabs>
+  <Tab title="渲染的外部网站">
+  <iframe
+    src="https://en.wikipedia.org/wiki/Fern"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+  </Tab>
+  <Tab title="外部网站语法">
+  ```mdx
+  <iframe
+    src="https://en.wikipedia.org/wiki/Fern"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  />
+  ```
+  </Tab>
+</Tabs>
+
+[嵌入 Fern 文档站点](/learn/docs/customization/embedded-mode)到其他应用程序时，请在 URL 后追加 `?embedded=true` 以隐藏页头和页脚。
+
 ## LaTeX
 
 Fern 支持 [LaTeX](https://www.latex-project.org/) 数学方程式。要使用 LaTeX，请将您的内联数学方程式用 `$` 包围。例如，`$(x^2 + y^2 = z^2)$` 将渲染为 $x^2 + y^2 = z^2$。

fern/translations/zh/products/docs/pages/customization/embedded-mode.mdx

@@ -1,29 +1,35 @@
 ---
 title: 嵌入模式
-subtitle: 在 iframe 或仪表板中嵌入文档时隐藏页头和页脚
+description: 在 iframe 或仪表板中嵌入文档时隐藏页头和页脚
 sidebar-title: 嵌入模式
 ---
 
-嵌入模式会从文档页面中移除页头和页脚，使其适合嵌入到 iframe、仪表板或其他只想显示内容的环境中。
+嵌入模式会从 Fern 文档站点中移除页头和页脚（包括导航和标志），使页面仅渲染内容。使用场景：
 
-## 启用嵌入模式
-
-在任何文档 URL 中添加 `embedded=true` 查询参数：
+- 在产品仪表板或管理面板中呈现文档
+- 在 iframe 中嵌入页面，不带标准导航框架
+- 在其他应用程序中渲染仅内容视图
 
-```
-https://docs.example.com/getting-started?embedded=true
-```
+## 启用嵌入模式
 
-启用时，页头（包括导航和标志）和页脚将被隐藏，主要内容区域会调整以填充可用空间。
+在 URL 中添加 `embedded=true` 查询参数：
 
-## 持久性
+<Frame>
+    <iframe
+    src="https://elevenlabs.io/docs/overview/intro?embedded=true"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+</Frame>
 
-一旦激活嵌入模式，它会在同一会话的导航事件中保持持久。用户可以在页面之间导航，无需在每个 URL 中添加查询参数。
+```jsx HTML
+    <iframe
+    src="https://elevenlabs.io/docs/overview/intro?embedded=true"
+    style="width: 100%; height: 500px; border: none; border-radius: 8px;"
+  ></iframe>
+```
 
-## 使用场景
+嵌入模式在同一会话的导航中保持激活状态，因此内部链接无需在每个 URL 中带查询字符串即可保持启用。
 
-嵌入模式在以下情况下很有用：
+## 嵌入外部页面
 
-- 在产品仪表板或管理面板中显示文档
-- 在 iframe 中嵌入文档时创建无缝体验
-- 显示文档内容而不显示标准导航框架
+[在文档中嵌入外部页面](/learn/docs/writing-content/markdown-media#embed-external-sites)使用相同的 `<iframe>` 语法，但不需要 `?embedded=true`。