diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index b2f92703f8f1e4b57d4457b76746ce976a7dc90e..0c3da68a99592cdcb05f04e30d17a767ab6cd085 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -1,4 +1,4 @@
-import 'https://cdn.skypack.dev/emoji-picker-element';
+import { Picker } from 'https://cdn.skypack.dev/emoji-picker-element';
 
 /**
  * Custom emoji picker.
@@ -13,6 +13,10 @@ converse.plugins.add('sib-emoji-picker', {
     const _converse = this._converse;
     const { api, __ } = _converse;
 
+    // Register the picker element
+    api.elements.define('emoji-picker', Picker);
+    api.elements.register();
+
     /**
      * Force rendering of the emoji picker inside the dropdown.
      * Note: Without this mixin, the IndexedDB can't be loaded for some reason.
@@ -42,8 +46,8 @@ converse.plugins.add('sib-emoji-picker', {
         setTimeout(() => {
           // Focus the search input afterwards
           const picker = this.querySelector('emoji-picker');
-          picker?.shadowRoot.querySelector('.search')?.focus();
-        })
+          picker?.shadowRoot?.querySelector('.search')?.focus();
+        });
       },
     };