# Add it to your web app

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://clu3-1.gitbook.io/clu3/customized-clu3/add-it-to-your-web-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.