diff --git a/client/@types/global.d.ts b/client/@types/global.d.ts
index 77464e6d..2308ea4d 100644
--- a/client/@types/global.d.ts
+++ b/client/@types/global.d.ts
@@ -1 +1,2 @@
 declare const PLUGIN_CHAT_PACKAGE_NAME: string
+declare const PLUGIN_CHAT_SHORT_NAME: string
diff --git a/client/admin-plugin-client-plugin.ts b/client/admin-plugin-client-plugin.ts
index 06504ee3..163b5c0d 100644
--- a/client/admin-plugin-client-plugin.ts
+++ b/client/admin-plugin-client-plugin.ts
@@ -1,6 +1,38 @@
 import type { ChatType } from 'shared/lib/types'
 
-function register ({ registerSettingsScript }: RegisterOptions): void {
+interface ActionPluginSettingsParams {
+  npmName: string
+}
+
+function register ({ registerHook, registerSettingsScript, peertubeHelpers }: RegisterOptions): void {
+  function getBaseRoute (): string {
+    // NB: this will come with Peertube > 3.2.1 (3.3.0?)
+    if (peertubeHelpers.getBaseRouterRoute) {
+      return peertubeHelpers.getBaseRouterRoute()
+    }
+    // We are guessing the route with the correct plugin version with this trick:
+    const staticBase = peertubeHelpers.getBaseStaticRoute()
+    // we can't use '/plugins/livechat/router', because the loaded html page needs correct relative paths.
+    return staticBase.replace(/\/static.*$/, '/router')
+  }
+
+  registerHook({
+    target: 'action:admin-plugin-settings.init',
+    handler: ({ npmName }: ActionPluginSettingsParams) => {
+      if (npmName !== PLUGIN_CHAT_PACKAGE_NAME) {
+        console.log(`[peertube-plugin-livechat] Settings for ${npmName}, not ${PLUGIN_CHAT_PACKAGE_NAME}. Returning.`)
+        return
+      }
+      console.log('[peertube-plugin-livechat] Initializing diagnostic button')
+      const diagButtons = document.querySelectorAll('.peertube-plugin-livechat-launch-diagnostic')
+      diagButtons.forEach(diagButton => {
+        if (diagButton.hasAttribute('href')) { return }
+        // TODO: use a modal instead of a target=_blank
+        diagButton.setAttribute('href', getBaseRoute() + '/settings/diagnostic')
+        diagButton.setAttribute('target', '_blank')
+      })
+    }
+  })
   registerSettingsScript({
     isSettingHidden: options => {
       const name = options.setting.name
diff --git a/server/lib/settings.ts b/server/lib/settings.ts
index dd8815e8..79c7e37d 100644
--- a/server/lib/settings.ts
+++ b/server/lib/settings.ts
@@ -1,4 +1,3 @@
-import { getBaseRouterRoute } from './helpers'
 import { ensureProsodyRunning, ensureProsodyNotRunning } from './prosody/ctl'
 import type { ChatType } from '../../shared/lib/types'
 
@@ -17,14 +16,13 @@ function initSettings (options: RegisterServerOptions): void {
     descriptionHTML: `Please read the
 <a href="https://github.com/JohnXLivingston/peertube-plugin-livechat/blob/main/README.md" target="_blank">
   documentation
-</a> before trying to use this plugin.`
+</a> first.`
   })
   registerSetting({
     type: 'html',
     private: true,
     descriptionHTML: `Before asking for help, please use the diagnostic tool:
-<a href="${getBaseRouterRoute(options)}settings/diagnostic" target="_blank">Launch diagnostic</a>
-<br>`
+<a class="peertube-plugin-livechat-launch-diagnostic">Launch diagnostic</a>`
   })
 
   // ********** Chat Mode
diff --git a/webpack.config.js b/webpack.config.js
index e7811923..65769e76 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,7 +36,8 @@ let config = clientFiles.map(f => ({
   },
   plugins: [
     new webpack.DefinePlugin({
-      PLUGIN_CHAT_PACKAGE_NAME: JSON.stringify(packagejson.name)
+      PLUGIN_CHAT_PACKAGE_NAME: JSON.stringify(packagejson.name),
+      PLUGIN_CHAT_SHORT_NAME: JSON.stringify(packagejson.name.replace(/^peertube-plugin-/, ''))
     }),
     new EsmWebpackPlugin()
   ]