chore(docs): document API Playground (#5089)

fern/docs.yml

@@ -448,6 +448,13 @@ navigation:
           - page: SDK Snippets
             icon: fa-regular fa-message-code
             path: ./pages/fern-docs/config/sdk-snippets.mdx
+          - section: API Playground
+            path: ./pages/fern-docs/content/api-playground.mdx
+            icon: fa-regular fa-square-terminal
+            contents:
+              - page: Customize API Playground
+                icon: fa-regular fa-wrench
+                path: ./pages/fern-docs/content/customize-api-playground.mdx
           - page: Endpoint Errors
             icon: fa-regular fa-exclamation-triangle
             path: ./pages/fern-docs/config/endpoint-errors.mdx
@@ -457,9 +464,6 @@ navigation:
           - page: Write Markdown in API Reference
             icon: fa-regular fa-pencil
             path: ./pages/fern-docs/content/api-ref-content.mdx
-          - page: Customize API Playground
-            icon: fa-regular fa-square-terminal
-            path: ./pages/fern-docs/content/customize-api-playground.mdx
 
       - section: Integrations
         slug: integrations

fern/pages/fern-docs/content/api-playground.mdx

@@ -0,0 +1,33 @@
+---
+title: API Playground
+subtitle: Reduce "time to 200" by allowing users to make real calls to your API from right within the API Reference. 
+---
+
+<Tip>This feature is available on the Business plan and above. [Contact us](https://buildwithfern.com/contact) to get set up.</Tip>
+
+Fern's API Playground allows users to make authenticated requests to your API without ever leaving your documentation. 
+
+### Auto-populate with examples
+Fern will automatically populate the fields of the endpoint with the values set in your API specification.
+
+<div style="position: relative; padding-bottom: 50.63657407407407%; height: 0;"><iframe src="https://www.loom.com/embed/a48d921459b54dde9652c3fcc85ebc54?sid=2c0b4f4d-7e24-4fc5-a617-8d933195bfec?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+
+### Authenticated sessions
+Once a user sets their authentication credentials once, their credentials persist throughout their entire exploration. 
+
+<div style="position: relative; padding-bottom: 50.63657407407407%; height: 0;"><iframe src="https://www.loom.com/embed/7de9948ae878448094b5e92da5effd41?sid=702889b7-aa3d-4669-994e-83c196d7bc3e?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+
+<Info>
+Authentication credentials are only stored client-side using cookies. No sensitive user information is collected or stored. 
+</Info>
+
+### Multiple environments
+Allow users to test their calls in a sandbox environment or select the environment relevant to them. Users can switch between multiple environments. Once they've selected their environment, it persists throughout their entire exploration. 
+
+<div style="position: relative; padding-bottom: 50.63657407407407%; height: 0;"><iframe src="https://www.loom.com/embed/cb642161678e41cabcb677b900006f40?sid=5e45243c-3ba1-45cf-860b-72eee1970fc5?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+
+### WebSocket Playground
+
+For APIs that support WebSocket connections, the API Playground includes a **WebSocket**-specific Playground. The WebSocket Playground also allows users to establish a connection with the API, and send/receive messages in real-time. 
+
+<div style="position: relative; padding-bottom: 56.2%; height: 0;"><iframe src="https://www.loom.com/embed/be4da30404794e9983c4fe639f78d4c8?sid=73b7aeda-98fa-4531-87ed-1e5909500fe2?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>