maybecoding

Adding a private feedback box to Bear

My Bear homepage has a feedback box that lets people send private messages:

maybecoding homepage

Here's how to add your own feedback box:

  1. Open https://frogtab.com/help#registering-for-a-personal-link on your preferred device for receiving messages. (Side note: Frogtab is the task management app I've been blogging about here.)

  2. Write a comment in the "Your experience" box, then click Send & Register. It doesn't really matter what you write - I suggest writing the address of your Bear blog so that I can check out your blog!

  3. Click Open My Personal Link, then make a note of the ID in the URL.

    For example, my personal link is:

    https://frogtab.com/send#03ae6b6f-1134-4e7b-83ed-deaae4b53af7

    and my ID is:

    03ae6b6f-1134-4e7b-83ed-deaae4b53af7

  4. Add the following code to your Bear homepage:

    <input id="message-box" type="text" placeholder="Send me a message…">

<button id="send-message" type="submit" onclick="onClickSend()">Send</button>
<span id="message-status"></span>

<script>
  const domMessageBox = document.getElementById("message-box");
  const domMessageStatus = document.getElementById("message-status");
  let encryptAndSend = null;
  async function onClickSend() {
    const message = domMessageBox.value.trim();
    if (message == "") {
      return;
    }
    domMessageBox.value = "";
    domMessageStatus.textContent = "⏳";
    let success = false;
    try {
      if (!encryptAndSend) {
        const frogtab = await import("https://frogtab.com/open/sdk.js");
        encryptAndSend = await frogtab.connectToInbox("YOUR ID GOES HERE");
      }
      success = await encryptAndSend(`Message from Bear: ${message}`);
    }
    catch (err) {}
    if (success) {
      domMessageStatus.textContent = "👍";
      setTimeout(() => {
        domMessageStatus.textContent = "";
      }, 3000);
    }
    else {
      domMessageBox.value = message;
      domMessageStatus.textContent = "";
    }
  }
</script>

    Replace YOUR ID GOES HERE by your ID from step 3.

    You might want to customize the style of the feedback box and the send button. Here's the CSS I've added to my Bear theme:

    #message-box {
  background-color: inherit;
  color: inherit;
  border: 1px solid;
  padding: 8px;
  font-size: 16px;
  width: calc(100% - 15px);
}
#send-message {
  font-size: 16px;
}

That's it!

When someone sends a message, the message appears in your Frogtab inbox:

Frogtab inbox

FAQs