How to embed a like button on Notion with Lyket

-

Lyket is the ultimate tool to quickly implement GDPR-compliant like clap or vote buttons on any Notion project. From the moment you create the button our server will keep track of every visitor interaction without storing their personal data.

To get started you just need to register to Lyket and get your personal public API key.

How to embed a widget on Notion

If you’re using Notion then you probably know that you can’t embed HTML widgets directly into it and there is not a clean/nice way to achieve that. But do not dispair! There are at least 3 workarounds to do so at the moment. I will briefly describe the first 2

  • The potion shop It's very easy but you have to create an account.
  • Github pages which is also great and has no limits on the number of widgets but adds an ad link to your widgets that just bugged me!
  • htmlsave which is great tool but only gives you one widget for free and you have to subscribe to add more

The Potion Shop

This is very easy, you have to register on Potion to receive a link on which you can load your html. Follow all steps in this tutorial

Here is the video on how to do it:

In the html part you have to paste something similar, depending on which button you want to create:

<html style="height: 100%;background-color: white;">
  <body>
    <div
      data-lyket-type="like"
      data-lyket-id="notion-test"
      data-lyket-template="twitter"
      style="text-align: center;"
    ></div>

    <script src="https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=[YOUR-API-KEY]></script>
  </body>
</html>

Use Github pages

Basically the rationale behind embedding in Notion is to host your own html containing the Lyket code and copy the link to that page to Notion, so you can actually do it using Github pages.

Start by creating a new public repo containing as many html files as the buttons you want to see on Notion. Each html file should contain code something similar to this:

<html style="height: 100%;background-color: white;">
  <body>
    <div
      data-lyket-type="like"
      data-lyket-id="notion-test"
      data-lyket-template="twitter"
      style="text-align: center;"
    ></div>

    <script src="https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=[YOUR-API-KEY]></script>
  </body>
</html>

Do not remove the style otherwise you will see the default Notion background color

You can then tell Github to serve the html pages you just created through Github Page by going into Settings -> Select Branch main -> select base root -> hit Save

Wait a few seconds for Github to publish the content and then you will be able to see your buttons on the link that Github provides.

For every html file you created Github pages will generate an endpoint with the same name. So for example if you have a my-button.html you can use the link https://my-github-username.github.io/my-repo/my-button to embed in Notion

After you have a link to your button you can paste it into Notion and select embed. And the game is done!