diff --git a/assistant/widget.mdx b/assistant/widget.mdx
index b5fcc4f65..0e754255b 100644
--- a/assistant/widget.mdx
+++ b/assistant/widget.mdx
@@ -3,7 +3,6 @@ title: "Mintlify widget"
 sidebarTitle: "Widget"
 description: "Install and configure the Mintlify widget to embed the AI assistant trained on your content in any website or web application."
 keywords: ["assistant", "chat", "embed"]
-mode: "wide"
 ---
 
 import { AssistantWidgetPlayground } from "/snippets/assistant-widget-playground.jsx";
@@ -16,7 +15,7 @@ The [assistant](/assistant) answers questions on your Mintlify site. To embed th
 
 Add the widget to any website or web application with a hosted script. The widget owns its trigger and renders inside a closed Shadow DOM, which prevents your application styles from affecting the widget.
 
-The only required browser option is the public widget ID. Manage the enabled state, allowed origins, attachments, and bot protection in your dashboard. Set embed-specific starter questions and a support email in the browser configuration.
+The only required browser option is the public widget ID. Manage the enabled state, allowed origins, attachments, and bot protection in your dashboard. Set embed-specific starter questions, a support email, and retrieval filters in the browser configuration.
 
 ## Prerequisites
 
@@ -39,7 +38,7 @@ Use the playground to configure the presentation, visual options, and observer h
 
 After you add the generated code to your site, reload the page. Confirm the trigger appears, then click it and send a test question to verify the connection.
 
-<AssistantWidgetPlayground CodeBlockComponent={WidgetCodeBlock}>
+<AssistantWidgetPlayground CodeBlockComponent={WidgetCodeBlock} />
 
 <Warning>
   Module scripts defer and run in document order. Keep the hosted loader before the initialization block when you install the widget with HTML, or the widget fails to mount.
@@ -95,7 +94,7 @@ Event metadata and requests include the `source` value, which lets you distingui
 
 ## Update a mounted widget
 
