> For the complete documentation index, see [llms.txt](https://clu3-1.gitbook.io/clu3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://clu3-1.gitbook.io/clu3/customized-clu3/add-it-to-your-web-app.md).

# Add it to your web app

After you have chosen a human proof service, you need to add the humanity proof service to your web application.

In this tutorial, we will show how to add it to React, but it can be implemented with any kind of library or framework.

First, we need to add the library of hCaptcha to our project, by using the command below:

<pre><code><strong>npm install @hcaptcha/react-hcaptcha
</strong></code></pre>

Once you have installed the react-hcaptcha library, you need to import it on the file that will perform the call to the smart contract

```javascript
import HCaptcha from '@hcaptcha/react-hcaptcha';
```

After we installed the library and imported it in the component, we will add it to our code. Also, we need to import the clu3.js file, this function is the one that will send the information to our clu3 service.

```javascript
// clu3. js file 
const clu3 = async (token, url, address) => {
    
    if (!token) {
        return {
            "type": 'error',
            "message": 'Please complete the captcha'
        };
    }

    const options = {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json;charset=UTF-8",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            'Access-Control-Allow-Headers': "Content-Type, Authorization",
        },
        body: JSON.stringify({
            token,
            senderAddress: address,
        }),

    };
    const myResponse =  fetch(url, options)
    .then((result) => result.json()).then(data =>{
        return data;
    });
 
    return myResponse;
};

export default clu3;
```

```javascript
import clu3 from '../clu3.js';
const [token, setToken] = useState('');
const [args, setArgs] = useState<any[]>([]);
const [error, setError] = useState('');

const captchaRef = useRef<any>(null);

useEffect(() => {
        async function getClu3() {
            let url = config.url.API_URL +  'verify';
            let response = await clu3(token, url, address)
            if (response?.success) {
                setRes(response?.data);
                setArgs([response?.data.timestamp, response?.data.messageSignature])
            } else {
                setError(response.error)
            }
        }

        if (token)
            console.log(`hCaptcha Token: ${token}`);
            getClu3();
    
    }, [token]);

// On the return statement
<Captcha
    sitekey="YOUR_SITE_KEY_FROM_PREVIOUS_STEP"
    onLoad={onLoad}
    onVerify={setToken}
    ref={captchaRef}
    onExpire={() => setToken('')}
/>
```

After you have all set, next we go with the clu3-service