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

# Customize Behavior

<Tabs>
  <Tab title="React">
    ## 1. Feedback Mode

    By default the component will be in `Feedback` mode. This will make your component say *"Give feedback"* and have a heart icon.

    ```js theme={null}
    <VeltUserRequestTool/>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=user-feedback" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>

    ## 2. Report Bugs Mode

    To enable `Report Bugs` mode, set the type attribute to `reportBug`. This will make your component say *"Report bugs"* and have a bug icon.

    ```js theme={null}
    <VeltUserRequestTool type="reportBug"/>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=report-bug" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>

    ## 3. Contact Us Mode

    To enable `Contact Us` mode, set the type attribute to 'contactUs\`. This will make your component say *"Contact us"* and have an email icon.

    ```js theme={null}
    <VeltUserRequestTool type="contactUs"/>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=contact-us" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>
  </Tab>

  <Tab title="Other Frameworks">
    ## 1. Feedback Mode

    By default the component will be in `Feedback` mode. This will make your component say *"Give feedback"* and have a heart icon.

    ```js theme={null}
    <velt-user-request-tool></velt-user-request-tool>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=user-feedback" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>

    ## 2. Report Bugs Mode

    To enable `Report Bugs` mode, set the type attribute to `reportBug`. This will make your component say *"Report bugs"* and have a bug icon.

    ```js theme={null}
    <velt-user-request-tool type="reportBug"></velt-user-request-tool>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=report-bug" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>

    ## 3. Contact Us Mode

    To enable `Contact Us` mode, set the type attribute to 'contactUs\`. This will make your component say *"Contact us"* and have an email icon.

    ```js theme={null}
    <velt-user-request-tool type="contactUs"></velt-user-request-tool>
    ```

    <Frame>
      <iframe src="https://landing-page-demo-velt.vercel.app/?feature=user-request&type=contact-us" scrolling="no" frameBorder="0" height="500px" className="w-full" />
    </Frame>
  </Tab>
</Tabs>

<RequestExample>
  ```js React theme={null}
  import { VeltUserRequestTool } from '@veltdev/react';

  function YourComponent() {

    return (
  		<div>
        <VeltUserRequestTool /> {/* Feedback Mode */} 
        <VeltUserRequestTool type="reportBug"/>  {/* Report Bug Mode */} 
        <VeltUserRequestTool type="contactUs"/>  {/* Contact Us Mode */} 
      </div>
    )
  }
  ```

  ```html HTML theme={null}
  <velt-user-request-tool></velt-user-request-tool> <!-- Feedback Mode -->
  <velt-user-request-tool type="reportBug"></velt-user-request-tool> <!-- Report Bug Mode-->
  <velt-user-request-tool type="contactUs"></velt-user-request-tool> <!-- Contact Us Mode-->
  ```
</RequestExample>