diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-node-with-group-multivariate-flag-local-evaluation.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-node-with-group-multivariate-flag-local-evaluation.png
index 9c86ac0b79891..5d5e7f2df7919 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-node-with-group-multivariate-flag-local-evaluation.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-node-with-group-multivariate-flag-local-evaluation.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-overview.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-overview.png
index c05094ac415cf..93b63311a152e 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-overview.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-overview.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-python-with-local-evaluation.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-python-with-local-evaluation.png
index 02d3bff5c2fcb..a132ecc449fb0 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-python-with-local-evaluation.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-python-with-local-evaluation.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-react-native-with-bootstrap.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-react-native-with-bootstrap.png
index 05bd83d8af7f0..7ef3045bcea27 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-react-native-with-bootstrap.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-react-native-with-bootstrap.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-ruby-with-group-flag-local-evaluation.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-ruby-with-group-flag-local-evaluation.png
index 2e20a5fab9eaf..c50a2b618be4e 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-ruby-with-group-flag-local-evaluation.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructions-ruby-with-group-flag-local-evaluation.png differ
diff --git a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructionsi-os-with-multivariate-flag.png b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructionsi-os-with-multivariate-flag.png
index f1408645d5743..6bab8977291f3 100644
Binary files a/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructionsi-os-with-multivariate-flag.png and b/frontend/__snapshots__/scenes-app-feature-flags-code-examples--code-instructionsi-os-with-multivariate-flag.png differ
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagCodeInstructions.stories.tsx b/frontend/src/scenes/feature-flags/FeatureFlagCodeInstructions.stories.tsx
index 5ac711aabde81..48605e78b7123 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagCodeInstructions.stories.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagCodeInstructions.stories.tsx
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react'
 
 import { CodeInstructions, CodeInstructionsProps } from './FeatureFlagInstructions'
 import { OPTIONS } from './FeatureFlagCodeOptions'
-import { FeatureFlagType } from '~/types'
+import { FeatureFlagType, SDKKey } from '~/types'
 import { useStorybookMocks } from '~/mocks/browser'
 import { useAvailableFeatures } from '~/mocks/features'
 import { AvailableFeature } from '~/types'
