How to create custom keyboard shortcuts

Published Date
Sep 20, 2021
Tags
Workflow Tips
Author
Yusuf Giftworks

Welcome

Try the live demo on this Notion-Super template,
Try the live demo on this Notion-Super template, Portal

Creating keyboard shortcuts on your Notion-Super site requires some coding, but it's more of copy and pasting than writing scripts. Even if you don't code, if you can follow along the instructions here, it should be very easy.

Table of contents

Steps

  1. Head over to the global site code section of your site or to the code section of a page within your site.
  2. Click on 'Body'.
  3. In the body section, insert the relevant code scripts below, and modify it to suit your own needs.
  4. Remember to click save.

Main points to know about

Inside the code scripts below, you will notice these lines. Here are the important bits that you will need to know about:

(event.key === "1")

  • Replace 1 with any number, alphabet, and symbol on your keyboard that you want to use as your shortcut. Note that keys like ctrl, alt, and shift keys have their own event key. To learn more about combining keys and using modifier keys like ctrl, alt, and shift keys, read this article.

getElementById("block-your Notion block ID");

  • Replace the "block-...." with your own Notion block ID. To learn how to get your Notion block ID, checkout the home page under CSS essentials.

elmnt.scrollIntoView();

  • Scrolls to an element on a webpage when an event.key has been pressed on the keyboard. There's nothing to add over here, just copy and paste the whole thing.

window.open("https://twitter.com/yusufgiftworks");

  • Opens Twitter in a new tab when user presses the assigned key. Replace the link with your own.

Code scripts and the types of functions you can use

  1. This code script allows you to scroll to an element on a webpage when an event.key has been pressed on the keyboard.
  2. <script>
    document.addEventListener("keydown", function(event) {
        if (event.key === "1") {
          var elmnt = document.getElementById("block-55e99b5de4fe45519fb1f1b266d02720");
          elmnt.scrollIntoView();
        }
      });
    </script>
  3. This code script will open a web page in a new tab.
  4. Replace the event.key with any key, and the link with any webpage link.

    <script>
      document.addEventListener("keydown", function(event) {
        if (event.key === "t") {
          window.open("https://twitter.com/yusufgiftworks");
        }
      });
    </script>

There you go.

It's that simple to create keyboard shortcuts on your Notion-Super site. Of course, there are many other things you could do within the Javascript function, but I'll share those extra tips soon.

Hope it helps.

Follow me on Twitter for more Notion-Super design hacks and tips.

Consider tipping me if you found this content useful.

Thanks, and take care.

— End

← Back

image