diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png
index 6b266dfc495d9f..32ccc8f30f2746 100644
Binary files a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png and b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--dark.png differ
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png
index 9ce6ff19c933ff..8334bf0ed643c5 100644
Binary files a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png and b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks--light.png differ
diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
index ab980c8d2e3509..c9a6a88c5b3cce 100644
--- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
@@ -19,6 +19,13 @@ export const allSDKs: SDK[] = [
image: require('./logos/html.svg'),
docsLink: 'https://posthog.com/docs/libraries/js',
},
+ {
+ name: 'Android',
+ key: SDKKey.ANDROID,
+ tags: [SDKTag.MOBILE],
+ image: require('./logos/android.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/android',
+ },
{
name: 'Angular',
key: SDKKey.ANGULAR,
@@ -27,42 +34,72 @@ export const allSDKs: SDK[] = [
docsLink: 'https://posthog.com/docs/libraries/angular',
},
{
- name: 'React',
- key: SDKKey.REACT,
- tags: [SDKTag.WEB, SDKTag.RECOMMENDED],
- recommended: true,
- image: require('./logos/react.svg'),
- docsLink: 'https://posthog.com/docs/libraries/react',
+ name: 'API',
+ key: SDKKey.API,
+ tags: [SDKTag.SERVER],
+ image: (
+
+
+ ),
+ docsLink: 'https://posthog.com/docs/api',
},
{
- name: 'Next.js',
- key: SDKKey.NEXT_JS,
+ name: 'Astro',
+ key: SDKKey.ASTRO,
tags: [SDKTag.WEB],
- image: require('./logos/nextjs.svg'),
- docsLink: 'https://posthog.com/docs/libraries/next-js',
+ image: require('./logos/astro.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/astro',
},
{
- name: 'Gatsby',
- key: SDKKey.GATSBY,
+ name: 'Bubble',
+ key: SDKKey.BUBBLE,
tags: [SDKTag.WEB],
- image: require('./logos/gatsby.svg'),
- docsLink: 'https://posthog.com/docs/libraries/gatsby',
+ image: require('./logos/bubble.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/bubble',
},
{
- name: 'Nuxt.js',
- key: SDKKey.NUXT_JS,
+ name: 'Django',
+ key: SDKKey.DJANGO,
+ tags: [SDKTag.SERVER],
+ image: require('./logos/django.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/django',
+ },
+ {
+ name: 'Elixir',
+ key: SDKKey.ELIXIR,
+ tags: [SDKTag.SERVER],
+ image: require('./logos/elixir.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/elixir',
+ },
+ {
+ name: 'Flutter',
+ key: SDKKey.FLUTTER,
+ tags: [SDKTag.MOBILE],
+ image: require('./logos/flutter.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/flutter',
+ },
+ {
+ name: 'Framer',
+ key: SDKKey.FRAMER,
tags: [SDKTag.WEB],
- image: require('./logos/nuxt.svg'),
- docsLink: 'https://posthog.com/docs/libraries/nuxt-js',
+ image: require('./logos/framer.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/framer',
},
{
- name: 'Vue.js',
- key: SDKKey.VUE_JS,
+ name: 'Gatsby',
+ key: SDKKey.GATSBY,
tags: [SDKTag.WEB],
- image: require('./logos/vue.svg'),
- docsLink: 'https://posthog.com/docs/libraries/vue-js',
+ image: require('./logos/gatsby.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/gatsby',
+ },
+ {
+ name: 'Go',
+ key: SDKKey.GO,
+ tags: [SDKTag.SERVER],
+ image: require('./logos/go.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/go',
},
- // Mobile
{
name: 'iOS',
key: SDKKey.IOS,
@@ -71,27 +108,26 @@ export const allSDKs: SDK[] = [
docsLink: 'https://posthog.com/docs/libraries/ios',
},
{
- name: 'Android',
- key: SDKKey.ANDROID,
- tags: [SDKTag.MOBILE],
- image: require('./logos/android.svg'),
- docsLink: 'https://posthog.com/docs/libraries/android',
+ name: 'Java',
+ key: SDKKey.JAVA,
+ tags: [SDKTag.SERVER],
+ image: require('./logos/java.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/java',
},
{
- name: 'React Native',
- key: SDKKey.REACT_NATIVE,
- tags: [SDKTag.MOBILE],
- image: require('./logos/react.svg'),
- docsLink: 'https://posthog.com/docs/libraries/react-native',
+ name: 'Laravel',
+ key: SDKKey.LARAVEL,
+ tags: [SDKTag.SERVER],
+ image: require('./logos/laravel.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/laravel',
},
{
- name: 'Flutter',
- key: SDKKey.FLUTTER,
- tags: [SDKTag.MOBILE],
- image: require('./logos/flutter.svg'),
- docsLink: 'https://posthog.com/docs/libraries/flutter',
+ name: 'Next.js',
+ key: SDKKey.NEXT_JS,
+ tags: [SDKTag.WEB],
+ image: require('./logos/nextjs.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/next-js',
},
- // Server
{
name: 'Node.js',
key: SDKKey.NODE_JS,
@@ -101,19 +137,11 @@ export const allSDKs: SDK[] = [
docsLink: 'https://posthog.com/docs/libraries/node',
},
{
- name: 'Python',
- key: SDKKey.PYTHON,
- tags: [SDKTag.SERVER, SDKTag.RECOMMENDED],
- recommended: true,
- image: require('./logos/python.svg'),
- docsLink: 'https://posthog.com/docs/libraries/python',
- },
- {
- name: 'Ruby',
- key: SDKKey.RUBY,
- tags: [SDKTag.SERVER],
- image: require('./logos/ruby.svg'),
- docsLink: 'https://posthog.com/docs/libraries/ruby',
+ name: 'Nuxt.js',
+ key: SDKKey.NUXT_JS,
+ tags: [SDKTag.WEB],
+ image: require('./logos/nuxt.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/nuxt-js',
},
{
name: 'PHP',
@@ -123,36 +151,41 @@ export const allSDKs: SDK[] = [
docsLink: 'https://posthog.com/docs/libraries/php',
},
{
- name: 'Go',
- key: SDKKey.GO,
- tags: [SDKTag.SERVER],
- image: require('./logos/go.svg'),
- docsLink: 'https://posthog.com/docs/libraries/go',
+ name: 'Python',
+ key: SDKKey.PYTHON,
+ tags: [SDKTag.SERVER, SDKTag.RECOMMENDED],
+ recommended: true,
+ image: require('./logos/python.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/python',
},
{
- name: 'Elixir',
- key: SDKKey.ELIXIR,
- tags: [SDKTag.SERVER],
- image: require('./logos/elixir.svg'),
- docsLink: 'https://posthog.com/docs/libraries/elixir',
+ name: 'React',
+ key: SDKKey.REACT,
+ tags: [SDKTag.WEB, SDKTag.RECOMMENDED],
+ recommended: true,
+ image: require('./logos/react.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/react',
},
{
- name: 'API',
- key: SDKKey.API,
- tags: [SDKTag.SERVER],
- image: (
-
-
- ),
- docsLink: 'https://posthog.com/docs/api',
+ name: 'React Native',
+ key: SDKKey.REACT_NATIVE,
+ tags: [SDKTag.MOBILE],
+ image: require('./logos/react.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/react-native',
},
{
- name: 'Java',
- key: SDKKey.JAVA,
+ name: 'Remix',
+ key: SDKKey.REMIX,
+ tags: [SDKTag.WEB],
+ image: require('./logos/remix.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/remix',
+ },
+ {
+ name: 'Ruby',
+ key: SDKKey.RUBY,
tags: [SDKTag.SERVER],
- image: require('./logos/java.svg'),
- docsLink: 'https://posthog.com/docs/libraries/java',
+ image: require('./logos/ruby.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/ruby',
},
{
name: 'Rust',
@@ -161,6 +194,27 @@ export const allSDKs: SDK[] = [
image: require('./logos/rust.svg'),
docsLink: 'https://posthog.com/docs/libraries/rust',
},
+ {
+ name: 'Svelte',
+ key: SDKKey.SVELTE,
+ tags: [SDKTag.WEB],
+ image: require('./logos/svelte.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/svelte',
+ },
+ {
+ name: 'Vue.js',
+ key: SDKKey.VUE_JS,
+ tags: [SDKTag.WEB],
+ image: require('./logos/vue.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/vue-js',
+ },
+ {
+ name: 'Webflow',
+ key: SDKKey.WEBFLOW,
+ tags: [SDKTag.WEB],
+ image: require('./logos/webflow.svg'),
+ docsLink: 'https://posthog.com/docs/libraries/webflow',
+ },
// integrations
{
name: 'Google Tag Manager',
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
index 8d6247d513e7e1..ab58f83895d727 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
@@ -4,17 +4,27 @@ import {
FeatureFlagsAndroidInstructions,
FeatureFlagsAngularInstructions,
FeatureFlagsAPIInstructions,
+ FeatureFlagsAstroInstructions,
+ FeatureFlagsBubbleInstructions,
+ FeatureFlagsDjangoInstructions,
FeatureFlagsFlutterInstructions,
+ FeatureFlagsFramerInstructions,
FeatureFlagsGoInstructions,
FeatureFlagsIOSInstructions,
FeatureFlagsJSWebInstructions,
+ FeatureFlagsLaravelInstructions,
FeatureFlagsNextJSInstructions,
FeatureFlagsNodeInstructions,
+ FeatureFlagsNuxtJSInstructions,
FeatureFlagsPHPInstructions,
FeatureFlagsPythonInstructions,
FeatureFlagsReactInstructions,
+ FeatureFlagsRemixJSInstructions,
FeatureFlagsRNInstructions,
FeatureFlagsRubyInstructions,
+ FeatureFlagsSvelteInstructions,
+ FeatureFlagsVueInstructions,
+ FeatureFlagsWebflowInstructions,
} from '.'
export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
@@ -22,15 +32,24 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
[SDKKey.ANGULAR]: FeatureFlagsAngularInstructions,
[SDKKey.ANDROID]: FeatureFlagsAndroidInstructions,
[SDKKey.API]: FeatureFlagsAPIInstructions,
+ [SDKKey.ASTRO]: FeatureFlagsAstroInstructions,
+ [SDKKey.BUBBLE]: FeatureFlagsBubbleInstructions,
+ [SDKKey.DJANGO]: FeatureFlagsDjangoInstructions,
[SDKKey.FLUTTER]: FeatureFlagsFlutterInstructions,
+ [SDKKey.FRAMER]: FeatureFlagsFramerInstructions,
[SDKKey.GO]: FeatureFlagsGoInstructions,
[SDKKey.IOS]: FeatureFlagsIOSInstructions,
+ [SDKKey.LARAVEL]: FeatureFlagsLaravelInstructions,
[SDKKey.NEXT_JS]: FeatureFlagsNextJSInstructions,
[SDKKey.NODE_JS]: FeatureFlagsNodeInstructions,
+ [SDKKey.NUXT_JS]: FeatureFlagsNuxtJSInstructions,
[SDKKey.PHP]: FeatureFlagsPHPInstructions,
[SDKKey.PYTHON]: FeatureFlagsPythonInstructions,
[SDKKey.REACT]: FeatureFlagsReactInstructions,
[SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
+ [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions,
[SDKKey.RUBY]: FeatureFlagsRubyInstructions,
- // add rust, gatsby, nuxt, vue, svelte, and others here
+ [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions,
+ [SDKKey.VUE_JS]: FeatureFlagsVueInstructions,
+ [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions,
}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/astro.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/astro.tsx
new file mode 100644
index 00000000000000..faedfad4cb789b
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/astro.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallAstroInstructions } from '../sdk-install-instructions/astro'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsAstroInstructions(): JSX.Element {
+ return (
+ <>
+ Client-side rendering
+ Server-side rendering
+ Install
+ Configure
+ Client-side rendering
+ Server-side rendering
+ Install
+ Configure
+ Client-side rendering
+ Server-side rendering
+ Install
+ Configure
+ {`import posthog
+
+posthog.capture('test-id', 'test-event')`}
+ )
+}
+
+export function ProductAnalyticsDjangoInstructions(): JSX.Element {
+ return (
+ <>
+ Send an Event
+
+ {"PostHog::capture(array(\n 'distinctId' => 'test-user',\n 'event' => 'test-event'\n));"}
+
+ )
+}
+
+export function ProductAnalyticsLaravelInstructions(): JSX.Element {
+ return (
+ <>
+ Send an Event
+
+ {`cd ./src/components
+# or 'cd ./src && mkdir components && cd ./components' if your components folder doesn't exist
+touch posthog.astro`}
+
+ )
+}
+
+function AstroSetupSnippet(): JSX.Element {
+ const { currentTeam } = useValues(teamLogic)
+ return (
+ <>
+
+ {`---
+
+---
+
+`}
+
+
+ )
+}
+
+export function SDKInstallAstroInstructions(): JSX.Element {
+ return (
+ <>
+ Install the PostHog web snippet
+
+ In your src/components folder, create a posthog.astro file:
+
+ In this file, add your PostHog web snippet:
+ Install the PostHog web snippet
+ First copy your web snippet:
+
+ 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.
+
+ Deploy your site to live.
+
+
+ )
+}
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 00000000000000..aee7182c84c6ac
--- /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:
+ 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 5618d2f4ae8863..45ffdf34a99197 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -1,12 +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 00000000000000..55ff388d95ad5a
--- /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
+
+
+ {`export default defineNuxtConfig({
+ runtimeConfig: {
+ public: {
+ posthogPublicKey: '${currentTeam?.api_token}',
+ posthogHost: '${apiHostOrigin()}'
+ }
+ }
+ })`}
+
+ )
+}
+
+function NuxtAppClientCodeSnippet(): JSX.Element {
+ return (
+
+ {`import { defineNuxtPlugin } from '#app'
+import posthog from 'posthog-js'
+export default defineNuxtPlugin(nuxtApp => {
+ const runtimeConfig = useRuntimeConfig();
+ const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
+ api_host: runtimeConfig.public.posthogHost',
+ capture_pageview: false, // we add manual pageview capturing below
+ loaded: (posthog) => {
+ if (import.meta.env.MODE === 'development') posthog.debug();
+ }
+ })
+
+ // Make sure that pageviews are captured with each route change
+ const router = useRouter();
+ router.afterEach((to) => {
+ nextTick(() => {
+ posthog.capture('$pageview', {
+ current_url: to.fullPath
+ });
+ });
+ });
+
+ return {
+ provide: {
+ posthog: () => posthogClient
+ }
+ }
+})`}
+
+ )
+}
+
+export function SDKInstallNuxtJSInstructions(): JSX.Element {
+ return (
+ <>
+
+ The below guide is for Nuxt v3.0 and above. For Nuxt v2.16 and below, see our{' '}
+
+ Install posthog-js using your package manager
+ Add environment variables
+
+ Add your PostHog API key and host to your nuxt.config.js file.
+
+ Create a plugin
+
+ Create a new plugin by creating a new file posthog.client.js in your{' '}
+
+
+ {`import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode, useEffect } from "react";
+import { hydrateRoot } from "react-dom/client";
+import posthog from "posthog-js";
+
+function PosthogInit() {
+ useEffect(() => {
+ posthog.init('${currentTeam?.api_token}', {
+ api_host: '${apiHostOrigin()}',
+ });
+ }, []);
+
+ return null;
+}
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ );
+});`}
+
+ )
+}
+
+export function SDKInstallRemixJSInstructions(): JSX.Element {
+ return (
+ <>
+ Install posthog-js using your package manager
+ Initialize
+
+ Go to your app/entry.client.tsx file and initialize PostHog as a component:
+
+
+ {`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.js in your src/routes folder. In
+ this file, check the environment is the browser, and initialize PostHog if so:
+
+
+ {`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{' '}
+
+ Install posthog-js using your package manager
+ Create a plugin
+
+ Create a new file posthog.js in your plugins directory:
+
+ posthog.js:
+ Activate your plugin
+ Install the PostHog web snippet
+ First copy your web snippet:
+
+ 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.
+
+ Publish your site.
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
index f5ccdac98ac8b3..b8fc50a5bd38a5 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
@@ -1,11 +1,33 @@
import { SDKInstructionsMap, SDKKey } from '~/types'
-import { HTMLSnippetInstructions, JSWebInstructions, NextJSInstructions, ReactInstructions, AngularInstructions } from '.'
+import {
+ AngularInstructions,
+ AstroInstructions,
+ BubbleInstructions,
+ FramerInstructions,
+ HTMLSnippetInstructions,
+ JSWebInstructions,
+ NextJSInstructions,
+ NuxtJSInstructions,
+ ReactInstructions,
+ RemixInstructions,
+ SvelteInstructions,
+ VueInstructions,
+ WebflowInstructions,
+} from '.'
export const SessionReplaySDKInstructions: SDKInstructionsMap = {
[SDKKey.JS_WEB]: JSWebInstructions,
[SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
[SDKKey.ANGULAR]: AngularInstructions,
+ [SDKKey.ASTRO]: AstroInstructions,
+ [SDKKey.BUBBLE]: BubbleInstructions,
+ [SDKKey.FRAMER]: FramerInstructions,
[SDKKey.NEXT_JS]: NextJSInstructions,
+ [SDKKey.NUXT_JS]: NuxtJSInstructions,
[SDKKey.REACT]: ReactInstructions,
+ [SDKKey.REMIX]: RemixInstructions,
+ [SDKKey.SVELTE]: SvelteInstructions,
+ [SDKKey.VUE_JS]: VueInstructions,
+ [SDKKey.WEBFLOW]: WebflowInstructions,
}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/astro.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/astro.tsx
new file mode 100644
index 00000000000000..a9a01c411e2b07
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/astro.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallAstroInstructions } from '../sdk-install-instructions'
+import { SessionReplayFinalSteps } from '../shared-snippets'
+
+export function AstroInstructions(): JSX.Element {
+ return (
+ <>
+