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

# Choose an Orchard SDK integration method for your app

> Compare the four ways to add Orchard investments to your site: a CDN script popup, an npm inline embed, an npm modal embed, or a branded CDN popup.

Orchard offers four ways to add the investment flow to your site. They differ in how you install the SDK (a CDN script tag or an npm package) and how the flow appears to your users (a popup you open from a button, an inline embed, or a modal).

| Method | Install | How it appears | Best for |
| - | - | - | - |
| [CDN Script](/integration/cdn-script) | `<script>` tag | Opens on button click, with callbacks | Static sites and quick setups with no build step |
| [Inline Embed](/integration/npm-inline) | npm | Embedded in your page layout | Apps with a bundler that want the flow as part of a page |
| [Modal Embed](/integration/npm-modal) | npm | Dialog over your page | Apps with a bundler that want the flow on top of existing content |
| [Custom Branding](/integration/custom-branding) | `<script>` tag | Opens on button click, with your name and color | Partners showing the flow under their own brand |

## What every method needs

All four methods use the same credentials:

* **API key**: your Orchard public key (starts with `pk_`), sent in the `X-Orchard-Key` header.
* **API URL**: the Orchard embed API, for example `https://core.orchard.africa/api/v1/embed`.
* **Session token**: created by calling `POST {apiUrl}/session` with your API key. See [Authentication](/authentication).

<CardGroup cols={2}>
  <Card title="CDN Script" icon="code" href="/integration/cdn-script">
    Add one script tag and open the flow from a button.
  </Card>

  <Card title="Inline Embed" icon="table-columns" href="/integration/npm-inline">
    Install from npm and embed the flow in your page.
  </Card>

  <Card title="Modal Embed" icon="window-restore" href="/integration/npm-modal">
    Install from npm and show the flow in a dialog.
  </Card>

  <Card title="Custom Branding" icon="palette" href="/integration/custom-branding">
    Show the flow with your brand name and color.
  </Card>
</CardGroup>


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