Clap button
How to add a clap button to your website with Lyket
Clap buttons are the perfect solutions for blogs and portfolios because content writers can get a flood of positive reinforcement and visitors can express all their appreciation. Medium uses them for every of their blog post and they became quite succesful and popular.
Lyket is the ultimate tool to add GDPR-compliant clap buttons to any React project, including NextJS, Gatsby, React Native and any other framework that uses React, and to be always updated to what your visitors enjoy the most about your website.
I will give you a few examples on how you can easily integrate Lyket. Feel free to copy and paste the snippets using a test API key, but, remember to register to get your own!
In the first example we create a clap button with id "applause-react" under the "my-blog-post" category. To do that we import the Provider component that configures Lyket and the ClapButton component where we want our button to be. Read more about the Provider component on the docs
import { Provider, ClapButton } from "@lyket/react";
<Provider apiKey="acc0dbccce8e557db5ebbe6d605aaa">
<ClapButton
namespace="my-blog-post"
id="applause-react"
/>
</Provider>
Try it out! It will add as many claps as the number of clicks. There are no limits so your fans can really hit it!
Use the Medium template
You can change the style by choosing one of the templates you can find in the templates section. For clap buttons we have the Medium template, that emulates theMedium clap button. Let's try it out!
<ClapButton
namespace="my-blog-post"
id="applause-react"
component={ClapButton.templates.Medium}
/>You will get a clap button that looks and behaves just like Medium's
Changing colors
Some templates support color changing, for example the default one. You can set your own color palette by configuring the Provider.
background controls the background color of the inactive clap button, the primary attribute will change the background color of a clicked clap button, and the text attribute changes the font color. It supports rgba, hex, and color names.
import { Provider, ClapButton } from "@lyket/react";
<Provider
apiKey="acc0dbccce8e557db5ebbe6d605aaa"
theme={{
colors: {
background: "#b8fff3",
text: "violet",
primary: "rgba(255, 224, 138, 0.4)"
}
}}
>
<ClapButton
namespace="my-blog-post"
id="applause-react"
/>
</Provider>Creating your own button
You may want to customize your clap button to be more consistent with your website, for example with your company logo or an icon from your own icon set.
No problem! Here is an example of using the clapping hands emoji as a clap button.
import { ClapButton } from '@lyket/react';
<ClapButton
namespace="my-blog"
id="applause-now"
>
{({ handlePress, totalClaps, userClaps, isLoading }) => {
return (
<div>
<button
onClick={handlePress}
disabled={isLoading}
>
👏
</button>
<div>Total claps: {totalClaps}</div>
<div>You clapped {userClaps} times!</div>
</div>
)
}}
</ClapButton>Engage your visitors!
Once a visitor liked your content, you know you have their attention, so why not use it as an occasion to engage further with a call to action? Maybe you can ask your visitors to subscribe to your newsletter after they clapped? Nothing easier!
You can use the onPress prop to do something like this:
<ClapButton
namespace="my-blog-post"
id="applause-react"
onPress={openSubscribeModal}
/>Try to click on the button, it will open a dialog asking to subscribe!
Click! →
Now you can just sit back and watch the numbers grow!
Where? On the dashboard, of course!
Once you are registered you can access your private area and see statistics on all the buttons you created. If you are already registered, why don't you take a look now?
For more details about Lyket's React clap button, on how to customize it and style it, you can read our React documentation.
The other button types
Clap button is just one of the three kind of buttons that Lyket offers. Each button has a different behaviour and provides a different kind af feedback. Check out the other two here: