# React.js Integration



<CardGroup cols="2">
  <Card title="Step 1: Embed Surface Tag" icon="code" href="/guides/embedding/react/embedding">
    Add Surface Tag to your React.js site with custom code components
  </Card>

  <Card title="Step 2: Inline" icon="window" href="/guides/embedding/react/inline">
    Embed Surface Forms directly in your React.js applications
  </Card>

  <Card icon="envelope" title="Step 2: Email Input Field Trigger" href="/guides/embedding/react/input-field">
    Trigger Popup and Slideover via email input field submission
  </Card>

  <Card title="Step 2: Popup" icon="square-up-right" href="/guides/embedding/react/popup">
    Display forms in modal overlays triggered by user interactions
  </Card>

  <Card title="Step 2: Slideover" icon="sidebar" href="/guides/embedding/react/slideover">
    Show forms that slide in from the side of the screen
  </Card>

  <Card title="Step 3: Optimize" icon="gauge-high" href="/guides/embedding/react/optimize">
    Optimize form loading speed and user experience
  </Card>
</CardGroup>