Medium clap button

How to add the Medium clap button to your website with Lyket

Lyket wants to give you all the tools to customize and create the perfect button for every situation. So we decided that we wanted to allow our users to add the famous Medium clap button on their own blog! Moreover Lyket doesn't require visitors to sign-up like Medium does, giving a even smoother user-experience.

Why a clap button?

Clap buttons behave differently from like buttons, in fact you can click on a clap button as many time as you want and the counter will keep on increasing.

The thing that a web designer must always keep in mind when building a web page or an app is the goal that the user wants to achieve by interacting with your product. It's the website builder's job then to translate their intentions and actions into buttons.

Applying a behavior to a button facilitates the interaction between your user and the button itself by returning feedback that allows the user a greater understanding of the effectiveness of its action.

That is why Medium chose a different behavior for their buttons.

Clap buttons give a different user-experience and they are perfect for blogs in which the more feedback you can get, the merrier!

Lyket is the ultimate tool to add Medium clap buttons to any website with minimal effort!

Medium clap buttons with Lyket

Lyket took inspiration from Medium to create buttons that wouldbehave exactly like the Medium clap buttons, and also look like them. You can create Medium clap buttons either if you use a website builder, like Wordpress, Webflow or if you develop using React or any other React based framework.

If you use HTML or a website builder you can use use our HTML + Javascript widget! Check out the HTML widget documentation and start creating Medium clap buttons with simple HTML. To have the perfect doppleganger you can choose the Medium template that replicates behavior and animation of the official Medium clap button.
If you use React you can follow the clap button tutorial and, if you want the exact copy, go straight to the Medium template button part.

Either using HTML or React he result will be this. Let's try it out!

Click! →

We created this Medium clap button using this React code

<ClapButton
  namespace="my-blog-post"
  id="medium-clap-button"
  component={ClapButton.templates.Medium}
/>

Or in alternative using this HTML code

<div
  data-lyket-type="clap"
  data-lyket-namespace="blog"
  data-lyket-id="medium-clap-button"
  data-lyket-template="medium"
 />

Engage engage engage!

Medium catches the moment in which a visitor claps to prompt them to sign-up to their platform. Using Lyket does not require your visitors to sing-up to Lyket -we are privacy friendly ;)-, but you can prompt visitors for any action after they clapped! For example to subscribe to your newsletter, or ask to leave a comment..

With Lyket you can implement that with the onPress prop:

<ClapButton
  namespace="my-blog-post"
  id="medium-clap-button"
  onPress={openSubscribeModal}
  component={ClapButton.templates.Medium}
/>

Try to click on the button, it will open a dialog asking you to subscribe!

Click! →

Clap, like and like/dislike!

We added a clap button behavior to the classic buttons list, the like and like/dislike buttons, and added a template to make it look exactly like the actual Medium clap button, but we did the same with other button types.

If you are curious to see how the other buttons behave and look you can check them out: