> ## Documentation Index > Fetch the complete documentation index at: https://docs.userplane.io/llms.txt > Use this file to discover all available pages before exploring further. # Astro Integration > Install Userplane in an Astro application using client-side script blocks This guide covers how to install Userplane in an Astro application. ## Adding the script The fastest way to add Userplane is the CDN embed. Add these two tags to the `` of your base layout: ```astro theme={null} --- // src/layouts/Layout.astro --- ``` You can copy the snippet with your workspace ID pre-filled from **Workspace Settings > Domains** in the Userplane dashboard. ## npm SDK Use the npm SDK when you need programmatic control — triggering recordings from a button, attaching user metadata, or reading recording state. ### Installation ```bash npm theme={null} npm install @userplane/sdk ``` ```bash yarn theme={null} yarn add @userplane/sdk ``` ```bash pnpm theme={null} pnpm add @userplane/sdk ``` ```bash bun theme={null} bun add @userplane/sdk ``` ### Initialization Add a ` ``` Set the variable in your `.env` file: ``` PUBLIC_USERPLANE_WORKSPACE_ID=ws_abc123 ``` `import.meta.env.PUBLIC_*` variables are inlined at build time by Vite. Access them inside ` ``` See [Metadata SDK](/developer/metadata-sdk) for the full API. ## SSR Astro's `