Notion like button

How to embed a like button on Notion with Lyket

With Lyket you can quickly implement GDPR-compliant like, clap or vote buttons Notion. 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 there is not a clean/nice way to embed widgets. But do not dispair! There are at least 3 workarounds succesfully add like buttons in your Notion page at the moment. I will briefly describe them

Deploy your buttons to serverless platform like Netlify or Vercel.
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

Your own buttons generator app

Creating your own widget is definitely the best way to embed an external service to Notion because it's fully customisable andit's free if you use Netlify or Vercel!

We made this easier for you by creating a buttons generator app that you can fork and customise.

To create your own widget simply follow all the steps in the repo README and start generating buttons in the smoothest way.

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;"
     />

    <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;"
     />

    <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!