-Use `update()` to change appearance, labels, support email, starter questions, or hooks without clearing the current conversation. Only the supplied fields change.
+Use `update()` to change appearance, labels, support email, starter questions, retrieval filters, or hooks without clearing the current conversation. Only the supplied fields change.
 
 ```js
 await window.MintlifyAssistant.update({
@@ -148,7 +147,8 @@ Pass this object to `init()`.
 | `appearance`       | [`AssistantAppearance`](#assistantappearance)   | Visual and presentation overrides.                                           |
 | `labels`           | [`AssistantLabels`](#assistantlabels)           | Customer-facing text overrides.                                              |
 | `supportEmail`     | string                                          | Sets the support address shown in the widget toolbar for this embed.          |
-| `starterQuestions` | string[]                                        | Sets up to three empty-state prompts for this embed.                              |
+| `starterQuestions` | string[]                                        | Sets up to three empty-state prompts for this embed.                           |
+| `filter`           | object                                          | Restricts retrieval by language or version.                                   |
 | `hooks`            | [`AssistantHooks`](#assistanthooks)             | Event and error observers.                                                   |
 
 ### `AssistantAppearance`
@@ -225,6 +225,7 @@ Pass this object to `update()`. Every field is optional, and `null` restores its
 | `labels`           | [`AssistantLabels`](#assistantlabels) or `null`         | Deep-patches customer-facing text.                                |
 | `supportEmail`     | string or `null`                                        | Changes the support address. Pass `null` to remove it.             |
 | `starterQuestions` | string[] or `null`                                      | Changes up to three prompts. Pass `null` to restore an empty list. |
+| `filter`           | object or `null`                                        | Deep-patches retrieval filters. Pass `null` to clear them.        |
 | `hooks`            | [`AssistantHooks`](#assistanthooks) or `null`           | Deep-patches event and error observers.                            |
 
 ## Browser API
@@ -241,6 +242,25 @@ Pass this object to `update()`. Every field is optional, and `null` restores its
 
 Conversation snapshots remain private to the widget. Each method resolves to `void`.
 
+## Analytics and privacy
+
+The widget loads Mintlify's internal analytics client in a separate lazy chunk from the widget CDN after initialization begins, then sends events to `https://ph.mintlify.com`. Initialization does not wait for analytics, and an analytics import, initialization, or capture failure does not affect widget behavior.
+
+Mintlify collects:
+
+- Installation and open or closed state transitions
+- Question submission origin, attachment count, request duration, and outcome
+- Opaque widget-session, open-session, and request IDs
+- Server-issued thread and message IDs
+- Successful starter-question, option, source, suggestion, copy, and support-link interactions using indexes or destination categories
+- Feedback polarity, widget ID and versions, presentation surface, anonymous-versus-signed identity mode, and the embedding hostname
+
+Mintlify does not collect prompts, answers, starter-question or option text, support email, identity tokens, thread keys, CAPTCHA values, raw identities, full URLs, referrers, query parameters, campaign parameters, or error messages.
+
+The analytics client uses memory-only persistence. It does not create person profiles or identify visitors, and it disables automatic capture, page views, page leave, session replay, surveys, feature flags, performance collection, heatmaps, exception capture, campaign storage, referrer storage, and geolocation enrichment.
+
+Analytics events are internal to Mintlify, are not part of the public widget configuration, and do not change [`hooks.event`](#assistanthooks).
+
 ## Content Security Policy
 
 If your site uses a Content Security Policy, allow the origins required by your enabled widget features:
@@ -248,7 +268,8 @@ If your site uses a Content Security Policy, allow the origins required by your
 | Directive                                    | Source                              | Required for                |
 | -------------------------------------------- | ----------------------------------- | --------------------------- |
 | `script-src`                                 | `https://cdn.jsdelivr.net`          | Widget loader and runtime   |
-| `connect-src`                                | `https://api.mintlify.com`          | Widget API                  |
+| `connect-src`                                | `https://api.mintlify.com`          | Configuration, messages, and feedback |
+| `connect-src`                                | `https://ph.mintlify.com`           | Internal widget analytics   |
 | `style-src`                                  | `https://cdn.jsdelivr.net`          | Widget style sheet           |
 | `font-src`                                   | `https://cdn.jsdelivr.net`          | Optional bundled Inter font |
 | `script-src`, `connect-src`, and `frame-src` | `https://challenges.cloudflare.com` | Turnstile bot protection    |
@@ -257,4 +278,6 @@ If your site uses a Content Security Policy, allow the origins required by your
 
 A strict `script-src` policy must still authorize both the loader and initialization script. Passing `nonce` to `init()` propagates it only to resources the widget creates after initialization.
 
-</AssistantWidgetPlayground>
+`https://api.mintlify.com` remains required when you use the hosted endpoint because the browser sends configuration, message, and feedback requests to it. If you set a custom `endpoint`, allow that origin instead.
+
+The CSP `frame-ancestors` directive controls which sites may embed a document. It does not authorize outgoing browser requests and is unrelated to the widget, which renders in Shadow DOM instead of an iframe. CAPTCHA providers can embed their own frames and separately require the `frame-src` sources in the table.
diff --git a/playground.css b/playground.css
index 127553fc2..897d932be 100644
--- a/playground.css
+++ b/playground.css
@@ -1,34 +1,3 @@
-@media (min-width: 1024px) {
-  html[data-current-path="/assistant/widget"] #content-area {
-    position: relative;
-    max-width: 1800px !important;
-    margin-inline: auto;
-    /* Percentage padding resolves against the parent, so cap it at half of the 1800px max-width */
-    padding-right: calc(min(50%, 900px) + 1rem);
-  }
-
-  html[data-current-path="/assistant/widget"] #content {
-    position: static;
-  }
-
-  html[data-current-path="/assistant/widget"] [data-assistant-preview] {
-    position: absolute;
-    inset: 0 1.5rem 0 auto;
-    width: calc(50% - 2.5rem);
-  }
-}
-
-html[data-current-path="/assistant/widget"]
-  div:has(> iframe[title="Live Assistant Widget preview"]) {
-  min-height: 0;
-  flex: 1 1 0%;
-}
-
-html[data-current-path="/assistant/widget"]
-  iframe[title="Live Assistant Widget preview"] {
-  height: 100%;
-}
-
 /* The widget playground embeds /assistant/widget-preview in its preview
    iframe. The suffix match keeps localized paths covered. Hide every piece of
    docs chrome so only the widget renders, and keep the document transparent
diff --git a/snippets/assistant-widget-playground.jsx b/snippets/assistant-widget-playground.jsx
index 48ca536fa..d2e93fe3b 100644
--- a/snippets/assistant-widget-playground.jsx
+++ b/snippets/assistant-widget-playground.jsx
@@ -1,4 +1,4 @@
-export const AssistantWidgetPlayground = ({ children, CodeBlockComponent }) => {
+export const AssistantWidgetPlayground = ({ CodeBlockComponent }) => {
   // Mintlify evaluates snippet exports independently, so shared values must stay in this scope.
   const EXAMPLE_WIDGET_ID = "YOUR_WIDGET_ID";
   const EMBED_URL =
@@ -40,6 +40,10 @@ export const AssistantWidgetPlayground = ({ children, CodeBlockComponent }) => {
     { value: "center", label: "Center" },
     { value: "end", label: "End" },
   ];
+  const BOOLEAN_OPTIONS = [
+    { value: "off", label: "Off" },
+    { value: "on", label: "On" },
+  ];
   const INSTALL_OPTIONS = [
     { value: "html", label: "HTML" },
     { value: "next", label: "Next.js" },
@@ -97,8 +101,8 @@ export const AssistantWidgetPlayground = ({ children, CodeBlockComponent }) => {
   }, []);
 
   useEffect(() => {
-    // SPA navigations can mount this page before the sticky/absolute preview
-    // host has a laid-out box. Delay the iframe until the host has size.
+    // SPA navigations can mount this page before the preview host has a
+    // laid-out box. Delay the iframe until the host has size.
     const host = previewHostRef.current;
     if (!host) return undefined;
 
@@ -120,95 +124,55 @@ export const AssistantWidgetPlayground = ({ children, CodeBlockComponent }) => {
     return () => observer.disconnect();
   }, []);
 
-  const classNames = (...classes) => classes.filter(Boolean).join(" ");
-
-  const renderSegmentedControl = ({
-    ariaLabel,
-    onChange,
-    options,
-    threeColumns = false,
-    value,
-  }) => (
-    <div
-      role="group"
-      aria-label={ariaLabel}
-      className="grid gap-1 rounded-lg bg-gray-100 p-1 dark:bg-white/10"
-      style={{
-        gridTemplateColumns: `repeat(${threeColumns ? 3 : options.length}, minmax(0, 1fr))`,
-      }}
-    >
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          aria-pressed={value === option.value}
-          onClick={() => onChange(option.value)}
-          className={classNames(
-            "min-h-8 rounded-md px-2 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
-            value === option.value
-              ? "bg-white text-gray-950 shadow-sm dark:bg-white/15 dark:text-white"
-              : "text-gray-600 hover:text-gray-950 dark:text-gray-400 dark:hover:text-white",
-          )}
-        >
-          {option.label}
-        </button>
-      ))}
-    </div>
-  );
-
-  const renderSelectField = ({ label, onChange, options, value }) => (
-    <label className="flex min-w-0 flex-col text-sm font-medium text-gray-700 dark:text-gray-300">
-      <span className="mb-2">{label}</span>
-      <select
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        className="h-10 w-full rounded-xl border border-gray-950/10 bg-transparent px-3 text-sm font-normal text-gray-950 outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-white/10 dark:text-white"
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-
-  const renderToggleRow = ({ checked, description, label, onChange }) => (
-    <label className="flex cursor-pointer items-center justify-between gap-5 py-3">
-      <span className="min-w-0">
-        <span className="block text-sm font-medium text-gray-950 dark:text-white">
-          {label}
-        </span>
-        <span className="block text-sm text-gray-600 dark:text-gray-400">
-          {description}
-        </span>
+  const renderSelectField = ({ hint, label, onChange, options, value }) => (
+    <label className="block min-w-0">
+      <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+        {label}
       </span>
-      <span className="relative inline-flex shrink-0 rounded-full focus-within:ring-2 focus-within:ring-primary/40">
-        <input
-          type="checkbox"
-          role="switch"
-          checked={checked}
-          onChange={(event) => onChange(event.target.checked)}
-          className="sr-only"
-        />
-        <span
-          aria-hidden="true"
-          className={classNames(
-            "h-5 w-9 rounded-full transition-colors",
-            checked ? "bg-primary" : "bg-gray-200 dark:bg-white/15",
-          )}
-        />
-        <span
+      <span className="relative block">
+        <select
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          className="h-9 w-full cursor-pointer appearance-none rounded-lg border border-gray-950/10 bg-white pl-3 pr-8 text-sm text-gray-950 shadow-sm outline-none transition-colors hover:border-gray-950/20 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-white/20 dark:focus-visible:border-primary-light dark:focus-visible:ring-primary-light/30"
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <svg
           aria-hidden="true"
-          className={classNames(
-            "pointer-events-none absolute left-0.5 top-0.5 size-4 rounded-full bg-white shadow-sm transition-all",
-            checked && "ml-4",
-          )}
-        />
+          viewBox="0 0 16 16"
+          fill="none"
+          className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+        >
+          <path
+            d="M4 6l4 4 4-4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
       </span>
+      {hint ? (
+        <span className="mt-1 block text-xs text-gray-500 dark:text-gray-400">
+          {hint}
+        </span>
+      ) : null}
     </label>
   );
 
+  const renderBooleanSelect = ({ checked, hint, label, onChange }) =>
+    renderSelectField({
+      label,
+      hint,
+      value: checked ? "on" : "off",
+      options: BOOLEAN_OPTIONS,
+      onChange: (value) => onChange(value === "on"),
+    });
+
   const appearance = useMemo(
     () => ({
       variant,
@@ -353,166 +317,104 @@ export const AssistantWidget = () => (
   const installCode = installTarget === "html" ? htmlCode : nextCode;
 
   return (
-    <div className="my-6 grid gap-8" data-assistant-playground-layout="">
-      <div className="min-w-0">
-        <div className="not-prose overflow-hidden rounded-xl border border-gray-950/10 dark:border-white/10">
-          <div className="px-5 py-4">
+    <div className="not-prose my-6 overflow-hidden rounded-xl border border-gray-950/10 dark:border-white/10">
+      <div className="flex flex-col lg:h-[36rem] lg:flex-row">
+        <div className="flex w-full flex-col border-b border-gray-950/10 dark:border-white/10 lg:h-full lg:w-72 lg:shrink-0 lg:border-b-0 lg:border-r">
+          <div className="border-b border-gray-950/10 px-4 py-3.5 dark:border-white/10">
             <div className="text-sm font-medium text-gray-950 dark:text-white">
               Widget playground
             </div>
-            <p className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">
+            <p className="mt-0.5 text-xs text-gray-600 dark:text-gray-400">
               Changes apply to the widget preview.
             </p>
           </div>
 
-          <div className="border-t border-gray-950/10 px-5 py-5 dark:border-white/10">
-            <div className="space-y-6">
-              <fieldset>
-                <legend className="mb-2 text-sm font-medium text-gray-950 dark:text-white">
-                  Variants
-                </legend>
-                {renderSegmentedControl({
-                  ariaLabel: "Variants",
-                  value: variant,
-                  options: VARIANT_OPTIONS,
-                  onChange: setVariant,
-                })}
-              </fieldset>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                {renderSelectField({
-                  label: "Theme",
-                  value: theme,
-                  options: THEME_OPTIONS,
-                  onChange: setTheme,
-                })}
-
-                <label className="flex min-w-0 flex-col text-sm font-medium text-gray-700 dark:text-gray-300">
-                  <span className="mb-2">Accent</span>
-                  <span className="flex h-10 items-center gap-2 rounded-xl border border-gray-950/10 px-2 dark:border-white/10">
-                    <input
-                      type="color"
-                      value={accent}
-                      onChange={(event) => setAccent(event.target.value)}
-                      aria-label="Accent color"
-                      className="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
-                    />
-                    <span className="font-mono text-xs font-normal text-gray-600 dark:text-gray-400">
-                      {accent}
-                    </span>
-                  </span>
-                </label>
-              </div>
-
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                <span className="mb-2 flex items-center justify-between">
-                  Corner radius
-                  <output className="font-mono text-xs font-normal text-gray-500 dark:text-gray-400">
-                    {radius}px
-                  </output>
-                </span>
+          <div className="min-h-0 flex-1 space-y-4 p-4 lg:overflow-y-auto">
+            {renderSelectField({
+              label: "Variant",
+              value: variant,
+              options: VARIANT_OPTIONS,
+              onChange: setVariant,
+            })}
+
+            {renderSelectField({
+              label: "Theme",
+              value: theme,
+              options: THEME_OPTIONS,
+              onChange: setTheme,
+            })}
+
+            <label className="block min-w-0">
+              <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Accent
+              </span>
+              <span className="flex h-9 items-center gap-2 rounded-lg border border-gray-950/10 bg-white px-2 shadow-sm dark:border-white/10 dark:bg-white/5">
                 <input
-                  type="range"
-                  min="0"
-                  max="32"
-                  step="2"
-                  value={radius}
-                  onChange={(event) =>
-                    setRadius(Number.parseInt(event.target.value))
-                  }
-                  className="block w-full accent-primary"
+                  type="color"
+                  value={accent}
+                  onChange={(event) => setAccent(event.target.value)}
+                  aria-label="Accent color"
+                  className="h-6 w-7 cursor-pointer rounded border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
                 />
-              </label>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <fieldset>
-                  <legend className="mb-2 text-sm font-medium text-gray-950 dark:text-white">
-                    Trigger side
-                  </legend>
-                  {renderSegmentedControl({
-                    ariaLabel: "Trigger side",
-                    threeColumns: true,
-                    value: side,
-                    options: SIDE_OPTIONS,
-                    onChange: setSide,
-                  })}
-                </fieldset>
-
-                <fieldset>
-                  <legend className="mb-2 text-sm font-medium text-gray-950 dark:text-white">
-                    Trigger alignment
-                  </legend>
-                  {renderSegmentedControl({
-                    ariaLabel: "Trigger alignment",
-                    value: align,
-                    options: ALIGN_OPTIONS,
-                    onChange: setAlign,
-                  })}
-                </fieldset>
-              </div>
-
-              <fieldset>
-                <legend className="text-sm font-medium text-gray-950 dark:text-white">
-                  Hooks
-                </legend>
-                <div className="mt-1 divide-y divide-gray-950/10 dark:divide-white/10">
-                  {renderToggleRow({
-                    label: "Lifecycle events",
-                    description:
-                      "Observe open, close, ask, update, and navigation events.",
-                    checked: trackEvents,
-                    onChange: setTrackEvents,
-                  })}
-                  {renderToggleRow({
-                    label: "Structured errors",
-                    description:
-                      "Receive stable error codes and retry metadata.",
-                    checked: reportErrors,
-                    onChange: setReportErrors,
-                  })}
-                </div>
-              </fieldset>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-950/10 p-5 dark:border-white/10">
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-              <div>
-                <div className="text-sm font-medium text-gray-950 dark:text-white">
-                  Install
-                </div>
-                <div className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">
-                  Copy the generated setup for your stack.
-                </div>
-              </div>
-              {renderSegmentedControl({
-                ariaLabel: "Installation target",
-                value: installTarget,
-                options: INSTALL_OPTIONS,
-                onChange: setInstallTarget,
-              })}
-            </div>
-
-            <CodeBlockComponent
-              // always use jsx as langugae to render code highlighting correctly
-              language= "jsx"
-              filename={
-                installTarget === "html" ? "index.html" : "assistant-widget.jsx"
-              }
-              wrap
-            >
-              {installCode}
-            </CodeBlockComponent>
+                <span className="font-mono text-xs text-gray-600 dark:text-gray-400">
+                  {accent}
+                </span>
+              </span>
+            </label>
+
+            <label className="block min-w-0">
+              <span className="mb-1.5 flex items-center justify-between text-sm font-medium text-gray-700 dark:text-gray-300">
+                Corner radius
+                <output className="font-mono text-xs font-normal text-gray-500 dark:text-gray-400">
+                  {radius}px
+                </output>
+              </span>
+              <input
+                type="range"
+                min="0"
+                max="32"
+                step="2"
+                value={radius}
+                onChange={(event) =>
+                  setRadius(Number.parseInt(event.target.value))
+                }
+                className="block w-full accent-primary"
+              />
+            </label>
+
+            {renderSelectField({
+              label: "Trigger side",
+              value: side,
+              options: SIDE_OPTIONS,
+              onChange: setSide,
+            })}
+
+            {renderSelectField({
+              label: "Trigger alignment",
+              value: align,
+              options: ALIGN_OPTIONS,
+              onChange: setAlign,
+            })}
+
+            {renderBooleanSelect({
+              label: "Lifecycle events",
+              hint: "Observe open, close, ask, update, and navigation events.",
+              checked: trackEvents,
+              onChange: setTrackEvents,
+            })}
+
+            {renderBooleanSelect({
+              label: "Structured errors",
+              hint: "Receive stable error codes and retry metadata.",
+              checked: reportErrors,
+              onChange: setReportErrors,
+            })}
           </div>
         </div>
-        {children ? <div className="mt-8">{children}</div> : null}
-      </div>
 
-      <aside className="not-prose" data-assistant-preview="">
         <div
           ref={previewHostRef}
-          className="relative flex h-[42rem] min-h-0 flex-col overflow-hidden rounded-xl border border-gray-950/10 bg-transparent dark:border-white/10 lg:sticky lg:top-20 lg:h-[calc(100vh-6rem)]"
-          data-assistant-preview-card=""
+          className="relative h-[26rem] min-w-0 flex-1 lg:h-full"
         >
           {previewHostReady && previewUrl ? (
             <iframe
@@ -521,7 +423,7 @@ export const AssistantWidget = () => (
               src={previewUrl}
               onLoad={updatePreview}
               scrolling="no"
-              className="min-h-0 w-full flex-1 border-0 bg-transparent [color-scheme:light_dark] dark:[color-scheme:dark]"
+              className="h-full w-full border-0 bg-transparent [color-scheme:light_dark] dark:[color-scheme:dark]"
             />
           ) : null}
           {previewStatus !== "ready" ? (
@@ -544,7 +446,40 @@ export const AssistantWidget = () => (
             </div>
           ) : null}
         </div>
-      </aside>
+      </div>
+
+      <div className="border-t border-gray-950/10 p-4 dark:border-white/10">
+        <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium text-gray-950 dark:text-white">
+              Install
+            </div>
+            <div className="mt-0.5 text-xs text-gray-600 dark:text-gray-400">
+              Copy the generated setup for your stack.
+            </div>
+          </div>
+          <div className="w-32">
+            {renderSelectField({
+              label: "Target",
+              value: installTarget,
+              options: INSTALL_OPTIONS,
+              onChange: setInstallTarget,
+            })}
+          </div>
+        </div>
+
+        <CodeBlockComponent
+          // always use jsx as language to render code highlighting correctly
+          language="jsx"
+          filename={
+            installTarget === "html" ? "index.html" : "assistant-widget.jsx"
+          }
+          wrap
+          expandable
+        >
+          {installCode}
+        </CodeBlockComponent>
+      </div>
     </div>
   );
 };