Navi quickstart
Get a care flow activity rendering in a host app with Navi, using a publishable key and a few lines of setup.
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
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
Install the Navi SDK packages.
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
Render Navi's component where the activity should appear.
5. Run the app
Start the app and open the page. A live activity appears.
Script tag
For apps that aren't React:
1. Generate a publishable key
Same as above.
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
Initialize Navi with the publishable key and point it at the container.
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.
Next steps
Next: Activity model and lifecycle to understand what just rendered.
What is Navi?
An embeddable, production-ready UI layer that renders care flow activities inside an existing product, with branding, validation and events built in.
Activity model and lifecycle
What an activity is in Navi, the types it supports, the states it moves through, and where validation happens.