+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
index e3364337bf72c..bf5c8678d04a1 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -3,6 +3,7 @@ export * from './angular'
export * from './api'
export * from './astro'
export * from './bubble'
+export * from './django'
export * from './elixir'
export * from './flutter'
export * from './framer'
@@ -19,3 +20,6 @@ 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/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/django.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx
new file mode 100644
index 0000000000000..aee7182c84c6a
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx
@@ -0,0 +1,55 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+function DjangoInstallSnippet(): JSX.Element {
+ return pip install posthog
+}
+
+function DjangoAppConfigSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+
+ return (
+
+ {`from django.apps import AppConfig
+import posthog
+
+class YourAppConfig(AppConfig):
+ name = "your_app_name"
+ def ready(self):
+ posthog.api_key = '${currentTeam?.api_token}'
+ posthog.host = '${apiHostOrigin()}'`}
+
+ )
+}
+
+function DjangoSettingsSnippet(): JSX.Element {
+ return (
+
+ {`INSTALLED_APPS = [
+ # other apps
+ 'your_app_name.apps.MyAppConfig', # Add your app config
+] `}
+
+ )
+}
+
+export function SDKInstallDjangoInstructions(): JSX.Element {
+ return (
+ <>
+
Install
+
+
Configure
+
+ 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/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
index 5bfe78571d5fe..45ffdf34a9919 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -2,6 +2,7 @@ export * from './android'
export * from './angular'
export * from './astro'
export * from './bubble'
+export * from './django'
export * from './elixir'
export * from './flutter'
export * from './framer'
@@ -16,3 +17,6 @@ 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/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.
+