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

# Embed Fillout forms on React

> Increase conversions and intake data by embedding a powerful Fillout form on your React app.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

<CardGroup cols={1}>
  <Card title="React" icon="react" iconType="regular" color="#FFC738" horizontal href="https://www.npmjs.com/package/@fillout/react">
    View the docs and get started here
  </Card>
</CardGroup>

## What is React?

[**React**](https://react.dev/?ref=filloutforms-helparticle) is a JavaScript library for building user interfaces, allowing developers to create interactive and dynamic web applications efficiently. It provides a modular and declarative approach to building UI components, facilitating the development of scalable and maintainable applications.

## How it works

Embedding Fillout forms in a custom-built React app can be a great way to get refined control over how the forms are displayed on your site. You’ll also be able to define custom button designs for embeds like popups and sliders. To start embedding, simply add the `@fillout/react` npm library to your React project, and then select what kind of embed you’d like to use.

For example, embed a popup form using either a standard button or a custom one:

<img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-46.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=a0de6560a9d22623a1ba83be4f8c6635" alt="Screenshot of the Share tab of a form" width="3452" height="1756" data-path="images/sharing-and-embedding/image-46.png" />

## Related article

<CardGroup cols={3}>
  <Card title="Share & embed" icon="arrow-up-right-from-square" iconType="regular" color="#FFC738" href="/help/sharing">
    Share your forms via link, embed, or QR code.
  </Card>
</CardGroup>

<SupportBanner />