diff --git a/components/InstallCredentialHandler.vue b/components/InstallCredentialHandler.vue
new file mode 100644
index 0000000..2bb4358
--- /dev/null
+++ b/components/InstallCredentialHandler.vue
@@ -0,0 +1,75 @@
+<template>
+  <q-footer class="bg-frosted bg-transparent text-grey-7">
+    <q-toolbar class="justify-center">
+      <div>
+        Wallet not showing up when other websites request credentials?
+        Click
+        <a
+          class="br-link"
+          @click.prevent="installCredentialHandler">here</a>.
+      </div>
+    </q-toolbar>
+  </q-footer>
+</template>
+
+<script>
+/*!
+ * Copyright (c) 2023 Digital Bazaar, Inc. All rights reserved.
+ */
+import {installHandler} from 'web-credential-handler';
+import {Notify} from 'quasar';
+
+export default {
+  name: 'InstallCredentialHandler',
+  setup() {
+    async function installCredentialHandler() {
+      try {
+        const result = await installHandler({url: '/credential-handler'});
+        if(result === undefined) {
+          Notify.create({
+            message: 'Your wallet is ready!',
+            color: 'green-6',
+            timeout: 5000,
+            textColor: 'white',
+            actions: [{
+              label: 'Dismiss',
+              color: 'white'
+            }]
+          });
+        }
+
+      } catch(e) {
+        if(e.message === 'Permission denied.') {
+          Notify.create({
+            message: 'Warning! Your wallet installation is incomplete.',
+            color: 'red-5',
+            timeout: 5000,
+            textColor: 'white',
+            actions: [{
+              label: 'Dismiss',
+              color: 'white'
+            }]
+          });
+        }
+      }
+    }
+    return {
+      installCredentialHandler
+    };
+  }
+};
+</script>
+
+<style scoped>
+.bg-frosted {
+  -webkit-backdrop-filter: blur(8px) !important;  /* Safari 9+ */
+  backdrop-filter: blur(8px) !important; /* Chrome and Opera */
+  box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08) !important;
+}
+
+.br-link {
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: underline;
+}
+</style>
diff --git a/lib/helpers.js b/lib/helpers.js
deleted file mode 100644
index d1bcbf0..0000000
--- a/lib/helpers.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*!
- * Copyright (c) 2019-2023 Digital Bazaar, Inc. All rights reserved.
- */
-import {config} from '@bedrock/web';
-import {installHandler} from 'web-credential-handler';
-import {Notify} from 'quasar';
-
-const notifiedAccounts = new Map();
-
-export function notifyAllowWallet({account, preventRenotify = false}) {
-  // if already notified ignore
-  if(preventRenotify && notifiedAccounts.get(account)) {
-    return;
-  }
-  if(config?.vueWallet?.disableChapi) {
-    return;
-  }
-  return Notify.create({
-    message: 'Show your wallet when other websites request credentials?',
-    color: 'green-9',
-    // show the message for 15 seconds
-    timeout: 15000,
-    progress: true,
-    textColor: 'white',
-    actions: [{
-      label: 'Allow',
-      color: 'white',
-      async handler() {
-        try {
-          // install credential handler
-          await installHandler({url: '/credential-handler'});
-          // don't show the notification to the same account again
-          notifiedAccounts.set(account, true);
-        } catch(e) {
-          // eslint-disable-line no-console
-          console.error('CHAPI register error:', e);
-          Notify.create({
-            type: 'negative',
-            message:
-              'Your wallet will not be shown to you as an option for using ' +
-              'credentials on other websites. Please click the button and ' +
-              'select "Allow" to change this.',
-            actions: [{icon: 'fa fa-times'}]
-          });
-        }
-      }
-    }, {
-      label: 'Dismiss',
-      color: 'white',
-      handler() {
-        // if the user dismisses the notification don't show it again
-        notifiedAccounts.set(account, true);
-      }
-    }]
-  });
-}
diff --git a/routes/HomePage.vue b/routes/HomePage.vue
index a895fab..ba3845d 100644
--- a/routes/HomePage.vue
+++ b/routes/HomePage.vue
@@ -8,7 +8,8 @@
       @delete-credential="$event.waitUntil(deleteCredential($event))"
       @filtered-profiles="filteredProfiles = $event"
       @filtered-credentials-loading="loadingFilteredCredentials = $event"
-      @refresh="getCredentials"/>
+      @refresh="getCredentials" />
+    <install-credential-handler />
   </div>
 </template>
 
@@ -18,15 +19,17 @@ import {
   getCredentialStore,
   profileManager
 } from '@bedrock/web-wallet';
-import {computed, onMounted, ref, toRef, watch} from 'vue';
+import {computed, ref, toRef, watch} from 'vue';
 import {computedAsync} from '@vueuse/core';
 import Credentials from '../components/Credentials.vue';
-import {notifyAllowWallet} from '../lib/helpers.js';
+import InstallCredentialHandler
+  from '../components/InstallCredentialHandler.vue';
 
 export default {
   name: 'HomePage',
   components: {
-    Credentials
+    Credentials,
+    InstallCredentialHandler
   },
   props: {
     account: {
@@ -124,11 +127,6 @@ export default {
       loadingFilteredCredentials.value ||
       loadingCredentials.value ||
       loadingProfiles.value);
-    // on mount possibly show the wallet authorization notification
-    onMounted(() => notifyAllowWallet({
-      account: accountId.value,
-      preventRenotify: true
-    }));
 
     return {
       credentials,