Like button HTML

HTML widget docs

Lyket can be easily embedded on any website or app by using a simple HTML + Javascript snippet.

Just by adding a few lines of code you will see beautiful like, clap or like/dislike buttons! Something like this:

This is very powerful because it works, not only in a HTML website, but also on any platform or framework that supports custom HTML/Javascript injections, like Wordpress, Webflow, Notion and more!

We have more framework-specific guides for:

How the like buttons work in HTML

First, an introduction on what happens when you add the Javascript snippet and the HTML tag containing the like button's attributes, and how you can get the best out of Lyket. If you prefer to see a few examples on how to integrate our HTML like buttons in your website, simply scroll down.

All Lyket like buttons share these basic behaviors and features:

As soon as your page is loaded, a request is made to retrieve info on the button that identifies with the combination of the "data-lyket-id", "data-lyket-namespace" and "data-lyket-type" that you provided. If no button is found, a new one will be created using that type/namespace/ID identifier.
Every time a user interacts with your button, the button counter will update and Lyket will flag that that user has voted. To do that, Lyket uses a unique random ID associated with the user's browser. This makes possible to recognise a user with no need to signup or to use any third party service. To disable the session ID, and therefore use only the IP address to identify a user, set the disableSessionId prop to true in the Provider component.
Lyket enforces a maximum number of browser sessions IDs per IP address, to avoid receiving too many requests or DDoS attacks. The default is 3 sessions per IP. You can change this number by logging into your private area and edit the user settings.
In the user settings you can also specify from which domains Lyket should accept requests using your personal public API key. If left empty Lyket will accept requests coming from all domains.

How to add like buttons to your HTML site or website builder

Adding Lyket like buttons is really simple, but you have to have a basic knowledge of HTML to do that. In your HTML or your site builder (Wordpress, Webflow or else) add the script you find below in the <footer> or in the <header>, then start creating buttons just by adding a <div> element with a data-lyket-type and data-lyket-id.

If you are using a site builder, look on the documentation for how to add a custom HTML block and use the same HTML code to create a button.

Important: Lyket needs to verify your identity when creating and storing button counters. To do that it requires that you provide in a top-level script an unique alpha-numeric value, the public API key, that you can get by registering to Lyket.

Replace "[YOUR-API-KEY]" in the code with your personal public API key.

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

Optional parameters

You can provide additional parameters to the script:

disableSessionId - If added to the script, Lyket WON'T store a unique browser session ID for your visitors making them anonymous. Lyket will then discriminate visitors (to tell if they already liked a button or not) only based on the IP address. Disabling the session ID can be useful if you don't want Lyket to result in your cookie detection software.
```
<script
  src="https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=[YOUR-API-KEY]&disableSessionId"
></script>
```
recaptchaSiteKey: string - If you enabled reCAPTCHA in the private area's user settings, you will need to insert your reCAPTCHA public key in Lyket script, otherwise your buttons will result as unauthorized. Read more in the reCAPTCHA section at the end of this document.

All Lyket's HTML like buttons

There are four different button types that have their own behaviours and properties. Each one of them can be used indifferent contexts and to achieve different results!

Like button HTML

Like buttons behave like Twitter buttons. Users can only like once, and a subsequent call from the same user will remove the user's like.

Use the data-lyket-type="like" to create a like button.

<!-- minimal settings -->
<div data-lyket-type="like" data-lyket-id="my-first-post"></div>

<!-- with namespace -->
<div
  data-lyket-type="like"
  data-lyket-id="my-second-post"
  data-lyket-namespace="blog"
></div>

<!-- with non-default template -->
<div
  data-lyket-type="like"
  data-lyket-id="my-third-post"
  data-lyket-namespace="blog"
  data-lyket-template="twitter"
 ></div>

Try it! →

Like button HTML Templates

Simple (default) - supports custom theme
Twitter: Twitter style
Chevron: Chevron style - supports custom theme

Like/dislike button HTML

Like/dislike buttons, or Updown buttons, behave like Reddit buttons. Visitors can only like or dislike once and a subsequent call from the same visitor will remove the visitor's vote or unvote.

Use the data-lyket-type="updown" to create a like/dislike button.

<!-- minimal settings -->
<div data-lyket-type="updown" data-lyket-id="my-first-post"></div>

<!-- with namespace -->
<div
  data-lyket-type="updown"
  data-lyket-id="my-second-post"
  data-lyket-namespace="blog"
></div>

<!-- with non-default template -->
<div
  data-lyket-type="updown"
  data-lyket-id="my-third-post"
  data-lyket-namespace="blog"
  data-lyket-template="reddit"
 ></div>

Try it! →

Like/dislike buttons HTML Templates

Simple (default) - supports custom theme
Reddit: Reddit style
Chevron: Chevron style - supports custom theme

Clap button HTML

