index.html

<!doctype html>
<html>
<head>
  <title>Hello, Snaps!</title>
</head>
<body>
  <h1>Hello, Snaps!</h1>

  <button class="connect">Connect</button>
  <button class="getPubkey">Get public key</button>

  <script>
    const snapId = `local:${window.location.href}`;

    const connectButton = document.querySelector('button.connect')
    const sendButton = document.querySelector('button.sendHello')
    const getPubkeyButton = document.querySelector('button.getPubkey')

    connectButton.addEventListener('click', connect)
    getPubkeyButton.addEventListener('click', getPubkey)

    // here we get permissions to interact with and install the snap
    async function connect () {
      await ethereum.request({
        method: 'wallet_requestSnaps',
        params: { [snapId]: {} }
      })
    }

    async function getPubkey () {
      try {
        const response = await ethereum.request({
          method: 'wallet_invokeSnap',
          params: {
            snapId,
            request: {
              method: 'getPublicKey',
              params: {
                derivationPath: [`0'`, `0'`],
                confirm: true
              }
            }
          }
        })
        console.log(response);
      } catch (err) {
        console.error(err)
        alert('Problem happened: ' + err.message || err)
      }
    }
  </script>
</body>
</html>