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

# Show the Orchard investment flow in a modal with npm package

> Install @orchard/web-sdk from npm, create a session-authenticated client, and display the Orchard investment flow in a modal dialog over your page.

The modal embed displays the Orchard investment flow in a dialog on top of your page, so users can invest without leaving the content they are viewing. The setup matches the [Inline Embed](/integration/npm-inline); only the mode changes.

<Steps>
  <Step title="Install the package">
    Install Orchard with npm:

    ```bash theme={null}
    npm install @orchard/web-sdk
    ```
  </Step>

  <Step title="Set your environment variables">
    Add your credentials to your `.env` file:

    ```bash .env theme={null}
    VITE_ORCHARD_API_URL=https://core.orchard.africa/api/v1/embed
    VITE_ORCHARD_API_KEY=pk_XXXXXXX
    ```
  </Step>

  <Step title="Add the flow element">
    Add the flow element with `mode="modal"`:

    ```javascript theme={null}
    <orchard-investment-flow mode="modal"></orchard-investment-flow>
    ```
  </Step>

  <Step title="Create the client and attach it">
    Request a session token, create the client, and pass it to the flow element.

    ```javascript theme={null}
    <script type="module">
      import { Orchard } from '@orchard/web-sdk'

      const apiUrl = import.meta.env.VITE_ORCHARD_API_URL
      const apiKey = import.meta.env.VITE_ORCHARD_API_KEY

      const sessionResponse = await fetch(`${apiUrl}/session`, {
        method: 'POST',
        headers: { 'X-Orchard-Key': apiKey }
      })
      if (!sessionResponse.ok) throw new Error(`Session request failed: ${sessionResponse.status}`)
      const sessionData = await sessionResponse.json()

      const orchard = new Orchard({
        apiUrl: apiUrl,
        sessionToken: sessionData.data.token,
        apiKey: apiKey
      })

      const flow = document.querySelector('orchard-investment-flow')
      flow.setClient(orchard)
      flow.setMode('modal')
    </script>
    ```
  </Step>
</Steps>

## Flow element methods

| Method | Description |
| - | - |
| `setClient(orchard)` | Connects the flow to your Orchard client. |
| `setMode('modal')` | Displays the flow in a dialog over your page. |

<Tip>
  On small screens, the modal expands to fill the screen so the flow stays easy to use on mobile.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.