Clap buttons behave like Medium applauses. Users can like multiple times and every other interaction from the same user will increment the claps number.

Use the data-lyket-type="clap" to create a clap button.

<!-- minimal settings -->
<div data-lyket-type="clap" data-lyket-id="my-first-post"></div>

<!-- with namespace -->
<div
  data-lyket-type="clap"
  data-lyket-id="my-second-post"
  data-lyket-namespace="blog"
></div>

<!-- with non-default template -->
<div
  data-lyket-type="clap"
  data-lyket-id="my-third-post"
  data-lyket-namespace="blog"
  data-lyket-template="medium"
></div>

Try it! →

Clap button HTML Templates

Simple (default) - supports custom theme
Medium: Medium style
Heart: Heart style - supports custom theme

Star rating HTML

Star rating behaves like Tripadvisor ratings. Each user can leave one vote. By clicking again on the same button, the vote will be removed.

Rating components have two interfaces. Given the same button, ie. with same id-namespace combination, you may want to show two types of information: the average rating for that button, and an interface in which the user can click to leave their rating. You can select which interface you want to show, with the attribute data-lyket-show-rating

Use the data-lyket-type="rate" to create a star rating button.

<!-- minimal settings -->
<div data-lyket-type="rating" data-lyket-id="my-first-post" data-lyket-show-rating="user"></div>
<div data-lyket-type="rating" data-lyket-id="my-first-post" data-lyket-show-rating="average"></div>

<!-- with namespace -->
<div
  data-lyket-type="rating"
  data-lyket-id="my-second-post"
  data-lyket-namespace="blog"
  data-lyket-show-rating="user"
></div>
<div
  data-lyket-type="rating"
  data-lyket-id="my-second-post"
  data-lyket-namespace="blog"
  data-lyket-show-rating="average"
></div>

<!-- with non-default template -->
<div
  data-lyket-type="rating"
  data-lyket-id="my-third-post"
  data-lyket-namespace="blog"
	data-lyket-show-rating="user"
  data-lyket-template="custom"
></div>
<div
  data-lyket-type="rating"
  data-lyket-id="my-third-post"
  data-lyket-namespace="blog"
	data-lyket-show-rating="average"
  data-lyket-template="custom"
></div>

Average rating:

Click to rate! →

Star rating HTML Templates

Star (default) - does not support custom theme
Custom: Medium style - supports custom theme
Heart: Heart style - supports custom theme

Styling the buttons

Change colors and font family

You can change the default colors and provide favourite color scheme, just by adding a few attributes to your HTML element. Be aware that color scheme does not apply to every template, so be sure to select your template accordingly!

Attributes to change the template colors:

data-lyket-color-primary - Changes the color of the button, when user has clicked on it.
data-lyket-color-secondary - Changes the color of the downvote button, when user has clicked on it.
data-lyket-color-background - Changes the background color of the inactive button (the user still hasn't clicked on it).
data-lyket-color-text - Changes the counter's text color.
data-lyket-color-icon - Changes the icon's color.
data-lyket-color-highlight - Changes the animation's color.
data-lyket-font-family - Changes the font family.

Here is an example for an Updown button:

<!-- button with color scheme -->
<div
  data-lyket-type="updown"
  data-lyket-id="my-first-post"
  data-lyket-color-primary="#b8fff3"
  data-lyket-color-secondary="rgba(220, 234, 108, 0.6)"
  data-lyket-color-background="rgba(255, 224, 138, 0.4)"
  data-lyket-color-text="black"
  data-lyket-color-icon="violet"
  data-lyket-color-highlight="#ff00c3"
  data-lyket-font-family="monospace"
 />

Change size

You can increase or decrease the size of the button proportionally by changing the CSS font-size property.

To do that simply add a style property in the containing div, with your desired size.

<!-- button with hidden counter -->
<div style="font-size: 12px"
  data-lyket-type="updown"
  data-lyket-id="my-first-post"
 />

Other props

data-lyket-show-counter-from: string - Number of likes required to show the counter.

<!-- button with hidden counter -->
<div
  data-lyket-type="updown"
  data-lyket-id="my-first-post"
  data-lyket-show-counter-from="4"
></div>

Button Templates

Browse our templates gallery to choose your favourite template!

Do you have an idea for the perfect clap or like button? Write to us explaining your idea or make a pull request to our open-source Github repository

reCAPTCHA

Lyket is integrated with Google reCAPTCHA V3 to handle malicious use without interrupting human users. To enable it, you need first to insert your Google reCAPTCHA secret key in the user settings of your private area. Then you need to pass the reCAPTCHA site key in the Javascript script, like this.

<!-- Client-side reCAPTCHA site key -->

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

In this way each time a user interacts with a button an "invisible" reCAPTCHA check will be performed, keeping your website safe.

Be aware that if you only set reCAPTCHA secret key in the user settings while not providing the site key in your script, the buttons won't work.