# Navi quickstart
URL: https://docs.awellhealth.com/docs/embed-and-host/quickstart

> For the complete documentation index, see [llms.txt](https://docs.awellhealth.com/llms.txt).



By the end of this, a real care flow activity renders inside the host app.

Navi installs through the **React SDK**, or through a **script tag** for anything that isn't React.

## React [#react]

### 1. Generate a publishable key [#1-generate-a-publishable-key]

In the CareOps portal, create a publishable key. It looks like `pk_test-...`.

Publishable keys are safe in client code; never put a secret API key in front-end code.

### 2. Install the packages [#2-install-the-packages]

Install the Navi SDK packages.

### 3. Wrap the app with the provider [#3-wrap-the-app-with-the-provider]

Wrap the application in Navi's provider and pass the publishable key.

### 4. Render the first care flow or activity [#4-render-the-first-care-flow-or-activity]

Render Navi's component where the activity should appear.

### 5. Run the app [#5-run-the-app]

Start the app and open the page. A live activity appears.

## Script tag [#script-tag]

For apps that aren't React:

### 1. Generate a publishable key [#1-generate-a-publishable-key-1]

Same as above.

### 2. Add the script and container [#2-add-the-script-and-container]

Add Navi's script to the page and a container element for it to render into.

### 3. Initialize and render [#3-initialize-and-render]

Initialize Navi with the publishable key and point it at the container.

## Keys are per environment [#keys-are-per-environment]

Use a **test** publishable key against Sandbox during build, and swap to a production key at go-live.
A key from the wrong environment produces a confusing empty screen. See the
[go-live checklist](/docs/design-care-flows/go-live-checklist).

## Next steps [#next-steps]

**Next:** [Activity model and lifecycle](/docs/embed-and-host/activity-model-and-lifecycle) to
understand what just rendered.