Update install instructions

Fallstop · Fallstop · commit d9a748d1e9ba · 2026-03-03T07:51:36.000+13:00
diff --git a/README.md b/README.md
@@ -129,27 +129,20 @@ ws.onerror = (err) => console.error('WebSocket error:', err);
 - Warns 14 days before expiry
 - Falls back to cache if GitHub is unreachable
 
-## Manual Installation
+## Installation
+
+Install from the [Logitech Marketplace](https://marketplace.logi.com/plugin/HapticWeb/en) directly within Logi Options+. You can find plugins in the Haptic Feedback area of your MX Master 4 settings.
+
+### Manual Installation
 
 1. Open Logitech Options+ and click on your MX Master 4.
 2. In the left sidebar, open the `HAPTIC FEEDBACK` tab and click on the haptic feedback settings popover.
-3. In the new right sidebar, click the `INSTALL AND UNINSTALL PLUGINS` button. Now you're in the plugin management window.
+3. In the new right sidebar, click the `INSTALL AND UNINSTALL PLUGINS` button.
 4. Download the `HapticWeb.lplug4` release asset from [GitHub Releases](https://github.com/fallstop/HapticWebPlugin/releases) and double-click it.
 5. This will trigger an installation dialog in Logitech Options+. Press continue.
 6. The server starts automatically at `https://local.jmw.nz:41443/`
 7. Test at [https://haptics.jmw.nz](https://haptics.jmw.nz)
 
-### Uninstalling
-A manually installed plugin doesn't show in the plugin list, so to uninstall, simply delete the plugin folder:
-
-```bash
-# Windows
-C:\Users\USERNAME\AppData\Local\Logi\LogiPluginService\Plugins\HapticWebPlugin\
-
-# macOS
-~/Library/Application Support/Logi/LogiPluginService/Plugins/HapticWebPlugin/
-```
-
 ## Development
 
 ### Building
diff --git a/web-demo/src/routes/+page.svelte b/web-demo/src/routes/+page.svelte
@@ -15,11 +15,26 @@
   import Download from "@lucide/svelte/icons/download";
   import Vibrate from "@lucide/svelte/icons/vibrate";
   import Zap from "@lucide/svelte/icons/zap";
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
 
   const connected = $derived(isConnected());
   const hasInitiated = $derived(hasInitiatedConnection());
   const connectionState = $derived(getConnectionState());
 
+  let installCount: number | null = $state(null);
+
+  onMount(async () => {
+    try {
+      const res = await fetch("/_api/downloads");
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.downloads != null) installCount = data.downloads;
+    } catch {
+      /* ignore */
+    }
+  });
+
   function handleConnect() {
     connect();
   }
@@ -45,6 +60,19 @@
         <div class="flex items-center gap-3">
           <Badge variant="outline">Logi Actions SDK</Badge>
           <Badge variant="outline">Open Source</Badge>
+          <Badge variant="outline" class={installCount == null ? 'invisible' : ''}>
+            {#if installCount != null}
+              <span in:fade={{ duration: 300 }} class="inline-flex items-center gap-1">
+                <Download class="w-3 h-3" />
+                {installCount.toLocaleString()} installs
+              </span>
+            {:else}
+              <span class="inline-flex items-center gap-1 invisible">
+                <Download class="w-3 h-3" />
+                0,000 installs
+              </span>
+            {/if}
+          </Badge>
         </div>
 
         <h1 class="text-4xl sm:text-5xl font-bold tracking-tight">
@@ -120,8 +148,8 @@
       </div>
       <h3 class="text-xl font-semibold">1. Install</h3>
       <p class="text-muted-foreground text-sm">
-        Download the plugin and install it through Logi Options+. Takes less
-        than a minute.
+        Install from the Logitech Marketplace in Logi Options+, or download
+        manually from GitHub. Takes less than a minute.
       </p>
       <a
         href="/install"
diff --git a/web-demo/src/routes/_api/downloads/+server.ts b/web-demo/src/routes/_api/downloads/+server.ts
@@ -0,0 +1,19 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+	try {
+		const res = await fetch('https://marketplace.logi.com/api/downloads', {
+			signal: AbortSignal.timeout(5000)
+		});
+		if (!res.ok) return json({ downloads: null });
+		const data = await res.json();
+		const count = data?.plugins?.HapticWeb?.downloads;
+		if (count != null) {
+			return json({ downloads: count });
+		}
+	} catch {
+		/* ignore */
+	}
+	return json({ downloads: null });
+};
diff --git a/web-demo/src/routes/install/+page.svelte b/web-demo/src/routes/install/+page.svelte
@@ -2,10 +2,10 @@
   import { Button } from "$lib/components/ui/button";
   import { Separator } from "$lib/components/ui/separator";
   import AlertTriangle from "@lucide/svelte/icons/alert-triangle";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import Download from "@lucide/svelte/icons/download";
   import ExternalLink from "@lucide/svelte/icons/external-link";
-  import Folder from "@lucide/svelte/icons/folder";
-  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import Store from "@lucide/svelte/icons/store";
 </script>
 
 <svelte:head>
@@ -15,13 +15,12 @@
     content="Install the HapticWeb plugin for MX Master 4 haptic feedback." />
 </svelte:head>
 
-<div class="max-w-6xl mx-auto px-4 py-12">
+<div class="max-w-4xl mx-auto px-4 py-12">
   <!-- Header -->
   <div class="space-y-4 mb-12">
     <h1 class="text-4xl font-bold">Install HapticWeb Plugin</h1>
     <p class="text-lg text-muted-foreground">
-      Get the plugin running in under a minute. Just download, double-click, and
-      you're ready.
+      Get the plugin running in under a minute.
     </p>
   </div>
 
@@ -32,7 +31,9 @@
       <div class="p-4 rounded-lg border border-border bg-card flex gap-4">
         <img
           src="/mx-master4.webp"
-          alt="MX Master 4"
+          alt=""
+          width="64"
+          height="64"
           class="w-16 h-16 object-contain" />
         <div>
           <h3 class="font-medium">Logitech MX Master 4</h3>
@@ -44,7 +45,9 @@
       <div class="p-4 rounded-lg border border-border bg-card flex gap-4">
         <img
           src="/options-plus.png"
-          alt="Logi Options+"
+          alt=""
+          width="64"
+          height="64"
           class="w-16 h-16 object-contain" />
         <div>
           <h3 class="font-medium">Logi Options+</h3>
@@ -65,88 +68,115 @@
 
   <Separator class="mb-12" />
 
-  <!-- Installation Steps -->
+  <!-- Marketplace Installation -->
   <section class="mb-12">
     <h2 class="text-2xl font-semibold mb-6">Installation</h2>
 
-    <div class="space-y-6">
-      <!-- Step 1 -->
-      <div class="flex gap-4">
+    <a
+      href="https://marketplace.logi.com/plugin/HapticWeb/en"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="group block p-6 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 transition-colors">
+      <div class="flex items-center gap-4">
         <div
-          class="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-semibold">
-          1
+          class="shrink-0 w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center">
+          <Store class="w-6 h-6 text-primary" />
         </div>
-        <div class="flex-1 space-y-3">
-          <h3 class="font-medium">Download the plugin</h3>
-          <p class="text-sm text-muted-foreground">
-            Get the latest
-            <code class="px-1.5 py-0.5 rounded bg-muted text-foreground">
-              HapticWeb.lplug4
-            </code>
-            file from GitHub Releases.
+        <div class="flex-1">
+          <h3 class="text-lg font-medium group-hover:text-primary transition-colors">
+            Install from the Logitech Marketplace
+          </h3>
+          <p class="text-sm text-muted-foreground mt-1">
+            Open Logi Options+, go to your MX Master 4's <strong>Haptic Feedback</strong> settings, and find HapticWeb in the marketplace.
           </p>
-          <Button
-            href="https://github.com/fallstop/HapticWebPlugin/releases/latest/download/HapticWeb.lplug4"
-            variant="outline"
-            size="sm">
-            <Download class="w-4 h-4 mr-2" />
-            Download HapticWeb.lplug4
-          </Button>
         </div>
+        <ExternalLink class="w-5 h-5 text-muted-foreground shrink-0" />
       </div>
+    </a>
+  </section>
 
-      <!-- Step 2 -->
-      <div class="flex gap-4">
-        <div
-          class="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-semibold">
-          2
-        </div>
-        <div class="flex-1 space-y-3">
-          <h3 class="font-medium">Open plugin management in Logi Options+</h3>
-          <p class="text-sm text-muted-foreground">
-            Open Logi Options+ → Click on your MX Master 4 → Go to <strong
-              >HAPTIC FEEDBACK</strong>
-            in the sidebar → Click the settings popover → Click
-            <strong>INSTALL AND UNINSTALL PLUGINS</strong>.
-          </p>
-        </div>
-      </div>
+  <!-- Manual Installation (collapsed feel) -->
+  <section class="mb-12">
+    <h2 class="text-xl font-semibold mb-4 text-muted-foreground">Manual Installation</h2>
 
-      <!-- Step 3 -->
-      <div class="flex gap-4">
-        <div
-          class="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-semibold">
-          3
+    <div class="rounded-xl border border-border bg-card p-6">
+      <div class="space-y-5">
+        <!-- Step 1 -->
+        <div class="flex gap-3">
+          <div
+            class="shrink-0 w-7 h-7 rounded-full bg-primary/15 flex items-center justify-center text-primary text-sm font-semibold">
+            1
+          </div>
+          <div class="flex-1 space-y-2">
+            <h3 class="font-medium text-sm">Download the plugin</h3>
+            <p class="text-sm text-muted-foreground">
+              Get the latest
+              <code class="px-1.5 py-0.5 rounded bg-muted text-foreground text-xs">HapticWeb.lplug4</code>
+              from GitHub Releases.
+            </p>
+            <Button
+              href="https://github.com/fallstop/HapticWebPlugin/releases/latest/download/HapticWeb.lplug4"
+              variant="outline"
+              size="sm">
+              <Download class="w-4 h-4 mr-1" />
+              Download HapticWeb.lplug4
+            </Button>
+          </div>
         </div>
-        <div class="flex-1 space-y-3">
-          <h3 class="font-medium">Install the plugin</h3>
-          <p class="text-sm text-muted-foreground">
-            Double-click the downloaded <code
-              class="px-1.5 py-0.5 rounded bg-muted text-foreground"
-              >HapticWeb.lplug4</code>
-            file. Logi Options+ will show an installation dialog — click
-            <strong>Continue</strong>.
-          </p>
+
+        <Separator />
+
+        <!-- Step 2 -->
+        <div class="flex gap-3">
+          <div
+            class="shrink-0 w-7 h-7 rounded-full bg-primary/15 flex items-center justify-center text-primary text-sm font-semibold">
+            2
+          </div>
+          <div class="flex-1">
+            <h3 class="font-medium text-sm">Open plugin management</h3>
+            <p class="text-sm text-muted-foreground mt-1">
+              Logi Options+ <ChevronRight class="w-3 h-3 inline" /> MX Master 4 <ChevronRight class="w-3 h-3 inline" />
+              <strong>Haptic Feedback</strong> <ChevronRight class="w-3 h-3 inline" /> Settings popover <ChevronRight class="w-3 h-3 inline" />
+              <strong>Install and Uninstall Plugins</strong>
+            </p>
+          </div>
         </div>
-      </div>
 
-      <!-- Step 4 -->
-      <div class="flex gap-4">
-        <div
-          class="shrink-0 w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-500 font-semibold">
-          4
+        <Separator />
+
+        <!-- Step 3 -->
+        <div class="flex gap-3">
+          <div
+            class="shrink-0 w-7 h-7 rounded-full bg-primary/15 flex items-center justify-center text-primary text-sm font-semibold">
+            3
+          </div>
+          <div class="flex-1">
+            <h3 class="font-medium text-sm">Install the plugin</h3>
+            <p class="text-sm text-muted-foreground mt-1">
+              Double-click the downloaded
+              <code class="px-1.5 py-0.5 rounded bg-muted text-foreground text-xs">HapticWeb.lplug4</code>
+              file and click <strong>Continue</strong> in the dialog.
+            </p>
+          </div>
         </div>
-        <div class="flex-1 space-y-3">
-          <h3 class="font-medium">Done!</h3>
-          <p class="text-sm text-muted-foreground">
-            The server starts automatically at <code
-              class="px-1.5 py-0.5 rounded bg-muted text-foreground"
-              >https://local.jmw.nz:41443/</code
-            >. Test it on the
-            <a href="/playground" class="text-primary hover:underline"
-              >Playground</a
-            >.
-          </p>
+
+        <Separator />
+
+        <!-- Step 4 -->
+        <div class="flex gap-3">
+          <div
+            class="shrink-0 w-7 h-7 rounded-full bg-green-500/15 flex items-center justify-center text-green-500 text-sm font-semibold">
+            4
+          </div>
+          <div class="flex-1">
+            <h3 class="font-medium text-sm">Done!</h3>
+            <p class="text-sm text-muted-foreground mt-1">
+              The server starts automatically at
+              <code class="px-1.5 py-0.5 rounded bg-muted text-foreground text-xs">https://local.jmw.nz:41443/</code>.
+              Test it on the
+              <a href="/playground" class="text-primary hover:underline">Playground</a>.
+            </p>
+          </div>
         </div>
       </div>
     </div>
@@ -176,38 +206,6 @@
 
   <Separator class="mb-12" />
 
-  <!-- Uninstalling -->
-  <section class="mb-12">
-    <h2 class="text-2xl font-semibold mb-6 flex items-center gap-2">
-      <Trash2 class="w-5 h-5" />
-      Uninstalling
-    </h2>
-    <p class="text-muted-foreground mb-4">
-      Manually installed plugins don't appear in Logi Options+ plugin list. To
-      uninstall, delete the plugin folder:
-    </p>
-
-    <div class="space-y-3">
-      <div class="p-3 rounded-lg bg-muted font-mono text-sm">
-        <div class="flex items-center gap-2 text-muted-foreground mb-1">
-          <Folder class="w-4 h-4" />
-          <span class="font-sans text-xs">Windows</span>
-        </div>
-        C:\Users\USERNAME\AppData\Local\Logi\LogiPluginService\Plugins\HapticWebPlugin\
-      </div>
-
-      <div class="p-3 rounded-lg bg-muted font-mono text-sm">
-        <div class="flex items-center gap-2 text-muted-foreground mb-1">
-          <Folder class="w-4 h-4" />
-          <span class="font-sans text-xs">macOS</span>
-        </div>
-        ~/Library/Application Support/Logi/LogiPluginService/Plugins/HapticWebPlugin/
-      </div>
-    </div>
-  </section>
-
-  <Separator class="mb-12" />
-
   <!-- Troubleshooting -->
   <section>
     <h2 class="text-2xl font-semibold mb-6 flex items-center gap-2">