@@ -79,7 +79,7 @@ const meta: Meta<typeof CodeInstructions> = {
     component: CodeInstructions,
     args: {
         options: OPTIONS,
-        selectedLanguage: 'JavaScript',
+        selectedLanguage: SDKKey.JS_WEB,
         featureFlag: REGULAR_FEATURE_FLAG,
         showLocalEval: false,
         showBootstrap: false,
@@ -99,11 +99,11 @@ export const CodeInstructionsOverview = (props: CodeInstructionsProps): JSX.Elem
 }
 
 export const CodeInstructionsReactNativeWithBootstrap = (): JSX.Element => {
-    return <CodeInstructions selectedLanguage="React Native" options={OPTIONS} showBootstrap={true} />
+    return <CodeInstructions selectedLanguage={SDKKey.REACT_NATIVE} options={OPTIONS} showBootstrap={true} />
 }
 
 export const CodeInstructionsPythonWithLocalEvaluation = (): JSX.Element => {
-    return <CodeInstructions selectedLanguage="Python" options={OPTIONS} showLocalEval={true} />
+    return <CodeInstructions selectedLanguage={SDKKey.PYTHON} options={OPTIONS} showLocalEval={true} />
 }
 
 export const CodeInstructionsRubyWithGroupFlagLocalEvaluation = (): JSX.Element => {
@@ -119,7 +119,7 @@ export const CodeInstructionsRubyWithGroupFlagLocalEvaluation = (): JSX.Element
     })
     return (
         <CodeInstructions
-            selectedLanguage="Ruby"
+            selectedLanguage={SDKKey.RUBY}
             options={OPTIONS}
             showLocalEval={true}
             featureFlag={GROUP_FEATURE_FLAG}
@@ -128,7 +128,7 @@ export const CodeInstructionsRubyWithGroupFlagLocalEvaluation = (): JSX.Element
 }
 
 export const CodeInstructionsiOSWithMultivariateFlag = (): JSX.Element => {
-    return <CodeInstructions selectedLanguage="iOS" options={OPTIONS} featureFlag={MULTIVARIATE_FEATURE_FLAG} />
+    return <CodeInstructions selectedLanguage={SDKKey.IOS} options={OPTIONS} featureFlag={MULTIVARIATE_FEATURE_FLAG} />
 }
 
 export const CodeInstructionsNodeWithGroupMultivariateFlagLocalEvaluation = (): JSX.Element => {
@@ -144,7 +144,7 @@ export const CodeInstructionsNodeWithGroupMultivariateFlagLocalEvaluation = ():
     })
     return (
         <CodeInstructions
-            selectedLanguage="Node.js"
+            selectedLanguage={SDKKey.NODE_JS}
             options={OPTIONS}
             showLocalEval={true}
             featureFlag={MULTIVARIATE_GROUP_WITH_PAYLOADS_FEATURE_FLAG}
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx
index f3a307adbb24f..8615f736a925e 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx
@@ -1,3 +1,4 @@
+import { SDKKey } from '~/types'
 import {
     UTM_TAGS,
     FeatureFlagSnippet,
@@ -26,6 +27,7 @@ export interface InstructionOption {
     documentationLink: string
     Snippet: ({ flagKey, multivariant, groupType }: FeatureFlagSnippet) => JSX.Element
     type: LibraryType
+    key: SDKKey
 }
 
 export enum LibraryType {
@@ -39,72 +41,83 @@ export const OPTIONS: InstructionOption[] = [
         documentationLink: `${DOC_BASE_URL}integrations/js-integration${UTM_TAGS}`,
         Snippet: JSSnippet,
         type: LibraryType.Client,
+        key: SDKKey.JS_WEB,
     },
     {
         value: 'Android',
         documentationLink: `${DOC_BASE_URL}integrate/client/android${UTM_TAGS}`,
         Snippet: AndroidSnippet,
         type: LibraryType.Client,
+        key: SDKKey.ANDROID,
     },
     {
         value: 'iOS',
         documentationLink: `${DOC_BASE_URL}integrate/client/ios${UTM_TAGS}`,
         Snippet: iOSSnippet,
         type: LibraryType.Client,
+        key: SDKKey.IOS,
     },
     {
         value: 'React Native',
         documentationLink: `${DOC_BASE_URL}integrate/client/react-native${UTM_TAGS}`,
         Snippet: ReactNativeSnippet,
         type: LibraryType.Client,
+        key: SDKKey.REACT_NATIVE,
     },
     {
         value: 'React',
         documentationLink: `${DOC_BASE_URL}libraries/react${UTM_TAGS}`,
         Snippet: ReactSnippet,
         type: LibraryType.Client,
+        key: SDKKey.REACT,
     },
     {
         value: 'Node.js',
         documentationLink: `${DOC_BASE_URL}integrations/node-integration${UTM_TAGS}`,
         Snippet: NodeJSSnippet,
         type: LibraryType.Server,
+        key: SDKKey.NODE_JS,
     },
     {
         value: 'Python',
         documentationLink: `${DOC_BASE_URL}integrations/python-integration${UTM_TAGS}`,
         Snippet: PythonSnippet,
         type: LibraryType.Server,
+        key: SDKKey.PYTHON,
     },
     {
         value: 'Ruby',
         documentationLink: `${DOC_BASE_URL}integrations/ruby-integration${UTM_TAGS}`,
         Snippet: RubySnippet,
         type: LibraryType.Server,
+        key: SDKKey.RUBY,
     },
     {
         value: 'API',
         documentationLink: `${DOC_BASE_URL}api/post-only-endpoints#example-request--response-decide-v3`,
         Snippet: APISnippet,
         type: LibraryType.Server,
+        key: SDKKey.API,
     },
     {
         value: 'PHP',
         documentationLink: `${DOC_BASE_URL}integrations/php-integration${UTM_TAGS}`,
         Snippet: PHPSnippet,
         type: LibraryType.Server,
+        key: SDKKey.PHP,
     },
     {
         value: 'Go',
         documentationLink: `${DOC_BASE_URL}integrations/go-integration${UTM_TAGS}`,
         Snippet: GolangSnippet,
         type: LibraryType.Server,
+        key: SDKKey.GO,
     },
 ]
 
-export const LOCAL_EVALUATION_LIBRARIES: string[] = ['Node.js', 'Python', 'Ruby', 'PHP', 'Go']
+export const LOCAL_EVALUATION_LIBRARIES: string[] = [SDKKey.NODE_JS, SDKKey.PYTHON, SDKKey.RUBY, SDKKey.PHP, SDKKey.GO]
 
-export const PAYLOAD_LIBRARIES: string[] = ['JavaScript', 'Node.js', 'Python', 'Ruby', 'React']
+export const PAYLOAD_LIBRARIES: string[] = [SDKKey.JS_WEB, SDKKey.NODE_JS, SDKKey.PYTHON, SDKKey.RUBY, SDKKey.REACT]
 
 export const BOOTSTRAPPING_OPTIONS: InstructionOption[] = [
     {
@@ -112,11 +125,13 @@ export const BOOTSTRAPPING_OPTIONS: InstructionOption[] = [
         documentationLink: `${DOC_BASE_URL}integrations/js-integration${UTM_TAGS}${BOOTSTRAPPING_ANCHOR}`,
         Snippet: JSBootstrappingSnippet,
         type: LibraryType.Client,
+        key: SDKKey.JS_WEB,
     },
     {
         value: 'React Native',
         documentationLink: `${DOC_BASE_URL}integrate/client/react-native${UTM_TAGS}${BOOTSTRAPPING_ANCHOR}`,
         Snippet: JSBootstrappingSnippet,
         type: LibraryType.Client,
+        key: SDKKey.REACT_NATIVE,
     },
 ]
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagInstructions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagInstructions.tsx
index fa8e8334f5a7d..2c32d7f615bf3 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagInstructions.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagInstructions.tsx
@@ -38,6 +38,8 @@ export interface CodeInstructionsProps {
     dataAttr?: string
     showLocalEval?: boolean
     showBootstrap?: boolean
+    showAdvancedOptions?: boolean
+    showFooter?: boolean
 }
 
 export function CodeInstructions({
@@ -47,6 +49,8 @@ export function CodeInstructions({
     dataAttr = '',
     showLocalEval = false,
     showBootstrap = false,
+    showAdvancedOptions = true,
+    showFooter = true,
 }: CodeInstructionsProps): JSX.Element {
     const [defaultSelectedOption] = options
     const [selectedOption, setSelectedOption] = useState(defaultSelectedOption)
@@ -84,7 +88,7 @@ export function CodeInstructions({
     }
 
     const selectOption = (selectedValue: string): void => {
-        const option = options.find((option) => option.value === selectedValue)
+        const option = options.find((option) => option.key === selectedValue)
 
         if (option) {
             setSelectedOption(option)
@@ -101,7 +105,7 @@ export function CodeInstructions({
             setShowLocalEvalCode(false)
         }
 
-        const bootstrapOption = BOOTSTRAPPING_OPTIONS.find((bootstrapOption) => bootstrapOption.value === selectedValue)
+        const bootstrapOption = BOOTSTRAPPING_OPTIONS.find((bootstrapOption) => bootstrapOption.key === selectedValue)
         if (bootstrapOption) {
             setBootstrapOption(bootstrapOption)
         } else {
@@ -113,7 +117,7 @@ export function CodeInstructions({
             selectOption(selectedLanguage)
         } else {
             // When flag definition changes, de-select any options that can't be selected anymore
-            selectOption(selectedOption.value)
+            selectOption(selectedOption.key)
         }
 
         if (
@@ -144,105 +148,107 @@ export function CodeInstructions({
 
     return (
         <div>
-            <div className="flex items-center gap-6">
-                <div>
-                    <LemonSelect
-                        data-attr={'feature-flag-instructions-select' + (dataAttr ? `-${dataAttr}` : '')}
-                        options={[
-                            {
-                                title: 'Client libraries',
-                                options: OPTIONS.filter((option) => option.type == LibraryType.Client).map(
-                                    (option) => ({
-                                        value: option.value,
-                                        label: option.value,
-                                        'data-attr': `feature-flag-instructions-select-option-${option.value}`,
-                                    })
-                                ),
-                            },
-                            {
-                                title: 'Server libraries',
-                                options: OPTIONS.filter((option) => option.type == LibraryType.Server).map(
-                                    (option) => ({
-                                        value: option.value,
-                                        label: option.value,
-                                        'data-attr': `feature-flag-instructions-select-option-${option.value}`,
-                                    })
-                                ),
-                            },
-                        ]}
-                        onChange={(val) => {
-                            if (val) {
-                                selectOption(val)
-                                reportFlagsCodeExampleLanguage(val)
-                            }
-                        }}
-                        value={selectedOption.value}
-                    />
-                </div>
-                <Tooltip
-                    title={`Feature flag payloads are only available in these libraries: ${PAYLOAD_LIBRARIES.map(
-                        (payloadOption) => ` ${payloadOption}`
-                    )}`}
-                >
-                    <div className="flex items-center gap-1">
-                        <LemonCheckbox
-                            label="Show payload option"
-                            onChange={() => {
-                                setShowPayloadCode(!showPayloadCode)
-                                reportFlagsCodeExampleInteraction('payloads')
+            {showAdvancedOptions && (
+                <div className="flex items-center gap-6">
+                    <div>
+                        <LemonSelect
+                            data-attr={'feature-flag-instructions-select' + (dataAttr ? `-${dataAttr}` : '')}
+                            options={[
+                                {
+                                    title: 'Client libraries',
+                                    options: OPTIONS.filter((option) => option.type == LibraryType.Client).map(
+                                        (option) => ({
+                                            value: option.key,
+                                            label: option.value,
+                                            'data-attr': `feature-flag-instructions-select-option-${option.key}`,
+                                        })
+                                    ),
+                                },
+                                {
+                                    title: 'Server libraries',
+                                    options: OPTIONS.filter((option) => option.type == LibraryType.Server).map(
+                                        (option) => ({
+                                            value: option.key,
+                                            label: option.value,
+                                            'data-attr': `feature-flag-instructions-select-option-${option.key}`,
+                                        })
+                                    ),
+                                },
+                            ]}
+                            onChange={(val) => {
+                                if (val) {
+                                    selectOption(val)
+                                    reportFlagsCodeExampleLanguage(val)
+                                }
                             }}
-                            data-attr="flags-code-example-payloads-option"
-                            checked={showPayloadCode}
-                            disabled={!PAYLOAD_LIBRARIES.includes(selectedOption.value)}
+                            value={selectedOption.key}
                         />
-                        <IconInfo className="text-xl text-muted-alt shrink-0" />
                     </div>
-                </Tooltip>
-                <>
                     <Tooltip
-                        title="Bootstrapping is only available client side in our JavaScript and React Native
-                                libraries."
+                        title={`Feature flag payloads are only available in these libraries: ${PAYLOAD_LIBRARIES.map(
+                            (payloadOption) => ` ${payloadOption}`
+                        )}`}
                     >
                         <div className="flex items-center gap-1">
                             <LemonCheckbox
-                                label="Show bootstrap option"
-                                data-attr="flags-code-example-bootstrap-option"
-                                checked={showBootstrapCode}
+                                label="Show payload option"
                                 onChange={() => {
-                                    setShowBootstrapCode(!showBootstrapCode)
-                                    reportFlagsCodeExampleInteraction('bootstrap')
+                                    setShowPayloadCode(!showPayloadCode)
+                                    reportFlagsCodeExampleInteraction('payloads')
                                 }}
-                                disabled={
-                                    !BOOTSTRAPPING_OPTIONS.map((bo) => bo.value).includes(selectedOption.value) ||
-                                    !!featureFlag?.ensure_experience_continuity
-                                }
+                                data-attr="flags-code-example-payloads-option"
+                                checked={showPayloadCode}
+                                disabled={!PAYLOAD_LIBRARIES.includes(selectedOption.key)}
                             />
                             <IconInfo className="text-xl text-muted-alt shrink-0" />
                         </div>
                     </Tooltip>
-                    <Tooltip
-                        title="Local evaluation is only available in server side libraries and without flag
+                    <>
+                        <Tooltip
+                            title="Bootstrapping is only available client side in our JavaScript and React Native
+                                libraries."
+                        >
+                            <div className="flex items-center gap-1">
+                                <LemonCheckbox
+                                    label="Show bootstrap option"
+                                    data-attr="flags-code-example-bootstrap-option"
+                                    checked={showBootstrapCode}
+                                    onChange={() => {
+                                        setShowBootstrapCode(!showBootstrapCode)
+                                        reportFlagsCodeExampleInteraction('bootstrap')
+                                    }}
+                                    disabled={
+                                        !BOOTSTRAPPING_OPTIONS.map((bo) => bo.key).includes(selectedOption.key) ||
+                                        !!featureFlag?.ensure_experience_continuity
+                                    }
+                                />
+                                <IconInfo className="text-xl text-muted-alt shrink-0" />
+                            </div>
+                        </Tooltip>
+                        <Tooltip
+                            title="Local evaluation is only available in server side libraries and without flag
                                 persistence."
-                    >
-                        <div className="flex items-center gap-1">
-                            <LemonCheckbox
-                                label="Show local evaluation option"
-                                data-attr="flags-code-example-local-eval-option"
-                                checked={showLocalEvalCode}
-                                onChange={() => {
-                                    setShowLocalEvalCode(!showLocalEvalCode)
-                                    reportFlagsCodeExampleInteraction('local evaluation')
-                                }}
-                                disabled={
-                                    !LOCAL_EVALUATION_LIBRARIES.includes(selectedOption.value) ||
-                                    !!featureFlag?.ensure_experience_continuity
-                                }
-                            />
-                            <IconInfo className="text-xl text-muted-alt shrink-0" />
-                        </div>
-                    </Tooltip>
-                </>
-            </div>
+                        >
+                            <div className="flex items-center gap-1">
+                                <LemonCheckbox
+                                    label="Show local evaluation option"
+                                    data-attr="flags-code-example-local-eval-option"
+                                    checked={showLocalEvalCode}
+                                    onChange={() => {
+                                        setShowLocalEvalCode(!showLocalEvalCode)
+                                        reportFlagsCodeExampleInteraction('local evaluation')
+                                    }}
+                                    disabled={
+                                        !LOCAL_EVALUATION_LIBRARIES.includes(selectedOption.key) ||
+                                        !!featureFlag?.ensure_experience_continuity
+                                    }
+                                />
+                                <IconInfo className="text-xl text-muted-alt shrink-0" />
+                            </div>
+                        </Tooltip>
+                    </>
+                </div>
+            )}
             <div className="mt-4 mb">
                 {showLocalEvalCode && (
                     <>
@@ -277,7 +283,7 @@ export function CodeInstructions({
                         <bootstrapOption.Snippet flagKey={featureFlagKey} />
                     </>
                 )}
-                <FeatureFlagInstructionsFooter documentationLink={getDocumentationLink()} />
+                {showFooter && <FeatureFlagInstructionsFooter documentationLink={getDocumentationLink()} />}
             </div>
             <div />
         </div>
diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
index 3cf1c4989e4c1..c3520d90bea01 100644
--- a/frontend/src/scenes/onboarding/Onboarding.tsx
+++ b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -96,7 +96,11 @@ const SessionReplayOnboarding = (): JSX.Element => {
 const FeatureFlagsOnboarding = (): JSX.Element => {
     return (
         <OnboardingWrapper>
-            <SDKs usersAction="loading flags" sdkInstructionMap={FeatureFlagsSDKInstructions} />
+            <SDKs
+                usersAction="loading flags"
+                sdkInstructionMap={FeatureFlagsSDKInstructions}
+                subtitle="Choose the framework where you want to use feature flags, or use our all-purpose JavaScript library. If you already have the snippet installed, you can skip this step!"
+            />
         </OnboardingWrapper>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
index 6374992792b3e..729a335fa3004 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
@@ -1,8 +1,31 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
-import { JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
+import {
+    FeatureFlagsJSWebInstructions,
+    FeatureFlagsNextJSInstructions,
+    FeatureFlagsAPIInstructions,
+    FeatureFlagsAndroidInstructions,
+    FeatureFlagsGoInstructions,
+    FeatureFlagsIOSInstructions,
+    FeatureFlagsNodeInstructions,
+    FeatureFlagsPHPInstructions,
+    FeatureFlagsPythonInstructions,
+    FeatureFlagsRNInstructions,
+    FeatureFlagsRubyInstructions,
+    FeatureFlagsReactInstructions,
+} from '.'
 
 export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
-    [SDKKey.JS_WEB]: JSWebInstructions,
-    [SDKKey.NEXT_JS]: NextJSInstructions,
-    [SDKKey.REACT]: ReactInstructions,
+    [SDKKey.JS_WEB]: FeatureFlagsJSWebInstructions,
+    [SDKKey.REACT]: FeatureFlagsReactInstructions,
+    [SDKKey.NEXT_JS]: FeatureFlagsNextJSInstructions,
+    [SDKKey.IOS]: FeatureFlagsIOSInstructions,
+    [SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
+    [SDKKey.ANDROID]: FeatureFlagsAndroidInstructions,
+    [SDKKey.NODE_JS]: FeatureFlagsNodeInstructions,
+    [SDKKey.PYTHON]: FeatureFlagsPythonInstructions,
+    [SDKKey.RUBY]: FeatureFlagsRubyInstructions,
+    [SDKKey.PHP]: FeatureFlagsPHPInstructions,
+    [SDKKey.GO]: FeatureFlagsGoInstructions,
+    [SDKKey.API]: FeatureFlagsAPIInstructions,
+    // add flutter, rust, gatsby, nuxt, vue, svelte, and others here
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/android.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/android.tsx
new file mode 100644
index 0000000000000..0c9a64d274a8d
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/android.tsx
@@ -0,0 +1,12 @@
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallAndroidInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsAndroidInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallAndroidInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.ANDROID} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/api.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/api.tsx
new file mode 100644
index 0000000000000..5402e66f53b48
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/api.tsx
@@ -0,0 +1,10 @@
+import { SDKKey } from '~/types'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsAPIInstructions(): JSX.Element {
+    return (
+        <>
+            <FlagImplementationSnippet sdkKey={SDKKey.API} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/flagImplementationSnippet.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/flagImplementationSnippet.tsx
new file mode 100644
index 0000000000000..ded0cf3f69bc4
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/flagImplementationSnippet.tsx
@@ -0,0 +1,17 @@
+import { OPTIONS } from 'scenes/feature-flags/FeatureFlagCodeOptions'
+import { CodeInstructions } from 'scenes/feature-flags/FeatureFlagInstructions'
+import { SDKKey } from '~/types'
+
+export const FlagImplementationSnippet = ({ sdkKey }: { sdkKey: SDKKey }): JSX.Element => {
+    return (
+        <>
+            <h3>Basic implementation</h3>
+            <CodeInstructions
+                options={OPTIONS}
+                selectedLanguage={sdkKey}
+                showAdvancedOptions={false}
+                showFooter={false}
+            />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/go.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/go.tsx
new file mode 100644
index 0000000000000..cdb750a2396f8
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/go.tsx
@@ -0,0 +1,12 @@
+import { SDKKey } from '~/types'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKInstallGoInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsGoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallGoInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.GO} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
index 27d9e5388d04d..11e1743082019 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
@@ -1,3 +1,12 @@
+export * from './android'
+export * from './go'
+export * from './nodejs'
+export * from './ios'
+export * from './php'
+export * from './python'
+export * from './react-native'
+export * from './ruby'
+export * from './api'
 export * from './js-web'
-export * from './next-js'
 export * from './react'
+export * from './next-js'
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/ios.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/ios.tsx
new file mode 100644
index 0000000000000..250c98fd4d3fd
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/ios.tsx
@@ -0,0 +1,12 @@
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallIOSInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsIOSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallIOSInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.IOS} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/js-web.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/js-web.tsx
index 8ef2865c3b834..78a2fa373faa6 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/js-web.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/js-web.tsx
@@ -1,42 +1,14 @@
-import { JSSnippet } from 'lib/components/JSSnippet'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallJSWebInstructions } from '../sdk-install-instructions'
 
-function JSSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {[
-                "import posthog from 'posthog-js'",
-                '',
-                `posthog.init('${currentTeam?.api_token}', { api_host: '${window.location.origin}' })`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-export function JSWebInstructions(): JSX.Element {
+export function FeatureFlagsJSWebInstructions(): JSX.Element {
     return (
         <>
-            <h3>Option 1. Code snippet</h3>
-            <p>
-                Just add this snippet to your website within the <code>&lt;head&gt;</code> tag and we'll automatically
-                capture page views, sessions and all relevant interactions within your website.
-            </p>
-            <JSSnippet />
-            <LemonDivider thick dashed className="my-4" />
-            <h3>Option 2. Javascript Library</h3>
-            <h4>Install the package</h4>
-            <JSInstallSnippet />
-            <h4>Initialize</h4>
-            <JSSetupSnippet />
+            <SDKInstallJSWebInstructions />
             <LemonDivider thick dashed className="my-4" />
-            <h3>Final steps</h3>
-            <SessionReplayFinalSteps />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/next-js.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/next-js.tsx
index cda978ee12166..7b1b37f16b2a1 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/next-js.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/next-js.tsx
@@ -1,98 +1,20 @@
-import { Link } from 'lib/lemon-ui/Link'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
+import { SDKKey } from '~/types'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js'
+import { NodeInstallSnippet, NodeSetupSnippet } from '../sdk-install-instructions'
 
-function NextEnvVarsSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {[
-                `NEXT_PUBLIC_POSTHOG_KEY=${currentTeam?.api_token}`,
-                `NEXT_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-function NextPagesRouterCodeSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// pages/_app.js
-...
-import posthog from 'posthog-js' // Import PostHog
-
-if (typeof window !== 'undefined') { // checks that we are client-side
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
-    loaded: (posthog) => {
-      if (process.env.NODE_ENV === 'development') posthog.debug() // debug mode in development
-    },
-  })
-}
-
-export default function App({ Component, pageProps }) {
-  const router = useRouter()
-  ...`}
-        </CodeSnippet>
-    )
-}
-
-function NextAppRouterCodeSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// app/providers.js
-'use client'
-...
-import posthog from 'posthog-js'
-
-if (typeof window !== 'undefined') {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-  })
-}
-...`}
-        </CodeSnippet>
-    )
-}
-
-export function NextJSInstructions(): JSX.Element {
+export function FeatureFlagsNextJSInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install posthog-js using your package manager</h3>
-            <JSInstallSnippet />
-            <h3>Add environment variables</h3>
-            <p>
-                Add your environment variables to your .env.local file and to your hosting provider (e.g. Vercel,
-                Netlify, AWS). You can find your project API key in your project settings.
-            </p>
-            <p className="italic">
-                These values need to start with <code className="not-italic">NEXT_PUBLIC_</code> to be accessible on the
-                client-side.
-            </p>
-            <NextEnvVarsSnippet />
-
-            <h3>Initialize</h3>
-            <h4>With App router</h4>
-            <p>
-                If your Next.js app to uses the <Link to="https://nextjs.org/docs/app">app router</Link>, you can
-                integrate PostHog by creating a providers file in your app folder. This is because the posthog-js
-                library needs to be initialized on the client-side using the Next.js{' '}
-                <Link to="https://nextjs.org/docs/getting-started/react-essentials#client-components" target="_blank">
-                    <code>'use client'</code> directive
-                </Link>
-                .
-            </p>
-            <NextAppRouterCodeSnippet />
-            <h4>With Pages router</h4>
-            <p>
-                If your Next.js app uses the <Link to={'https://nextjs.org/docs/pages'}>pages router</Link>, you can
-                integrate PostHog at the root of your app (pages/_app.js).
-            </p>
-            <NextPagesRouterCodeSnippet />
-            <SessionReplayFinalSteps />
+            <SDKInstallNextJSInstructions />
+            <h3>Client-side rendering</h3>
+            <FlagImplementationSnippet sdkKey={SDKKey.REACT} />
+            <h3>Server-side rendering</h3>
+            <h4>Install</h4>
+            <NodeInstallSnippet />
+            <h4>Configure</h4>
+            <NodeSetupSnippet />
+            <FlagImplementationSnippet sdkKey={SDKKey.NODE_JS} />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/nodejs.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/nodejs.tsx
new file mode 100644
index 0000000000000..576e6cd9091d2
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/nodejs.tsx
@@ -0,0 +1,12 @@
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallNodeInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsNodeInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNodeInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.NODE_JS} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/php.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/php.tsx
new file mode 100644
index 0000000000000..68a97ef96d9c4
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/php.tsx
@@ -0,0 +1,12 @@
+import { SDKKey } from '~/types'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKInstallPHPInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsPHPInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallPHPInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.PHP} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/python.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/python.tsx
new file mode 100644
index 0000000000000..55962b40f52ee
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/python.tsx
@@ -0,0 +1,12 @@
+import { SDKKey } from '~/types'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKInstallPythonInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsPythonInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallPythonInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.PYTHON} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/react-native.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/react-native.tsx
new file mode 100644
index 0000000000000..f045c817abcb8
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/react-native.tsx
@@ -0,0 +1,12 @@
+import { SDKInstallRNInstructions } from '../sdk-install-instructions'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+
+export function FeatureFlagsRNInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallRNInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.REACT_NATIVE} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/react.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/react.tsx
index 86fdfc0f527c7..35ff77019b763 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/react.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/react.tsx
@@ -1,64 +1,12 @@
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallReactInstructions } from '../sdk-install-instructions/react'
 
-function ReactEnvVarsSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {[
-                `REACT_APP_POSTHOG_PUBLIC_KEY=${currentTeam?.api_token}`,
-                `REACT_APP_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-function ReactSetupSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// src/index.js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-import { PostHogProvider} from 'posthog-js/react'
-
-const options = {
-  api_host: process.env.REACT_APP_PUBLIC_POSTHOG_HOST,
-}
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <PostHogProvider 
-      apiKey={process.env.REACT_APP_PUBLIC_POSTHOG_KEY}
-      options={options}
-    >
-      <App />
-    </PostHogProvider>
-  </React.StrictMode>
-);`}
-        </CodeSnippet>
-    )
-}
-
-export function ReactInstructions(): JSX.Element {
+export function FeatureFlagsReactInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install the package</h3>
-            <JSInstallSnippet />
-            <h3>Add environment variables</h3>
-            <ReactEnvVarsSnippet />
-            <h3>Initialize</h3>
-            <p>
-                Integrate PostHog at the root of your app (<code>src/index.js</code> for the default{' '}
-                <code>create-react-app</code>).
-            </p>
-            <ReactSetupSnippet />
-            <SessionReplayFinalSteps />
+            <SDKInstallReactInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.REACT} />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/ruby.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/ruby.tsx
new file mode 100644
index 0000000000000..388d934ede926
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/ruby.tsx
@@ -0,0 +1,12 @@
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+import { SDKKey } from '~/types'
+import { SDKInstallRubyInstructions } from '../sdk-install-instructions'
+
+export function FeatureFlagsRubyInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallRubyInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.RUBY} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/android.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/android.tsx
index 9b69ee13ab740..71435dd4fdee1 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/android.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/android.tsx
@@ -1,43 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function AndroidInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Java}>
-            {`dependencies {
-    implementation 'com.posthog.android:posthog:1.+'
-}`}
-        </CodeSnippet>
-    )
-}
-
-function AndroidSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Java}>
-            {`public class SampleApp extends Application {
-    private static final String POSTHOG_API_KEY = "${currentTeam?.api_token}";
-    private static final String POSTHOG_HOST = "${window.location.origin}";
-
-    @Override
-    public void onCreate() {
-        // Create a PostHog client with the given context, API key and host
-        PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
-            .captureApplicationLifecycleEvents() // Record certain application events automatically!
-            .recordScreenViews() // Record screen views automatically!
-            .build();
-
-        // Set the initialized instance as a globally accessible instance
-        PostHog.setSingletonInstance(posthog);
-
-        // Now any time you call PostHog.with, the custom instance will be returned
-        PostHog posthog = PostHog.with(this);
-    }`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallAndroidInstructions } from '../sdk-install-instructions'
 
 function AndroidCaptureSnippet(): JSX.Element {
     return <CodeSnippet language={Language.Java}>PostHog.with(this).capture("test-event");</CodeSnippet>
@@ -46,10 +8,7 @@ function AndroidCaptureSnippet(): JSX.Element {
 export function ProductAnalyticsAndroidInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <AndroidInstallSnippet />
-            <h3>Configure</h3>
-            <AndroidSetupSnippet />
+            <SDKInstallAndroidInstructions />
             <h3>Send an Event</h3>
             <AndroidCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/elixir.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/elixir.tsx
index 9878919b282cc..04c9f0d60c71b 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/elixir.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/elixir.tsx
@@ -1,33 +1,9 @@
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function ElixirInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Elixir}>
-            {'def deps do\n    [\n        {:posthog, "~> 0.1"}\n    ]\nend'}
-        </CodeSnippet>
-    )
-}
-
-function ElixirSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-    const url = window.location.origin
-
-    return (
-        <CodeSnippet language={Language.Elixir}>
-            {'config :posthog,\n    api_url: "' + url + '",\n    api_key: "' + currentTeam?.api_token + '"'}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallElixirInstructions } from '../sdk-install-instructions'
 
 export function ProductAnalyticsElixirInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <ElixirInstallSnippet />
-            <h3>Configure</h3>
-            <ElixirSetupSnippet />
+            <SDKInstallElixirInstructions />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/flutter.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/flutter.tsx
index 06c31e0b2ca83..01c793bfc8d74 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/flutter.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/flutter.tsx
@@ -1,10 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function FlutterInstallSnippet(): JSX.Element {
-    return <CodeSnippet language={Language.YAML}>{'posthog_flutter: # insert version number'}</CodeSnippet>
-}
+import { SDKInstallFlutterInstructions } from '../sdk-install-instructions'
 
 function FlutterCaptureSnippet(): JSX.Element {
     return (
@@ -16,47 +11,10 @@ function FlutterCaptureSnippet(): JSX.Element {
     )
 }
 
-function FlutterAndroidSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-    const url = window.location.origin
-
-    return (
-        <CodeSnippet language={Language.XML}>
-            {'<application>\n\t<activity>\n\t\t[...]\n\t</activity>\n\t<meta-data android:name="com.posthog.posthog.API_KEY" android:value="' +
-                currentTeam?.api_token +
-                '" />\n\t<meta-data android:name="com.posthog.posthog.POSTHOG_HOST" android:value="' +
-                url +
-                '" />\n\t<meta-data android:name="com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS" android:value="false" />\n\t<meta-data android:name="com.posthog.posthog.DEBUG" android:value="false" />\n</application>'}
-        </CodeSnippet>
-    )
-}
-
-function FlutterIOSSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-    const url = window.location.origin
-
-    return (
-        <CodeSnippet language={Language.XML}>
-            {'<dict>\n\t[...]\n\t<key>com.posthog.posthog.API_KEY</key>\n\t<string>' +
-                currentTeam?.api_token +
-                '</string>\n\t<key>com.posthog.posthog.POSTHOG_HOST</key>\n\t<string>' +
-                url +
-                '</string>\n\t<key>com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS</key>\n\t<false/>\n\t[...]\n</dict>'}
-        </CodeSnippet>
-    )
-}
-
 export function ProductAnalyticsFlutterInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <FlutterInstallSnippet />
-            <h3>Android Setup</h3>
-            <p className="prompt-text">{'Add these values in AndroidManifest.xml'}</p>
-            <FlutterAndroidSetupSnippet />
-            <h3>iOS Setup</h3>
-            <p className="prompt-text">{'Add these values in Info.plist'}</p>
-            <FlutterIOSSetupSnippet />
+            <SDKInstallFlutterInstructions />
             <h3>Send an Event</h3>
             <FlutterCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/go.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/go.tsx
index 726f5f1d80eba..7d7d14f0cd818 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/go.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/go.tsx
@@ -1,27 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function GoInstallSnippet(): JSX.Element {
-    return <CodeSnippet language={Language.Bash}>{'go get "github.com/posthog/posthog-go"'}</CodeSnippet>
-}
-
-function GoSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Go}>
-            {`package main
-import (
-    "github.com/posthog/posthog-go"
-)
-func main() {
-    client, _ := posthog.NewWithConfig("${currentTeam?.api_token}", posthog.Config{Endpoint: "${window.location.origin}"})
-    defer client.Close()
-}`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallGoInstructions } from '../sdk-install-instructions'
 
 function GoCaptureSnippet(): JSX.Element {
     return (
@@ -34,10 +12,7 @@ function GoCaptureSnippet(): JSX.Element {
 export function ProductAnalyticsGoInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <GoInstallSnippet />
-            <h3>Configure</h3>
-            <GoSetupSnippet />
+            <SDKInstallGoInstructions />
             <h3>Send an Event</h3>
             <GoCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ios.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ios.tsx
index e337f685bad31..79ae931729710 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/ios.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ios.tsx
@@ -1,34 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function IOSInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Ruby}>
-            {'pod "PostHog", "~> 1.0" # Cocoapods \n# OR \ngithub "posthog/posthog-ios" # Carthage'}
-        </CodeSnippet>
-    )
-}
-
-function IOS_OBJ_C_SetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.ObjectiveC}>
-            {`#import <PostHog/PHGPostHog.h>\n#import <PostHog/PHGPostHogConfiguration.h>\n\nPHGPostHogConfiguration *configuration = [PHGPostHogConfiguration configurationWithApiKey:@"${currentTeam?.api_token}" host:@"${window.location.origin}"];\n\nconfiguration.captureApplicationLifecycleEvents = YES; // Record certain application events automatically!\nconfiguration.recordScreenViews = YES; // Record screen views automatically!\n\n[PHGPostHog setupWithConfiguration:configuration];`}
-        </CodeSnippet>
-    )
-}
-
-function IOS_SWIFT_SetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Swift}>
-            {`import PostHog\n\nlet configuration = PHGPostHogConfiguration(apiKey: "${currentTeam?.api_token}", host: "${window.location.origin}")\n\nconfiguration.captureApplicationLifecycleEvents = true; // Record certain application events automatically!\nconfiguration.recordScreenViews = true; // Record screen views automatically!\n\nPHGPostHog.setup(with: configuration)\nlet posthog = PHGPostHog.shared()`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallIOSInstructions } from '../sdk-install-instructions'
 
 function IOS_OBJ_C_CaptureSnippet(): JSX.Element {
     return (
@@ -45,12 +16,7 @@ function IOS_SWIFT_CaptureSnippet(): JSX.Element {
 export function ProductAnalyticsIOSInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <IOSInstallSnippet />
-            <h3>Configure Swift</h3>
-            <IOS_SWIFT_SetupSnippet />
-            <h3>Or configure Objective-C</h3>
-            <IOS_OBJ_C_SetupSnippet />
+            <SDKInstallIOSInstructions />
             <h3>Send an event with swift</h3>
             <IOS_SWIFT_CaptureSnippet />
             <h3>Send an event with Objective-C</h3>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
index ee13b1cee920e..fc2eb0f53c67d 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
@@ -1,31 +1,6 @@
-import { Link } from 'lib/lemon-ui/Link'
-import { JSSnippet } from 'lib/components/JSSnippet'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function JSInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {['npm install posthog-js', '# OR', 'yarn add posthog-js', '# OR', 'pnpm add posthog-js'].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-function JSSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {[
-                "import posthog from 'posthog-js'",
-                '',
-                `posthog.init('${currentTeam?.api_token}', { api_host: '${window.location.origin}' })`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallJSWebInstructions } from '../sdk-install-instructions'
+import { LemonDivider } from '@posthog/lemon-ui'
 
 function JSEventSnippet(): JSX.Element {
     return (
@@ -36,67 +11,8 @@ function JSEventSnippet(): JSX.Element {
 export function JSWebInstructions(): JSX.Element {
     return (
         <>
-            <div className="flex items-center">
-                <h3>Option 1. Code snippet</h3>
-                <div
-                    style={{
-                        marginLeft: 10,
-                        padding: 4,
-                        backgroundColor: 'var(--mark)',
-                        borderRadius: 'var(--radius)',
-                        color: 'var(--primary-alt)',
-                        fontSize: 11,
-                        fontWeight: 600,
-                        letterSpacing: '0.02em',
-                        textAlign: 'center',
-                    }}
-                    color="orange"
-                >
-                    Recommended
-                </div>
-            </div>
-            <p>
-                Just add this snippet to your website and we'll automatically capture page views, sessions and all
-                relevant interactions within your website.{' '}
-                <Link
-                    to="https://posthog.com/product-features/event-autocapture?utm_medium=in-product&utm_campaign=ingestion-web"
-                    target="_blank"
-                >
-                    Learn more
-                </Link>
-                .
-            </p>
-            <h4>Install the snippet</h4>
-            <p>
-                Insert this snippet in your website within the <code>&lt;head&gt;</code> tag. <JSSnippet />
-            </p>
-            <h4>Send events </h4>
-            <p>Visit your site and click around to generate some initial events.</p>
+            <SDKInstallJSWebInstructions />
             <LemonDivider thick dashed className="my-4" />
-            <div className="flex items-center">
-                <h2>Option 2. Javascript Library</h2>
-            </div>
-            <p>
-                Use this option if you want more granular control of how PostHog runs in your website and the events you
-                capture. Recommended for teams with more stable products and more defined analytics requirements.{' '}
-                <Link
-                    to="https://posthog.com/docs/integrate/client/js/?utm_medium=in-product&utm_campaign=ingestion-web"
-                    target="_blank"
-                >
-                    Learn more
-                </Link>
-                .
-            </p>
-            <h4>Install the package</h4>
-            <JSInstallSnippet />
-            <h4>
-                Configure &amp; initialize (see more{' '}
-                <Link to="https://posthog.com/docs/integrations/js-integration#config" target="_blank">
-                    configuration options
-                </Link>
-                )
-            </h4>
-            <JSSetupSnippet />
             <h4>Send your first event</h4>
             <JSEventSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/nodejs.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/nodejs.tsx
index 24872d5b9c1a3..6a6050ca44f49 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/nodejs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/nodejs.tsx
@@ -1,33 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function NodeInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {`npm install posthog-node
-# OR
-yarn add posthog-node
-# OR
-pnpm add posthog-node`}
-        </CodeSnippet>
-    )
-}
-
-function NodeSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`import { PostHog } from 'posthog-node'
-
-const client = new PostHog(
-    '${currentTeam?.api_token}',
-    { host: '${window.location.origin}' }
-)`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallNodeInstructions } from '../sdk-install-instructions'
 
 function NodeCaptureSnippet(): JSX.Element {
     return (
@@ -47,10 +19,7 @@ client.flush()`}
 export function ProductAnalyticsNodeInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <NodeInstallSnippet />
-            <h3>Configure</h3>
-            <NodeSetupSnippet />
+            <SDKInstallNodeInstructions />
             <h3>Send an Event</h3>
             <NodeCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/php.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/php.tsx
index 2f218e31d1510..2704a4c285e2b 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/php.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/php.tsx
@@ -1,34 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function PHPConfigSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JSON}>
-            {`{
-    "require": {
-        "posthog/posthog-php": "1.0.*"
-    }
-}`}
-        </CodeSnippet>
-    )
-}
-
-function PHPInstallSnippet(): JSX.Element {
-    return <CodeSnippet language={Language.Bash}>{'php composer.phar install'}</CodeSnippet>
-}
-
-function PHPSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.PHP}>
-            {`PostHog::init('${currentTeam?.api_token}',
-    array('host' => '${window.location.origin}')
-);`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallPHPInstructions } from '../sdk-install-instructions'
 
 function PHPCaptureSnippet(): JSX.Element {
     return (
@@ -41,12 +12,7 @@ function PHPCaptureSnippet(): JSX.Element {
 export function ProductAnalyticsPHPInstructions(): JSX.Element {
     return (
         <>
-            <h3>Dependency Setup</h3>
-            <PHPConfigSnippet />
-            <h3>Install</h3>
-            <PHPInstallSnippet />
-            <h3>Configure</h3>
-            <PHPSetupSnippet />
+            <SDKInstallPHPInstructions />
             <h3>Send an Event</h3>
             <PHPCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/python.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/python.tsx
index 4892dee3ac6e8..486326bf34669 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/python.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/python.tsx
@@ -1,24 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function PythonInstallSnippet(): JSX.Element {
-    return <CodeSnippet language={Language.Bash}>{'pip install posthog'}</CodeSnippet>
-}
-
-function PythonSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Python}>
-            {`from posthog import Posthog
-
-posthog = Posthog(project_api_key='${currentTeam?.api_token}', host='${window.location.origin}')
-
-            `}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallPythonInstructions } from '../sdk-install-instructions'
 
 function PythonCaptureSnippet(): JSX.Element {
     return <CodeSnippet language={Language.Python}>{"posthog.capture('test-id', 'test-event')"}</CodeSnippet>
@@ -27,10 +8,7 @@ function PythonCaptureSnippet(): JSX.Element {
 export function ProductAnalyticsPythonInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <PythonInstallSnippet />
-            <h3>Configure</h3>
-            <PythonSetupSnippet />
+            <SDKInstallPythonInstructions />
             <h3>Send an Event</h3>
             <PythonCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/react-native.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/react-native.tsx
index 3c80a3d512caf..0492b8c210960 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/react-native.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/react-native.tsx
@@ -1,52 +1,10 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { Link } from '@posthog/lemon-ui'
+import { SDKInstallRNInstructions } from '../sdk-install-instructions'
 
 export function ProductAnalyticsRNInstructions(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-    const url = window.location.origin
-
     return (
         <>
-            <h3 className="mt-4">Install</h3>
-            <CodeSnippet language={Language.Bash}>
-                {`# Expo apps
-expo install posthog-react-native expo-file-system expo-application expo-device expo-localization
-
-# Standard React Native apps
-yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info
-# or
-npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info
-
-# for iOS
-cd ios
-pod install`}
-            </CodeSnippet>
-            <h3 className="mt-4">Configure</h3>
-            <p>
-                PostHog is most easily used via the <code>PostHogProvider</code> component but if you need to
-                instantiate it directly,{' '}
-                <Link to="https://posthog.com/docs/integrate/client/react-native#without-the-posthogprovider">
-                    check out the docs
-                </Link>{' '}
-                which explain how to do this correctly.
-            </p>
-            <CodeSnippet language={Language.JSX}>
-                {`// App.(js|ts)
-import { PostHogProvider } from 'posthog-react-native'
-...
-
-export function MyApp() {
-    return (
-        <PostHogProvider apiKey="${currentTeam?.api_token}" options={{
-            host: "${url}",
-        }}>
-            <RestOfApp />
-        </PostHogProvider>
-    )
-}`}
-            </CodeSnippet>
+            <SDKInstallRNInstructions />
             <h3 className="mt-4">Send an Event</h3>
             <CodeSnippet language={Language.JSX}>{`// With hooks
 import { usePostHog } from 'posthog-react-native'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ruby.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ruby.tsx
index 0d9ee8dbd6da2..905897614ebcd 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/ruby.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ruby.tsx
@@ -1,24 +1,5 @@
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function RubyInstallSnippet(): JSX.Element {
-    return <CodeSnippet language={Language.Bash}>{'gem "posthog-ruby"'}</CodeSnippet>
-}
-
-function RubySetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Ruby}>
-            {`posthog = PostHog::Client.new({
-    api_key: "${currentTeam?.api_token}",
-    host: "${window.location.origin}",
-    on_error: Proc.new { |status, msg| print msg }
-})`}
-        </CodeSnippet>
-    )
-}
+import { SDKInstallRubyInstructions } from '../sdk-install-instructions'
 
 function RubyCaptureSnippet(): JSX.Element {
     return (
@@ -31,10 +12,7 @@ function RubyCaptureSnippet(): JSX.Element {
 export function ProductAnalyticsRubyInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install</h3>
-            <RubyInstallSnippet />
-            <h3>Configure</h3>
-            <RubySetupSnippet />
+            <SDKInstallRubyInstructions />
             <h3>Send an Event</h3>
             <RubyCaptureSnippet />
         </>
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx
new file mode 100644
index 0000000000000..01a4b7d11d934
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx
@@ -0,0 +1,51 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function AndroidInstallSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Java}>
+            {`dependencies {
+    implementation 'com.posthog.android:posthog:1.+'
+}`}
+        </CodeSnippet>
+    )
+}
+
+function AndroidSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Java}>
+            {`public class SampleApp extends Application {
+    private static final String POSTHOG_API_KEY = "${currentTeam?.api_token}";
+    private static final String POSTHOG_HOST = "${window.location.origin}";
+
+    @Override
+    public void onCreate() {
+        // Create a PostHog client with the given context, API key and host
+        PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
+            .captureApplicationLifecycleEvents() // Record certain application events automatically!
+            .recordScreenViews() // Record screen views automatically!
+            .build();
+
+        // Set the initialized instance as a globally accessible instance
+        PostHog.setSingletonInstance(posthog);
+
+        // Now any time you call PostHog.with, the custom instance will be returned
+        PostHog posthog = PostHog.with(this);
+    }`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallAndroidInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <AndroidInstallSnippet />
+            <h3>Configure</h3>
+            <AndroidSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/elixir.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/elixir.tsx
new file mode 100644
index 0000000000000..2378c5ef93d0b
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/elixir.tsx
@@ -0,0 +1,33 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function ElixirInstallSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Elixir}>
+            {'def deps do\n    [\n        {:posthog, "~> 0.1"}\n    ]\nend'}
+        </CodeSnippet>
+    )
+}
+
+function ElixirSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+    const url = window.location.origin
+
+    return (
+        <CodeSnippet language={Language.Elixir}>
+            {'config :posthog,\n    api_url: "' + url + '",\n    api_key: "' + currentTeam?.api_token + '"'}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallElixirInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <ElixirInstallSnippet />
+            <h3>Configure</h3>
+            <ElixirSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx
new file mode 100644
index 0000000000000..e37b2b1038388
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx
@@ -0,0 +1,52 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function FlutterInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.YAML}>{'posthog_flutter: # insert version number'}</CodeSnippet>
+}
+
+function FlutterAndroidSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+    const url = window.location.origin
+
+    return (
+        <CodeSnippet language={Language.XML}>
+            {'<application>\n\t<activity>\n\t\t[...]\n\t</activity>\n\t<meta-data android:name="com.posthog.posthog.API_KEY" android:value="' +
+                currentTeam?.api_token +
+                '" />\n\t<meta-data android:name="com.posthog.posthog.POSTHOG_HOST" android:value="' +
+                url +
+                '" />\n\t<meta-data android:name="com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS" android:value="false" />\n\t<meta-data android:name="com.posthog.posthog.DEBUG" android:value="false" />\n</application>'}
+        </CodeSnippet>
+    )
+}
+
+function FlutterIOSSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+    const url = window.location.origin
+
+    return (
+        <CodeSnippet language={Language.XML}>
+            {'<dict>\n\t[...]\n\t<key>com.posthog.posthog.API_KEY</key>\n\t<string>' +
+                currentTeam?.api_token +
+                '</string>\n\t<key>com.posthog.posthog.POSTHOG_HOST</key>\n\t<string>' +
+                url +
+                '</string>\n\t<key>com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS</key>\n\t<false/>\n\t[...]\n</dict>'}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallFlutterInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <FlutterInstallSnippet />
+            <h3>Android Setup</h3>
+            <p className="prompt-text">{'Add these values in AndroidManifest.xml'}</p>
+            <FlutterAndroidSetupSnippet />
+            <h3>iOS Setup</h3>
+            <p className="prompt-text">{'Add these values in Info.plist'}</p>
+            <FlutterIOSSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/go.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/go.tsx
new file mode 100644
index 0000000000000..87bf25b337c40
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/go.tsx
@@ -0,0 +1,35 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function GoInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>{'go get "github.com/posthog/posthog-go"'}</CodeSnippet>
+}
+
+function GoSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Go}>
+            {`package main
+import (
+    "github.com/posthog/posthog-go"
+)
+func main() {
+    client, _ := posthog.NewWithConfig("${currentTeam?.api_token}", posthog.Config{Endpoint: "${window.location.origin}"})
+    defer client.Close()
+}`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallGoInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <GoInstallSnippet />
+            <h3>Configure</h3>
+            <GoSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
new file mode 100644
index 0000000000000..cc0382dd22581
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -0,0 +1,11 @@
+export * from './android'
+export * from './go'
+export * from './nodejs'
+export * from './ios'
+export * from './php'
+export * from './python'
+export * from './react-native'
+export * from './ruby'
+export * from './elixir'
+export * from './flutter'
+export * from './js-web'
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ios.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ios.tsx
new file mode 100644
index 0000000000000..314f4c0305343
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ios.tsx
@@ -0,0 +1,44 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function IOSInstallSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Ruby}>
+            {'pod "PostHog", "~> 1.1" # Cocoapods \n# OR \ngithub "posthog/posthog-ios" # Carthage'}
+        </CodeSnippet>
+    )
+}
+
+function IOS_OBJ_C_SetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.ObjectiveC}>
+            {`#import <PostHog/PHGPostHog.h>\n#import <PostHog/PHGPostHogConfiguration.h>\n\nPHGPostHogConfiguration *configuration = [PHGPostHogConfiguration configurationWithApiKey:@"${currentTeam?.api_token}" host:@"${window.location.origin}"];\n\nconfiguration.captureApplicationLifecycleEvents = YES; // Record certain application events automatically!\nconfiguration.recordScreenViews = YES; // Record screen views automatically!\n\n[PHGPostHog setupWithConfiguration:configuration];`}
+        </CodeSnippet>
+    )
+}
+
+function IOS_SWIFT_SetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Swift}>
+            {`import PostHog\n\nlet configuration = PHGPostHogConfiguration(apiKey: "${currentTeam?.api_token}", host: "${window.location.origin}")\n\nconfiguration.captureApplicationLifecycleEvents = true; // Record certain application events automatically!\nconfiguration.recordScreenViews = true; // Record screen views automatically!\n\nPHGPostHog.setup(with: configuration)\nlet posthog = PHGPostHog.shared()`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallIOSInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <IOSInstallSnippet />
+            <h3>Configure Swift</h3>
+            <IOS_SWIFT_SetupSnippet />
+            <h3>Or configure Objective-C</h3>
+            <IOS_OBJ_C_SetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/js-web.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/js-web.tsx
new file mode 100644
index 0000000000000..88b5e8acc8adc
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/js-web.tsx
@@ -0,0 +1,46 @@
+import { JSSnippet } from 'lib/components/JSSnippet'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+export function JSInstallSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Bash}>
+            {['npm install posthog-js', '# OR', 'yarn add posthog-js', '# OR', 'pnpm add posthog-js'].join('\n')}
+        </CodeSnippet>
+    )
+}
+
+export function JSSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {[
+                "import posthog from 'posthog-js'",
+                '',
+                `posthog.init('${currentTeam?.api_token}', { api_host: '${window.location.origin}' })`,
+            ].join('\n')}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallJSWebInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Option 1. Code snippet</h3>
+            <p>
+                Just add this snippet to your website within the <code>&lt;head&gt;</code> tag and you'll be ready to
+                start using PostHog.{' '}
+            </p>
+            <JSSnippet />
+            <LemonDivider thick dashed className="my-4" />
+            <h3>Option 2. Javascript Library</h3>
+            <h4>Install the package</h4>
+            <JSInstallSnippet />
+            <h4>Initialize</h4>
+            <JSSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/next-js.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/next-js.tsx
new file mode 100644
index 0000000000000..a66c40f7c0b7c
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/next-js.tsx
@@ -0,0 +1,97 @@
+import { Link } from 'lib/lemon-ui/Link'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+import { JSInstallSnippet } from './js-web'
+
+function NextEnvVarsSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Bash}>
+            {[
+                `NEXT_PUBLIC_POSTHOG_KEY=${currentTeam?.api_token}`,
+                `NEXT_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
+            ].join('\n')}
+        </CodeSnippet>
+    )
+}
+
+function NextPagesRouterCodeSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`// pages/_app.js
+...
+import posthog from 'posthog-js' // Import PostHog
+
+if (typeof window !== 'undefined') { // checks that we are client-side
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === 'development') posthog.debug() // debug mode in development
+    },
+  })
+}
+
+export default function App({ Component, pageProps }) {
+  const router = useRouter()
+  ...`}
+        </CodeSnippet>
+    )
+}
+
+function NextAppRouterCodeSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`// app/providers.js
+'use client'
+...
+import posthog from 'posthog-js'
+
+if (typeof window !== 'undefined') {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  })
+}
+...`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallNextJSInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install posthog-js using your package manager</h3>
+            <JSInstallSnippet />
+            <h3>Add environment variables</h3>
+            <p>
+                Add your environment variables to your .env.local file and to your hosting provider (e.g. Vercel,
+                Netlify, AWS). You can find your project API key in your project settings.
+            </p>
+            <p className="italic">
+                These values need to start with <code className="not-italic">NEXT_PUBLIC_</code> to be accessible on the
+                client-side.
+            </p>
+            <NextEnvVarsSnippet />
+
+            <h3>Initialize</h3>
+            <h4>With App router</h4>
+            <p>
+                If your Next.js app to uses the <Link to="https://nextjs.org/docs/app">app router</Link>, you can
+                integrate PostHog by creating a providers file in your app folder. This is because the posthog-js
+                library needs to be initialized on the client-side using the Next.js{' '}
+                <Link to="https://nextjs.org/docs/getting-started/react-essentials#client-components" target="_blank">
+                    <code>'use client'</code> directive
+                </Link>
+                .
+            </p>
+            <NextAppRouterCodeSnippet />
+            <h4>With Pages router</h4>
+            <p>
+                If your Next.js app uses the <Link to={'https://nextjs.org/docs/pages'}>pages router</Link>, you can
+                integrate PostHog at the root of your app (pages/_app.js).
+            </p>
+            <NextPagesRouterCodeSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nodejs.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nodejs.tsx
new file mode 100644
index 0000000000000..bab12bd12c45e
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nodejs.tsx
@@ -0,0 +1,41 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+export function NodeInstallSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Bash}>
+            {`npm install posthog-node
+# OR
+yarn add posthog-node
+# OR
+pnpm add posthog-node`}
+        </CodeSnippet>
+    )
+}
+
+export function NodeSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`import { PostHog } from 'posthog-node'
+
+const client = new PostHog(
+    '${currentTeam?.api_token}',
+    { host: '${window.location.origin}' }
+)`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallNodeInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <NodeInstallSnippet />
+            <h3>Configure</h3>
+            <NodeSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/php.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/php.tsx
new file mode 100644
index 0000000000000..136dee636404a
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/php.tsx
@@ -0,0 +1,44 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function PHPConfigSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JSON}>
+            {`{
+    "require": {
+        "posthog/posthog-php": "1.0.*"
+    }
+}`}
+        </CodeSnippet>
+    )
+}
+
+function PHPInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>{'php composer.phar install'}</CodeSnippet>
+}
+
+function PHPSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.PHP}>
+            {`PostHog::init('${currentTeam?.api_token}',
+    array('host' => '${window.location.origin}')
+);`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallPHPInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Dependency Setup</h3>
+            <PHPConfigSnippet />
+            <h3>Install</h3>
+            <PHPInstallSnippet />
+            <h3>Configure</h3>
+            <PHPSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/python.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/python.tsx
new file mode 100644
index 0000000000000..54ece50952ec3
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/python.tsx
@@ -0,0 +1,32 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function PythonInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>{'pip install posthog'}</CodeSnippet>
+}
+
+function PythonSetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Python}>
+            {`from posthog import Posthog
+
+posthog = Posthog(project_api_key='${currentTeam?.api_token}', host='${window.location.origin}')
+
+            `}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallPythonInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <PythonInstallSnippet />
+            <h3>Configure</h3>
+            <PythonSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx
new file mode 100644
index 0000000000000..298cb434f6751
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx
@@ -0,0 +1,52 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+import { Link } from '@posthog/lemon-ui'
+
+export function SDKInstallRNInstructions(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+    const url = window.location.origin
+
+    return (
+        <>
+            <h3 className="mt-4">Install</h3>
+            <CodeSnippet language={Language.Bash}>
+                {`# Expo apps
+expo install posthog-react-native expo-file-system expo-application expo-device expo-localization
+
+# Standard React Native apps
+yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info
+# or
+npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info
+
+# for iOS
+cd ios
+pod install`}
+            </CodeSnippet>
+            <h3 className="mt-4">Configure</h3>
+            <p>
+                PostHog is most easily used via the <code>PostHogProvider</code> component but if you need to
+                instantiate it directly,{' '}
+                <Link to="https://posthog.com/docs/integrate/client/react-native#without-the-posthogprovider">
+                    check out the docs
+                </Link>{' '}
+                which explain how to do this correctly.
+            </p>
+            <CodeSnippet language={Language.JSX}>
+                {`// App.(js|ts)
+import { PostHogProvider } from 'posthog-react-native'
+...
+
+export function MyApp() {
+    return (
+        <PostHogProvider apiKey="${currentTeam?.api_token}" options={{
+            host: "${url}",
+        }}>
+            <RestOfApp />
+        </PostHogProvider>
+    )
+}`}
+            </CodeSnippet>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react.tsx
new file mode 100644
index 0000000000000..0f19b890c3e90
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react.tsx
@@ -0,0 +1,63 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+import { JSInstallSnippet } from './js-web'
+
+function ReactEnvVarsSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Bash}>
+            {[
+                `REACT_APP_POSTHOG_PUBLIC_KEY=${currentTeam?.api_token}`,
+                `REACT_APP_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
+            ].join('\n')}
+        </CodeSnippet>
+    )
+}
+
+function ReactSetupSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`// src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+import { PostHogProvider} from 'posthog-js/react'
+
+const options = {
+  api_host: process.env.REACT_APP_PUBLIC_POSTHOG_HOST,
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <PostHogProvider 
+      apiKey={process.env.REACT_APP_PUBLIC_POSTHOG_KEY}
+      options={options}
+    >
+      <App />
+    </PostHogProvider>
+  </React.StrictMode>
+);`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallReactInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install the package</h3>
+            <JSInstallSnippet />
+            <h3>Add environment variables</h3>
+            <ReactEnvVarsSnippet />
+            <h3>Initialize</h3>
+            <p>
+                Integrate PostHog at the root of your app (<code>src/index.js</code> for the default{' '}
+                <code>create-react-app</code>).
+            </p>
+            <ReactSetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ruby.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ruby.tsx
new file mode 100644
index 0000000000000..bd5521f351983
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/ruby.tsx
@@ -0,0 +1,32 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { useValues } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+function RubyInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>{'gem "posthog-ruby"'}</CodeSnippet>
+}
+
+function RubySetupSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Ruby}>
+            {`posthog = PostHog::Client.new({
+    api_key: "${currentTeam?.api_token}",
+    host: "${window.location.origin}",
+    on_error: Proc.new { |status, msg| print msg }
+})`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallRubyInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <RubyInstallSnippet />
+            <h3>Configure</h3>
+            <RubySetupSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/js-web.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/js-web.tsx
index 8ef2865c3b834..fc799bbd8a65a 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/js-web.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/js-web.tsx
@@ -1,39 +1,11 @@
-import { JSSnippet } from 'lib/components/JSSnippet'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
-
-function JSSetupSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {[
-                "import posthog from 'posthog-js'",
-                '',
-                `posthog.init('${currentTeam?.api_token}', { api_host: '${window.location.origin}' })`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
+import { SessionReplayFinalSteps } from '../shared-snippets'
+import { SDKInstallJSWebInstructions } from '../sdk-install-instructions'
 
 export function JSWebInstructions(): JSX.Element {
     return (
         <>
-            <h3>Option 1. Code snippet</h3>
-            <p>
-                Just add this snippet to your website within the <code>&lt;head&gt;</code> tag and we'll automatically
-                capture page views, sessions and all relevant interactions within your website.
-            </p>
-            <JSSnippet />
-            <LemonDivider thick dashed className="my-4" />
-            <h3>Option 2. Javascript Library</h3>
-            <h4>Install the package</h4>
-            <JSInstallSnippet />
-            <h4>Initialize</h4>
-            <JSSetupSnippet />
+            <SDKInstallJSWebInstructions />
             <LemonDivider thick dashed className="my-4" />
             <h3>Final steps</h3>
             <SessionReplayFinalSteps />
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/next-js.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/next-js.tsx
index cda978ee12166..dadd37388cb0a 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/next-js.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/next-js.tsx
@@ -1,97 +1,10 @@
-import { Link } from 'lib/lemon-ui/Link'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
-
-function NextEnvVarsSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {[
-                `NEXT_PUBLIC_POSTHOG_KEY=${currentTeam?.api_token}`,
-                `NEXT_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-function NextPagesRouterCodeSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// pages/_app.js
-...
-import posthog from 'posthog-js' // Import PostHog
-
-if (typeof window !== 'undefined') { // checks that we are client-side
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
-    loaded: (posthog) => {
-      if (process.env.NODE_ENV === 'development') posthog.debug() // debug mode in development
-    },
-  })
-}
-
-export default function App({ Component, pageProps }) {
-  const router = useRouter()
-  ...`}
-        </CodeSnippet>
-    )
-}
-
-function NextAppRouterCodeSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// app/providers.js
-'use client'
-...
-import posthog from 'posthog-js'
-
-if (typeof window !== 'undefined') {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-  })
-}
-...`}
-        </CodeSnippet>
-    )
-}
+import { SessionReplayFinalSteps } from '../shared-snippets'
+import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js'
 
 export function NextJSInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install posthog-js using your package manager</h3>
-            <JSInstallSnippet />
-            <h3>Add environment variables</h3>
-            <p>
-                Add your environment variables to your .env.local file and to your hosting provider (e.g. Vercel,
-                Netlify, AWS). You can find your project API key in your project settings.
-            </p>
-            <p className="italic">
-                These values need to start with <code className="not-italic">NEXT_PUBLIC_</code> to be accessible on the
-                client-side.
-            </p>
-            <NextEnvVarsSnippet />
-
-            <h3>Initialize</h3>
-            <h4>With App router</h4>
-            <p>
-                If your Next.js app to uses the <Link to="https://nextjs.org/docs/app">app router</Link>, you can
-                integrate PostHog by creating a providers file in your app folder. This is because the posthog-js
-                library needs to be initialized on the client-side using the Next.js{' '}
-                <Link to="https://nextjs.org/docs/getting-started/react-essentials#client-components" target="_blank">
-                    <code>'use client'</code> directive
-                </Link>
-                .
-            </p>
-            <NextAppRouterCodeSnippet />
-            <h4>With Pages router</h4>
-            <p>
-                If your Next.js app uses the <Link to={'https://nextjs.org/docs/pages'}>pages router</Link>, you can
-                integrate PostHog at the root of your app (pages/_app.js).
-            </p>
-            <NextPagesRouterCodeSnippet />
+            <SDKInstallNextJSInstructions />
             <SessionReplayFinalSteps />
         </>
     )
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/react.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/react.tsx
index 86fdfc0f527c7..361884112a15b 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/react.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/react.tsx
@@ -1,63 +1,10 @@
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-import { JSInstallSnippet, SessionReplayFinalSteps } from '../shared-snippets'
-
-function ReactEnvVarsSnippet(): JSX.Element {
-    const { currentTeam } = useValues(teamLogic)
-
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {[
-                `REACT_APP_POSTHOG_PUBLIC_KEY=${currentTeam?.api_token}`,
-                `REACT_APP_PUBLIC_POSTHOG_HOST=${window.location.origin}`,
-            ].join('\n')}
-        </CodeSnippet>
-    )
-}
-
-function ReactSetupSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>
-            {`// src/index.js
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-import { PostHogProvider} from 'posthog-js/react'
-
-const options = {
-  api_host: process.env.REACT_APP_PUBLIC_POSTHOG_HOST,
-}
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <PostHogProvider 
-      apiKey={process.env.REACT_APP_PUBLIC_POSTHOG_KEY}
-      options={options}
-    >
-      <App />
-    </PostHogProvider>
-  </React.StrictMode>
-);`}
-        </CodeSnippet>
-    )
-}
+import { SessionReplayFinalSteps } from '../shared-snippets'
+import { SDKInstallReactInstructions } from '../sdk-install-instructions/react'
 
 export function ReactInstructions(): JSX.Element {
     return (
         <>
-            <h3>Install the package</h3>
-            <JSInstallSnippet />
-            <h3>Add environment variables</h3>
-            <ReactEnvVarsSnippet />
-            <h3>Initialize</h3>
-            <p>
-                Integrate PostHog at the root of your app (<code>src/index.js</code> for the default{' '}
-                <code>create-react-app</code>).
-            </p>
-            <ReactSetupSnippet />
+            <SDKInstallReactInstructions />
             <SessionReplayFinalSteps />
         </>
     )
diff --git a/frontend/src/scenes/onboarding/sdks/shared-snippets.tsx b/frontend/src/scenes/onboarding/sdks/shared-snippets.tsx
index f8c2fe58417c1..215f9a07693d2 100644
--- a/frontend/src/scenes/onboarding/sdks/shared-snippets.tsx
+++ b/frontend/src/scenes/onboarding/sdks/shared-snippets.tsx
@@ -1,14 +1,5 @@
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 import { Link } from 'lib/lemon-ui/Link'
 
-export function JSInstallSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.Bash}>
-            {['npm install posthog-js', '# OR', 'yarn add posthog-js', '# OR', 'pnpm add posthog-js'].join('\n')}
-        </CodeSnippet>
-    )
-}
-
 export function SessionReplayFinalSteps(): JSX.Element {
     return (
         <>