+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx
new file mode 100644
index 0000000000000..3ed90cab39edc
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/remix.tsx
@@ -0,0 +1,21 @@
+import { SDKKey } from '~/types'
+
+import { NodeInstallSnippet, NodeSetupSnippet } from '../sdk-install-instructions'
+import { SDKInstallRemixJSInstructions } from '../sdk-install-instructions/remix'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsRemixJSInstructions(): JSX.Element {
+ return (
+ <>
+
+
Client-side rendering
+
+
Server-side rendering
+
Install
+
+
Configure
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx
new file mode 100644
index 0000000000000..74349718ac517
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/svelte.tsx
@@ -0,0 +1,21 @@
+import { SDKKey } from '~/types'
+
+import { NodeInstallSnippet, NodeSetupSnippet } from '../sdk-install-instructions'
+import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsSvelteInstructions(): JSX.Element {
+ return (
+ <>
+
+
Client-side rendering
+
+
Server-side rendering
+
Install
+
+
Configure
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx
new file mode 100644
index 0000000000000..eec3c3d13f093
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/vue.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsVueInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx
new file mode 100644
index 0000000000000..3f4cbf0c157a7
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/webflow.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallWebflowInstructions } from '../sdk-install-instructions/webflow'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsWebflowInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/logos/angular.svg b/frontend/src/scenes/onboarding/sdks/logos/angular.svg
new file mode 100644
index 0000000000000..bf081acb12952
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/angular.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/frontend/src/scenes/onboarding/sdks/logos/astro.svg b/frontend/src/scenes/onboarding/sdks/logos/astro.svg
new file mode 100644
index 0000000000000..52b76d550913d
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/astro.svg
@@ -0,0 +1,11 @@
+
diff --git a/frontend/src/scenes/onboarding/sdks/logos/bubble.svg b/frontend/src/scenes/onboarding/sdks/logos/bubble.svg
new file mode 100644
index 0000000000000..abc0672e53e6d
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/bubble.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/frontend/src/scenes/onboarding/sdks/logos/django.svg b/frontend/src/scenes/onboarding/sdks/logos/django.svg
new file mode 100644
index 0000000000000..69a4642491753
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/django.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/logos/flask.svg b/frontend/src/scenes/onboarding/sdks/logos/flask.svg
new file mode 100644
index 0000000000000..df0987bf64edd
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/flask.svg
@@ -0,0 +1,6 @@
+
+
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/logos/framer.svg b/frontend/src/scenes/onboarding/sdks/logos/framer.svg
new file mode 100644
index 0000000000000..7d8f4e2a03eef
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/framer.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/logos/laravel.svg b/frontend/src/scenes/onboarding/sdks/logos/laravel.svg
new file mode 100644
index 0000000000000..e1309dd21e8b9
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/laravel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/logos/remix.svg b/frontend/src/scenes/onboarding/sdks/logos/remix.svg
new file mode 100644
index 0000000000000..24b949f646f37
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/remix.svg
@@ -0,0 +1,7 @@
+
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/logos/svelte.svg b/frontend/src/scenes/onboarding/sdks/logos/svelte.svg
new file mode 100644
index 0000000000000..4bf279659a930
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/svelte.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/frontend/src/scenes/onboarding/sdks/logos/webflow.svg b/frontend/src/scenes/onboarding/sdks/logos/webflow.svg
new file mode 100644
index 0000000000000..90241e04d9b86
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/logos/webflow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
index c6bc257335e44..d435dc8bfa3ad 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
@@ -4,33 +4,54 @@ import {
HTMLSnippetInstructions,
JSWebInstructions,
ProductAnalyticsAndroidInstructions,
+ ProductAnalyticsAngularInstructions,
ProductAnalyticsAPIInstructions,
+ ProductAnalyticsAstroInstructions,
+ ProductAnalyticsBubbleInstructions,
+ ProductAnalyticsDjangoInstructions,
ProductAnalyticsElixirInstructions,
ProductAnalyticsFlutterInstructions,
+ ProductAnalyticsFramerInstructions,
ProductAnalyticsGoInstructions,
ProductAnalyticsIOSInstructions,
+ ProductAnalyticsLaravelInstructions,
ProductAnalyticsNextJSInstructions,
ProductAnalyticsNodeInstructions,
+ ProductAnalyticsNuxtJSInstructions,
ProductAnalyticsPHPInstructions,
ProductAnalyticsPythonInstructions,
+ ProductAnalyticsRemixJSInstructions,
ProductAnalyticsRNInstructions,
ProductAnalyticsRubyInstructions,
+ ProductAnalyticsSvelteJSInstructions,
+ ProductAnalyticsVueInstructions,
+ ProductAnalyticsWebflowInstructions,
} from '.'
export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
[SDKKey.JS_WEB]: JSWebInstructions,
- [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
- [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions,
- // add getsby and other frameworks here
- [SDKKey.IOS]: ProductAnalyticsIOSInstructions,
- [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,
[SDKKey.ANDROID]: ProductAnalyticsAndroidInstructions,
+ [SDKKey.ANGULAR]: ProductAnalyticsAngularInstructions,
+ [SDKKey.API]: ProductAnalyticsAPIInstructions,
+ [SDKKey.ASTRO]: ProductAnalyticsAstroInstructions,
+ [SDKKey.BUBBLE]: ProductAnalyticsBubbleInstructions,
+ [SDKKey.DJANGO]: ProductAnalyticsDjangoInstructions,
+ [SDKKey.ELIXIR]: ProductAnalyticsElixirInstructions,
[SDKKey.FLUTTER]: ProductAnalyticsFlutterInstructions,
+ [SDKKey.FRAMER]: ProductAnalyticsFramerInstructions,
+ [SDKKey.GO]: ProductAnalyticsGoInstructions,
+ [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
+ [SDKKey.IOS]: ProductAnalyticsIOSInstructions,
+ [SDKKey.LARAVEL]: ProductAnalyticsLaravelInstructions,
+ [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions,
[SDKKey.NODE_JS]: ProductAnalyticsNodeInstructions,
+ [SDKKey.NUXT_JS]: ProductAnalyticsNuxtJSInstructions,
+ [SDKKey.PHP]: ProductAnalyticsPHPInstructions,
[SDKKey.PYTHON]: ProductAnalyticsPythonInstructions,
+ [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,
+ [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions,
[SDKKey.RUBY]: ProductAnalyticsRubyInstructions,
- [SDKKey.PHP]: ProductAnalyticsPHPInstructions,
- [SDKKey.GO]: ProductAnalyticsGoInstructions,
- [SDKKey.ELIXIR]: ProductAnalyticsElixirInstructions,
- [SDKKey.API]: ProductAnalyticsAPIInstructions,
+ [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions,
+ [SDKKey.VUE_JS]: ProductAnalyticsVueInstructions,
+ [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions,
}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/angular.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/angular.tsx
new file mode 100644
index 0000000000000..223b29928a8bc
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/angular.tsx
@@ -0,0 +1,14 @@
+import { LemonDivider } from '@posthog/lemon-ui'
+
+import { SDKInstallAngularInstructions } from '../sdk-install-instructions/angular'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsAngularInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/astro.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/astro.tsx
new file mode 100644
index 0000000000000..c2b4bbd2316c1
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/astro.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallAstroInstructions } from '../sdk-install-instructions/astro'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsAstroInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/bubble.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/bubble.tsx
new file mode 100644
index 0000000000000..b55883bdcb27b
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/bubble.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallBubbleInstructions } from '../sdk-install-instructions/bubble'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsBubbleInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx
new file mode 100644
index 0000000000000..8729c42c514a1
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx
@@ -0,0 +1,21 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+
+function DjangoCaptureSnippet(): JSX.Element {
+ return (
+ {`import posthog
+
+posthog.capture('test-id', 'test-event')`}
+ )
+}
+
+export function ProductAnalyticsDjangoInstructions(): JSX.Element {
+ return (
+ <>
+
+
Send an Event
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/framer.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/framer.tsx
new file mode 100644
index 0000000000000..9b9a46b0988f0
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/framer.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallFramerInstructions } from '../sdk-install-instructions/framer'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsFramerInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
index 291d5555184a4..bf5c8678d04a1 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -1,14 +1,25 @@
export * from './android'
+export * from './angular'
export * from './api'
+export * from './astro'
+export * from './bubble'
+export * from './django'
export * from './elixir'
export * from './flutter'
+export * from './framer'
export * from './go'
export * from './html-snippet'
export * from './ios'
export * from './js-web'
+export * from './laravel'
export * from './next-js'
export * from './nodejs'
+export * from './nuxt'
export * from './php'
export * from './python'
export * from './react-native'
+export * from './remix'
export * from './ruby'
+export * from './svelte'
+export * from './vue'
+export * from './webflow'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/laravel.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/laravel.tsx
new file mode 100644
index 0000000000000..c8bca7f9a2397
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/laravel.tsx
@@ -0,0 +1,21 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
+import { SDKInstallLaravelInstructions } from '../sdk-install-instructions'
+
+function LaravelCaptureSnippet(): JSX.Element {
+ return (
+
+ {"PostHog::capture(array(\n 'distinctId' => 'test-user',\n 'event' => 'test-event'\n));"}
+
+ )
+}
+
+export function ProductAnalyticsLaravelInstructions(): JSX.Element {
+ return (
+ <>
+
+
Send an Event
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx
new file mode 100644
index 0000000000000..c2ddf2f83d817
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsNuxtJSInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/remix.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/remix.tsx
new file mode 100644
index 0000000000000..ff093e84de046
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/remix.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallRemixJSInstructions } from '../sdk-install-instructions/remix'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsRemixJSInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx
new file mode 100644
index 0000000000000..8c60a6e20ee6a
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/svelte.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallSvelteJSInstructions } from '../sdk-install-instructions/svelte'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsSvelteJSInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx
new file mode 100644
index 0000000000000..f4646bb7867c2
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/vue.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsVueInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx
new file mode 100644
index 0000000000000..3edc373793c54
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/webflow.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallWebflowInstructions } from '../sdk-install-instructions/webflow'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsWebflowInstructions(): JSX.Element {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx
new file mode 100644
index 0000000000000..7587684b9d07b
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx
@@ -0,0 +1,60 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { JSInstallSnippet } from './js-web'
+
+function EnvVarsSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+
+ return (
+
+ {[`POSTHOG_KEY=${currentTeam?.api_token}`, `POSTHOG_HOST=${apiHostOrigin()}`].join('\n')}
+
+ )
+}
+
+function AngularInitializeCodeSnippet(): JSX.Element {
+ return (
+
+ {`// in src/main.ts
+
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import posthog from 'posthog-js'
+
+posthog.init(
+ process.env.POSTHOG_KEY,
+ {
+ api_host:process.env.POSTHOG_HOST
+ }
+)
+
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));`}
+
+ )
+}
+
+export function SDKInstallAngularInstructions(): JSX.Element {
+ return (
+ <>
+
Install posthog-js using your package manager
+
+
Add environment variables
+
+ 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.
+
+
+
+
Initialize
+
+ In your src/main.ts, initialize PostHog using your project API key and instance address:
+
+ Go to your Bubble site settings by clicking on the icon in the left-hand menu. If you haven’t already,
+ sign up for at least the Starter site plan. This enables you to add custom code. Then:
+
+
+
+ Go to the SEO / metatags tab in site settings.
+
+
+ Paste your PostHog snippet in the Script/meta tags in header section.
+
+ Set the PostHog API key and host in your AppConfig in apps.py so that's it's
+ available everywhere:
+
+
+
+ Next, if you haven't done so already, make sure you add your AppConfig to your{' '}
+ settings.py under INSTALLED_APPS:
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/framer.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/framer.tsx
new file mode 100644
index 0000000000000..3208cd09cd1ab
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/framer.tsx
@@ -0,0 +1,32 @@
+import { JSSnippet } from 'lib/components/JSSnippet'
+
+export function SDKInstallFramerInstructions(): JSX.Element {
+ return (
+ <>
+
Install the PostHog web snippet
+
First copy your web snippet:
+
+
+ Then go to your Framer project settings by clicking the gear in the top right. If you haven’t already,
+ sign up for at least the Mini site plan. This enables you to add custom code. Then:
+
+
+
+ Go to the General tab in site settings.
+
+
+ Scroll down to the Custom Code section.
+
+
+ {' '}
+ Under{' '}
+
+ End of <head> tag
+
+ , paste your PostHog snippet.
+
+
Press save, and then publish your site.
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
index 0765b5bbf12f6..45ffdf34a9919 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -1,11 +1,22 @@
export * from './android'
+export * from './angular'
+export * from './astro'
+export * from './bubble'
+export * from './django'
export * from './elixir'
export * from './flutter'
+export * from './framer'
export * from './go'
export * from './ios'
export * from './js-web'
+export * from './laravel'
export * from './nodejs'
+export * from './nuxt'
export * from './php'
export * from './python'
export * from './react-native'
+export * from './remix'
export * from './ruby'
+export * from './svelte'
+export * from './vue'
+export * from './webflow'
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/laravel.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/laravel.tsx
new file mode 100644
index 0000000000000..55ff388d95ad5
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/laravel.tsx
@@ -0,0 +1,51 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+function LaravelConfigSnippet(): JSX.Element {
+ return composer require posthog/posthog-php
+}
+
+function LaravelInstallSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+
+ return (
+
+ {` '${apiHostOrigin()}'
+ ]
+ );
+ }
+}
+`}
+
+ )
+}
+
+export function SDKInstallLaravelInstructions(): JSX.Element {
+ return (
+ <>
+
Dependency Setup
+
+
Configure
+
+ Initialize PostHog in the boot method of app/Providers/AppServiceProvider.php
+
+ Go to your app/entry.client.tsx file and initialize PostHog as a component:
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx
new file mode 100644
index 0000000000000..141de4ab8acc3
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/svelte.tsx
@@ -0,0 +1,49 @@
+import { Link } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { JSInstallSnippet } from './js-web'
+
+function SvelteAppClientCodeSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+
+ return (
+
+ {`import posthog from 'posthog-js'
+import { browser } from '$app/environment';
+
+export const load = async () => {
+
+ if (browser) {
+ posthog.init(
+ '${currentTeam?.api_token}',
+ { api_host: "${apiHostOrigin()}" }
+ )
+ }
+ return
+};`}
+
+ )
+}
+
+export function SDKInstallSvelteJSInstructions(): JSX.Element {
+ return (
+ <>
+
Install posthog-js using your package manager
+
+
+
Initialize
+
+ If you haven't created a root{' '}
+
+ layout
+ {' '}
+ already, create a new file called +layout.js in your src/routes folder. In
+ this file, check the environment is the browser, and initialize PostHog if so:
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx
new file mode 100644
index 0000000000000..9bd3eb224ec10
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/vue.tsx
@@ -0,0 +1,78 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { Link } from 'lib/lemon-ui/Link'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { JSInstallSnippet } from './js-web'
+
+function VueCreatePluginsFileSnippet(): JSX.Element {
+ return (
+
+ {`mkdir plugins #skip if you already have one
+cd plugins
+touch posthog.js`}
+
+ )
+}
+
+function VuePluginsCodeSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+
+ return (
+
+ {`//./plugins/posthog.js
+import posthog from "posthog-js";
+
+export default {
+ install(app) {
+ app.config.globalProperties.$posthog = posthog.init(
+ '${currentTeam?.api_token}',
+ {
+ api_host: '${apiHostOrigin()}',
+ }
+ );
+ },
+};`}
+
+ )
+}
+
+function VueActivatePluginSnippet(): JSX.Element {
+ return (
+
+ {`//main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import posthogPlugin from "./plugins/posthog"; //import the plugin.
+
+const app = createApp(App);
+
+app.use(posthogPlugin); //install the plugin
+app.mount('#app')`}
+
+ )
+}
+
+export function SDKInstallVueInstructions(): JSX.Element {
+ return (
+ <>
+
+ The below guide is for integrating using plugins in Vue versions 3 and above. For integrating PostHog
+ using Provide/inject, Vue.prototype, or versions 2.7 and below, see our{' '}
+ Vue docs
+
+
Install posthog-js using your package manager
+
+
Create a plugin
+
+ Create a new file posthog.js in your plugins directory:
+
+ Go to your Webflow site settings by clicking on the menu icon in the top left. If you haven’t already,
+ sign up for at least the Basic site plan. This enables you to add custom code. Then:
+
+
+
+ Go to the Custom code tab in site settings.
+
+
+ In the Head code section, paste your PostHog snippet and press save.
+