> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clickvote.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Add likes to your app in 5 minutes

As an example, we will add like component to [Clickvote](https://clickvote.dev) website.

## Install Clickvote client library

As of now, we have client library only for React. More coming soon.

Get started by installing Clickvote React library:

```bash theme={null}
npm i @clickvote/react
```

## Sign up to Clickvote cloud

Create a free Clickvote account (no credit card required).

<a href="https://app.clickvote.dev" target="_blank">
  <img src="https://mintcdn.com/github20k/uoGlDAGtJ3BNKI6h/images/try-clickvote-cloud.svg?fit=max&auto=format&n=uoGlDAGtJ3BNKI6h&q=85&s=3c0188fe3254bd974603a30845af0cf0" alt="Try Clickvote Cloud" width="215" data-path="images/try-clickvote-cloud.svg" />
</a>

## Create a new vote

Go to [votes](https://app.clickvote.dev/votes) page to create a new vote. Click on a `Add Vote` button.

<Frame caption="Add new vote">
  <img src="https://mintcdn.com/github20k/uoGlDAGtJ3BNKI6h/images/clickvote_add_vote_arrow.png?fit=max&auto=format&n=uoGlDAGtJ3BNKI6h&q=85&s=27462bf9f08d93f91205ed6ad1612995" alt="Clickvote Votes Pages" width="1224" height="583" data-path="images/clickvote_add_vote_arrow.png" />
</Frame>

Give some name to your new vote and select a type (single for likes, range for ratings). Click `Save`.

<Frame caption="Save new vote">
  <img src="https://mintcdn.com/github20k/uoGlDAGtJ3BNKI6h/images/clickvote_save_vote.png?fit=max&auto=format&n=uoGlDAGtJ3BNKI6h&q=85&s=7100ef0ae9be24bcad8b924a01da6ea1" alt="Clickvote Save Vote" width="2348" height="948" data-path="images/clickvote_save_vote.png" />
</Frame>

## Integrate Clickvote into a website

After you saved the vote, you should see this page:

<Frame caption="Clickvote snippet page">
  <img src="https://mintcdn.com/github20k/uoGlDAGtJ3BNKI6h/images/clickvote_vote_snippet_page.png?fit=max&auto=format&n=uoGlDAGtJ3BNKI6h&q=85&s=592abeff1cf82f79b35df97e8603c285" alt="Clickvote Snippet Page" width="2824" height="1908" data-path="images/clickvote_vote_snippet_page.png" />
</Frame>

In a top right corner you can select a type of the component you want (likes or upvotes).
Then, you can simply copy and paste provided snippet into your website.

In Clickvote `Vote` actually refers to a group of votes. So for instance, we want to include likes component on every page of Clickvote website.
Obviously, we don't need to create a new vote for each of the pages.

All the components will share the same `id`, but they will have different `voteTo`. Basically, `voteTo` indicates an item inside of vote group.
It can be any string, for example name of the page or URL:

```jsx theme={null}
return (
  <ClickVoteProvider
    value={{
      apiUrl: "socket.clickvote.dev",
      publicKey: "pb_zCKP4ozxpkxXJyIpfmWIpsE8wgH5BAXF",
      userId: visitor,
    }}
  >
    <ClickVoteComponent id="clickvote-likes" voteTo={window.location.href}>
      {(props) => <LikeBtn {...props} />}
    </ClickVoteComponent>
  </ClickVoteProvider>
);
```

Another important attribute is a `userId`. Currently Clickvote requires it to identify user and prevent the same person from doing multiple votes.

After you added this snippet to your website, you should see a live clickable component.

**Yay, you just integrated Clickvote into your website!**

<Frame caption="Live Clickvote component">
  <video autoPlay muted loop playsInline className="w-full aspect-video rounded" src="https://mintcdn.com/github20k/uoGlDAGtJ3BNKI6h/images/clickvote_looping_click.mp4?fit=max&auto=format&n=uoGlDAGtJ3BNKI6h&q=85&s=88c247bf39ce8e5e7db9a5ee16ce1c49" data-path="images/clickvote_looping_click.mp4" />
</Frame>

## Next steps

Check out our guides to learn more about Clickvote:

* [Using with React](/guides/react)
* [Setting up development environment](/development)
