> ## 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.

# Embed the Orchard investment flow inline with npm package

> Install @orchard/web-sdk from npm, create a session-authenticated client, and render the Orchard investment flow inline inside your page layout.

The inline embed renders the Orchard investment flow directly inside your page, as part of your layout. You install the `@orchard/web-sdk` package from npm, create an `Orchard` client, and attach it to the `<orchard-investment-flow>` element.

<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">
    The example reads credentials from Vite environment variables. Add them 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">
    Place the flow element where you want it to appear on the page:

    ```javascript theme={null}
    <orchard-investment-flow mode="inline"></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('inline')
    </script>
    ```
  </Step>
</Steps>

## Client options

<ParamField path="apiUrl" type="string" required>
  The Orchard embed API URL.
</ParamField>

<ParamField path="sessionToken" type="string" required>
  The token returned in `data.token` from `POST {apiUrl}/session`.
</ParamField>

<ParamField path="apiKey" type="string" required>
  Your Orchard API key.
</ParamField>

## Flow element methods

| Method | Description |
| - | - |
| `setClient(orchard)` | Connects the flow to your Orchard client. |
| `setMode('inline')` | Renders the flow inside the page layout. |

<Note>
  Want the flow to open over your page instead? Use the [Modal Embed](/integration/npm-modal).
</Note>


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