switch feedback widget to remote bundle, hide by default

load feedback-web-component.iife.js from support.gospelambition.org
rename tag to <feedback-web-component> and update isCustomElement
set showByDefault: false so widget only shows with ?feedback=true
delete local public/assets/feedback-widget/ files

.gitignore

@@ -24,4 +24,5 @@ logs
 !.env.example
 
 plans
-.claude
+.claude
+.vscode

app/components/FeedbackWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="feedback-widget-slot">
-    <feedback-widget :profile-config="profileConfig" />
+    <feedback-web-component :profile-config="profileConfig" />
   </div>
 </template>
 
@@ -11,6 +11,7 @@ const profileConfig = JSON.stringify({
   profile: 'chat-bubble',
   apiBase: pub.feedbackApiBase,
   enabled: true,
+  showByDefault: false,
   instanceId: 'fb-doxa-life-parent',
   projectId: pub.feedbackProjectId
 })

nuxt.config.ts

@@ -57,11 +57,10 @@ export default defineNuxtConfig({
       link: [
         { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon/cropped-Favicon-light-doxa-01-32x32.png' },
         { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/favicon/cropped-Favicon-light-doxa-01-192x192.png' },
-        { rel: 'apple-touch-icon', href: '/favicon/cropped-Favicon-light-doxa-01-180x180.png' },
-        { rel: 'stylesheet', href: '/assets/feedback-widget/feedback-widget-slot.css' }
+        { rel: 'apple-touch-icon', href: '/favicon/cropped-Favicon-light-doxa-01-180x180.png' }
       ],
       script: [
-        { src: '/assets/feedback-widget/feedback-widget.iife.js', defer: true }
+        { src: 'https://support.gospelambition.org/js/feedback-web-component.iife.js', defer: true }
       ],
       meta: [
         { name: 'msapplication-TileImage', content: '/favicon/cropped-Favicon-light-doxa-01-270x270.png' }
@@ -155,7 +154,7 @@ export default defineNuxtConfig({
 
   vue: {
     compilerOptions: {
-      isCustomElement: (tag: string) => ['feedback-widget'].includes(tag)
+      isCustomElement: (tag: string) => ['feedback-web-component'].includes(tag)
     }
   },
 

public/assets/feedback-widget/feedback-widget-map.css

@@ -1,45 +0,0 @@
-/*
- * feedback-widget-map.css — theme overrides for the <feedback-widget>
- * when it's embedded INSIDE a .doxa-map-slot container.
- *
- * The widget's own slot.css defaults the wrapper to `position: fixed`
- * (bottom-right of the viewport). When nested in a map, we want it
- * anchored to the map card instead, so it rides with the map.
- *
- * Conventions:
- *   .feedback-widget-slot                 — required base class (ships with widget)
- *   .feedback-widget-slot--{page}         — per-page modifier (adopt / pray / home).
- *                                            Add per-page overrides here if a map
- *                                            needs different placement (e.g. bottom-left).
- */
-
-/* Widget slot → anchored to the MAP card's bottom-right (not viewport).
- *
- * .doxa-map-slot is already position:relative (see map-app-slot.css), so
- * the widget's wrapper — when inside that slot — is absolutely positioned
- * within the map card. The max z-index keeps it above <doxa-map> and any
- * Mapbox controls.
- *
- * NOTE: .doxa-map-slot has overflow:hidden. When the bubble is closed (the
- * 52x52 circle), it fits comfortably at right:16 bottom:16. When the user
- * opens the chat panel (360px wide), the panel expands upward from the
- * bubble; if the map is tall enough (>=780px desktop) the panel fits. On
- * very narrow mobile (aspect-ratio 1/2), the panel may get clipped at the
- * top. If that becomes a problem, we can use :has() to unset overflow:
- *    .doxa-map-slot:has(.feedback-widget-slot) { overflow: visible }
- */
-.doxa-map-slot .feedback-widget-slot {
-  position: absolute;
-  right: 16px;
-  bottom: 16px;
-  left: auto;
-  top: auto;
-  z-index: 2147483647 !important;
-}
-
-/* Per-instance hooks — empty on purpose. Add page-specific placement here.
-   Example: move the home-page widget to the bottom-left:
-     .feedback-widget-slot--home { right: auto; left: 16px; } */
-.feedback-widget-slot--home  { /* inherits default; customise here if needed */ }
-.feedback-widget-slot--pray  { /* inherits default */ }
-.feedback-widget-slot--adopt { /* inherits default */ }

public/assets/feedback-widget/feedback-widget-slot.css

@@ -1,32 +0,0 @@
-/*
- * feedback-widget-slot.css — host-page wrapper CSS.
- *
- * The <feedback-widget> itself is position:relative inside its Shadow DOM; the
- * SLOT wrapper owns where on the page the widget appears. Default position is
- * bottom-right floating, but any host can override by re-declaring the class
- * or by inline-styling the wrapper element.
- *
- * Drop-in (floating chat bubble):
- *   <div class="feedback-widget-slot">
- *     <feedback-widget profile-config='...' />
- *   </div>
- *
- * Move it to the bottom-left:
- *   <div class="feedback-widget-slot" style="right: auto; left: 20px;">
- *     <feedback-widget profile-config='...' />
- *   </div>
- */
-
-.feedback-widget-slot {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 2147483000;
-}
-
-/* Variant: inline in document flow (for future inline-form profile). */
-.feedback-widget-slot.inline {
-  position: static;
-  width: 100%;
-  max-width: 480px;
-}