How to: Add hotkeys to your Wix website.

Have you always wanted to add some hotkeys to your Wix website? I have and with some help from the awesome Velo forum, I got it working. Below is a quick guide of how you could implement it yourself.

 

1. Adding a custom element Since Velo can not directly interact with the dom we need to make use of a custom element. It is important to remember the name and tag name since you will have to use them in the code.


2. Custom element code

It is important that you change the last line's name to the (tag) name that you used in the editor.

class MyWebComponent extends HTMLElement {
    connectedCallback() {
        document.addEventListener('keyup', (event) => {
 if ( event.ctrlKey  && event.key.toLowerCase() === 'INSERT KEY HERE' ) { 
 this.dispatchEvent(new CustomEvent('my-event'));
          }
        });
    }
}

customElements.define('my-webcomponent', MyWebComponent);

It is important that the tag name matches the customElements.define( ) in the last line of the elements code.










3. Page code

In the page code, you just need to add the .on event listener to the element to listen to the dispatch event for when a hotkey is pressed.


$w('#myWebComponent').on('my-event', (event) => { 
    //you can call your functions here
    console.log("hotkey pressed")
    exampleFunction()  
});

If you have any questions feel free to contact me.



Have a question?

Thanks for leaving your info. I'll get with you soon! 📱