From 53e0c30d249bfa8efcc6b648ccb6d312f73388fe Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Tue, 3 Sep 2024 10:41:16 -0700
Subject: [PATCH] feat(onboarding-dashboard-templates): get the iframe loading
 (#24692)

---
 .../IframedToolbarBrowser.tsx                 |  75 +++++
 .../iframedToolbarBrowserLogic.ts             | 272 ++++++++++++++++++
 .../utils.ts                                  |   0
 .../src/scenes/heatmaps/HeatmapsBrowser.tsx   |   2 +-
 .../scenes/heatmaps/heatmapsBrowserLogic.ts   |   6 +-
 .../src/scenes/onboarding/OnboardingStep.tsx  |  16 +-
 .../DashboardTemplateConfigureStep.tsx        | 113 ++++++--
 .../src/scenes/onboarding/sdks/sdksLogic.tsx  |  41 ++-
 frontend/src/toolbar/bar/toolbarLogic.ts      |   2 +-
 frontend/src/toolbar/elements/heatmapLogic.ts |   2 +-
 .../src/toolbar/stats/HeatmapToolbarMenu.tsx  |   2 +-
 11 files changed, 493 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
 create mode 100644 frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
 rename frontend/src/lib/components/{heatmaps => IframedToolbarBrowser}/utils.ts (100%)

diff --git a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
new file mode 100644
index 0000000000000..3e34575b31c96
--- /dev/null
+++ b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
@@ -0,0 +1,75 @@
+import { LemonBanner, Spinner } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { useEffect } from 'react'
+import useResizeObserver from 'use-resize-observer'
+
+import { ToolbarUserIntent } from '~/types'
+
+import { appEditorUrl } from '../AuthorizedUrlList/authorizedUrlListLogic'
+import { iframedToolbarBrowserLogic } from './iframedToolbarBrowserLogic'
+
+function IframeErrorOverlay(): JSX.Element | null {
+    const logic = iframedToolbarBrowserLogic()
+    const { iframeBanner } = useValues(logic)
+    return iframeBanner ? (
+        <div className="absolute flex flex-col w-full h-full bg-blend-overlay items-start py-4 px-8 pointer-events-none">
+            <LemonBanner className="w-full" type={iframeBanner.level}>
+                {iframeBanner.message}. Your site might not allow being embedded in an iframe. You can click "Open in
+                toolbar" above to visit your site and view the heatmap there.
+            </LemonBanner>
+        </div>
+    ) : null
+}
+
+function LoadingOverlay(): JSX.Element | null {
+    const logic = iframedToolbarBrowserLogic()
+    const { loading } = useValues(logic)
+    return loading ? (
+        <div className="absolute flex flex-col w-full h-full items-center justify-center pointer-events-none">
+            <Spinner className="text-5xl" textColored={true} />
+        </div>
+    ) : null
+}
+
+export function IframedToolbarBrowser({
+    iframeRef,
+    userIntent,
+}: {
+    iframeRef?: React.MutableRefObject<HTMLIFrameElement | null>
+    userIntent: ToolbarUserIntent
+}): JSX.Element | null {
+    const logic = iframedToolbarBrowserLogic()
+
+    const { browserUrl } = useValues(logic)
+    const { onIframeLoad, setIframeWidth } = useActions(logic)
+
+    const { width: iframeWidth } = useResizeObserver<HTMLIFrameElement>({ ref: iframeRef })
+    useEffect(() => {
+        setIframeWidth(iframeWidth ?? null)
+    }, [iframeWidth])
+
+    return browserUrl ? (
+        <div className="relative flex-1 w-full h-full">
+            <IframeErrorOverlay />
+            <LoadingOverlay />
+            <iframe
+                ref={iframeRef}
+                className="w-full h-full"
+                src={appEditorUrl(browserUrl, {
+                    userIntent: userIntent,
+                })}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{
+                    background: '#FFF',
+                }}
+                onLoad={onIframeLoad}
+                // these two sandbox values are necessary so that the site and toolbar can run
+                // this is a very loose sandbox,
+                // but we specify it so that at least other capabilities are denied
+                sandbox="allow-scripts allow-same-origin"
+                // we don't allow things such as camera access though
+                allow=""
+            />
+        </div>
+    ) : null
+}
diff --git a/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts b/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
new file mode 100644
index 0000000000000..71a59fdde32a1
--- /dev/null
+++ b/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
@@ -0,0 +1,272 @@
+import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
+import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
+import { CommonFilters, HeatmapFilters, HeatmapFixedPositionMode } from 'lib/components/heatmaps/types'
+import {
+    calculateViewportRange,
+    DEFAULT_HEATMAP_FILTERS,
+    PostHogAppToolbarEvent,
+} from 'lib/components/IframedToolbarBrowser/utils'
+import { LemonBannerProps } from 'lib/lemon-ui/LemonBanner'
+import posthog from 'posthog-js'
+import { RefObject } from 'react'
+
+import type { iframedToolbarBrowserLogicType } from './iframedToolbarBrowserLogicType'
+
+export type IframedToolbarBrowserLogicProps = {
+    iframeRef: RefObject<HTMLIFrameElement | null>
+    clearBrowserUrlOnUnmount?: boolean
+}
+
+export interface IFrameBanner {
+    level: LemonBannerProps['type']
+    message: string | JSX.Element
+}
+
+export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
+    path(['lib', 'components', 'iframedToolbarBrowser', 'iframedToolbarBrowserLogic']),
+    props({} as IframedToolbarBrowserLogicProps),
+
+    connect({
+        values: [
+            authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }),
+            ['urlsKeyed', 'checkUrlIsAuthorized'],
+        ],
+    }),
+
+    actions({
+        setBrowserUrl: (url: string | null) => ({ url }),
+        onIframeLoad: true,
+        sendToolbarMessage: (type: PostHogAppToolbarEvent, payload?: Record<string, any>) => ({
+            type,
+            payload,
+        }),
+        // TRICKY: duplicated with the heatmapLogic so that we can share the settings picker
+        patchHeatmapFilters: (filters: Partial<HeatmapFilters>) => ({ filters }),
+        setHeatmapColorPalette: (Palette: string | null) => ({ Palette }),
+        setHeatmapFixedPositionMode: (mode: HeatmapFixedPositionMode) => ({ mode }),
+        setCommonFilters: (filters: CommonFilters) => ({ filters }),
+        // TRICKY: duplication ends
+        setIframeWidth: (width: number | null) => ({ width }),
+        setIframeBanner: (banner: IFrameBanner | null) => ({ banner }),
+        startTrackingLoading: true,
+        stopTrackingLoading: true,
+    }),
+
+    reducers({
+        // they're called common filters in the toolbar because they're shared between heatmaps and clickmaps
+        // the name is continued here since they're passed down into the embedded iframe
+        commonFilters: [
+            { date_from: '-7d' } as CommonFilters,
+            {
+                setCommonFilters: (_, { filters }) => filters,
+            },
+        ],
+        heatmapColorPalette: [
+            'default' as string | null,
+            {
+                setHeatmapColorPalette: (_, { Palette }) => Palette,
+            },
+        ],
+        heatmapFilters: [
+            DEFAULT_HEATMAP_FILTERS,
+            {
+                patchHeatmapFilters: (state, { filters }) => ({ ...state, ...filters }),
+            },
+        ],
+        heatmapFixedPositionMode: [
+            'fixed' as HeatmapFixedPositionMode,
+            {
+                setHeatmapFixedPositionMode: (_, { mode }) => mode,
+            },
+        ],
+        iframeWidth: [
+            null as number | null,
+            {
+                setIframeWidth: (_, { width }) => width,
+            },
+        ],
+        browserUrl: [
+            null as string | null,
+            { persist: true },
+            {
+                setBrowserUrl: (_, { url }) => url,
+            },
+        ],
+        loading: [
+            false as boolean,
+            {
+                setBrowserUrl: (state, { url }) => (url?.trim().length ? true : state),
+                setIframeBanner: (state, { banner }) => (banner?.level == 'error' ? false : state),
+                startTrackingLoading: () => true,
+                stopTrackingLoading: () => false,
+            },
+        ],
+        iframeBanner: [
+            null as IFrameBanner | null,
+            {
+                setIframeBanner: (_, { banner }) => banner,
+            },
+        ],
+    }),
+
+    selectors({
+        isBrowserUrlAuthorized: [
+            (s) => [s.browserUrl, s.checkUrlIsAuthorized],
+            (browserUrl, checkUrlIsAuthorized) => {
+                if (!browserUrl) {
+                    return false
+                }
+                return checkUrlIsAuthorized(browserUrl)
+            },
+        ],
+
+        viewportRange: [
+            (s) => [s.heatmapFilters, s.iframeWidth],
+            (heatmapFilters, iframeWidth) => {
+                return iframeWidth ? calculateViewportRange(heatmapFilters, iframeWidth) : { min: 0, max: 1800 }
+            },
+        ],
+    }),
+
+    listeners(({ actions, cache, props, values }) => ({
+        sendToolbarMessage: ({ type, payload }) => {
+            props.iframeRef?.current?.contentWindow?.postMessage(
+                {
+                    type,
+                    payload,
+                },
+                '*'
+            )
+        },
+
+        patchHeatmapFilters: ({ filters }) => {
+            actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_PATCH_HEATMAP_FILTERS, { filters })
+        },
+
+        setHeatmapFixedPositionMode: ({ mode }) => {
+            actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_HEATMAPS_FIXED_POSITION_MODE, {
+                fixedPositionMode: mode,
+            })
+        },
+
+        setHeatmapColorPalette: ({ Palette }) => {
+            actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_HEATMAPS_COLOR_PALETTE, {
+                colorPalette: Palette,
+            })
+        },
+
+        setCommonFilters: ({ filters }) => {
+            actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_HEATMAPS_COMMON_FILTERS, { commonFilters: filters })
+        },
+
+        onIframeLoad: () => {
+            // we get this callback whether the iframe loaded successfully or not
+            // and don't get a signal if the load was successful, so we have to check
+            // but there's no slam dunk way to do that
+
+            const init = (): void => {
+                actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_APP_INIT, {
+                    filters: values.heatmapFilters,
+                    colorPalette: values.heatmapColorPalette,
+                    fixedPositionMode: values.heatmapFixedPositionMode,
+                    commonFilters: values.commonFilters,
+                })
+                actions.sendToolbarMessage(PostHogAppToolbarEvent.PH_HEATMAPS_CONFIG, {
+                    enabled: true,
+                })
+            }
+
+            const onIframeMessage = (e: MessageEvent): void => {
+                const type: PostHogAppToolbarEvent = e?.data?.type
+
+                if (!type || !type.startsWith('ph-')) {
+                    return
+                }
+                if (!values.checkUrlIsAuthorized(e.origin)) {
+                    console.warn(
+                        'ignoring message from iframe with origin not in authorized toolbar urls',
+                        e.origin,
+                        e.data
+                    )
+                    return
+                }
+
+                switch (type) {
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_INIT:
+                        return init()
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_READY:
+                        posthog.capture('in-app heatmap frame loaded', {
+                            inapp_heatmap_page_url_visited: values.browserUrl,
+                            inapp_heatmap_filters: values.heatmapFilters,
+                            inapp_heatmap_color_palette: values.heatmapColorPalette,
+                            inapp_heatmap_fixed_position_mode: values.heatmapFixedPositionMode,
+                        })
+                        // reset loading tracking - if we're e.g. slow this will avoid a flash of warning message
+                        return actions.startTrackingLoading()
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_HEATMAP_LOADING:
+                        return actions.startTrackingLoading()
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_HEATMAP_LOADED:
+                        posthog.capture('in-app heatmap loaded', {
+                            inapp_heatmap_page_url_visited: values.browserUrl,
+                            inapp_heatmap_filters: values.heatmapFilters,
+                            inapp_heatmap_color_palette: values.heatmapColorPalette,
+                            inapp_heatmap_fixed_position_mode: values.heatmapFixedPositionMode,
+                        })
+                        return actions.stopTrackingLoading()
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_HEATMAP_FAILED:
+                        posthog.capture('in-app heatmap failed', {
+                            inapp_heatmap_page_url_visited: values.browserUrl,
+                            inapp_heatmap_filters: values.heatmapFilters,
+                            inapp_heatmap_color_palette: values.heatmapColorPalette,
+                            inapp_heatmap_fixed_position_mode: values.heatmapFixedPositionMode,
+                        })
+                        actions.stopTrackingLoading()
+                        actions.setIframeBanner({ level: 'error', message: 'The heatmap failed to load.' })
+                        return
+                    default:
+                        console.warn(`[PostHog Heatmaps] Received unknown child window message: ${type}`)
+                }
+            }
+
+            window.addEventListener('message', onIframeMessage, false)
+            // We call init in case the toolbar got there first (unlikely)
+            init()
+        },
+
+        setBrowserUrl: ({ url }) => {
+            if (url?.trim().length) {
+                actions.startTrackingLoading()
+            }
+        },
+
+        startTrackingLoading: () => {
+            actions.setIframeBanner(null)
+
+            clearTimeout(cache.errorTimeout)
+            cache.errorTimeout = setTimeout(() => {
+                actions.setIframeBanner({ level: 'error', message: 'The heatmap failed to load (or is very slow).' })
+            }, 7500)
+
+            clearTimeout(cache.warnTimeout)
+            cache.warnTimeout = setTimeout(() => {
+                actions.setIframeBanner({ level: 'warning', message: 'Still waiting for the toolbar to load.' })
+            }, 3000)
+        },
+
+        stopTrackingLoading: () => {
+            actions.setIframeBanner(null)
+
+            clearTimeout(cache.errorTimeout)
+            clearTimeout(cache.warnTimeout)
+        },
+    })),
+
+    afterMount(({ actions, values }) => {
+        if (values.browserUrl?.trim().length) {
+            actions.startTrackingLoading()
+        }
+    }),
+    beforeUnmount(({ actions, props }) => {
+        props.clearBrowserUrlOnUnmount && actions.setBrowserUrl('')
+    }),
+])
diff --git a/frontend/src/lib/components/heatmaps/utils.ts b/frontend/src/lib/components/IframedToolbarBrowser/utils.ts
similarity index 100%
rename from frontend/src/lib/components/heatmaps/utils.ts
rename to frontend/src/lib/components/IframedToolbarBrowser/utils.ts
diff --git a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
index b36d822503feb..3b83a4ef79f20 100644
--- a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
+++ b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
@@ -5,8 +5,8 @@ import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUr
 import { appEditorUrl, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { HeatmapsSettings } from 'lib/components/heatmaps/HeatMapsSettings'
-import { heatmapDateOptions } from 'lib/components/heatmaps/utils'
 import { DetectiveHog } from 'lib/components/hedgehogs'
+import { heatmapDateOptions } from 'lib/components/IframedToolbarBrowser/utils'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { IconChevronRight, IconOpenInNew } from 'lib/lemon-ui/icons'
 import React, { useEffect, useRef } from 'react'
diff --git a/frontend/src/scenes/heatmaps/heatmapsBrowserLogic.ts b/frontend/src/scenes/heatmaps/heatmapsBrowserLogic.ts
index acc981688c5bf..902d9a639b72a 100644
--- a/frontend/src/scenes/heatmaps/heatmapsBrowserLogic.ts
+++ b/frontend/src/scenes/heatmaps/heatmapsBrowserLogic.ts
@@ -4,7 +4,11 @@ import { actionToUrl, router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { CommonFilters, HeatmapFilters, HeatmapFixedPositionMode } from 'lib/components/heatmaps/types'
-import { calculateViewportRange, DEFAULT_HEATMAP_FILTERS, PostHogAppToolbarEvent } from 'lib/components/heatmaps/utils'
+import {
+    calculateViewportRange,
+    DEFAULT_HEATMAP_FILTERS,
+    PostHogAppToolbarEvent,
+} from 'lib/components/IframedToolbarBrowser/utils'
 import { LemonBannerProps } from 'lib/lemon-ui/LemonBanner'
 import { objectsEqual } from 'lib/utils'
 import posthog from 'posthog-js'
diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
index 9472c266d0f3a..963b5834b0390 100644
--- a/frontend/src/scenes/onboarding/OnboardingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -22,6 +22,7 @@ export const OnboardingStep = ({
     continueOverride,
     hideHeader,
     breadcrumbHighlightName,
+    fullWidth = false,
 }: {
     stepKey: OnboardingStepKey
     title: string
@@ -35,6 +36,7 @@ export const OnboardingStep = ({
     continueOverride?: JSX.Element
     hideHeader?: boolean
     breadcrumbHighlightName?: OnboardingStepKey
+    fullWidth?: boolean
 }): JSX.Element => {
     const { hasNextStep, onboardingStepKeys, currentOnboardingStep } = useValues(onboardingLogic)
     const { completeOnboarding, goToNextStep, setStepKey } = useActions(onboardingLogic)
@@ -78,13 +80,21 @@ export const OnboardingStep = ({
                             )
                         })}
                     </div>
-                    <h1 className="font-bold m-0 mt-3 px-2">
+                    <h1 className={`font-bold m-0 mt-3 px-2 ${fullWidth && 'text-center'}`}>
                         {title || stepKeyToTitle(currentOnboardingStep?.props.stepKey)}
                     </h1>
                 </div>
             </div>
-            <div className={`${stepKey !== 'product_intro' && 'p-2 max-w-screen-md mx-auto'}`}>
-                {subtitle && <p>{subtitle}</p>}
+            <div
+                className={`${stepKey !== 'product_intro' && 'p-2'} ${
+                    stepKey !== 'product_intro' && !fullWidth && 'max-w-screen-md mx-auto'
+                }`}
+            >
+                {subtitle && (
+                    <div className="max-w-screen-md mx-auto">
+                        <p>{subtitle}</p>
+                    </div>
+                )}
                 {children}
                 <div className="mt-8 flex justify-end gap-x-2">
                     {showHelpButton && (
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
index cc3878fed6474..1f67ee2abd399 100644
--- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
+++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
@@ -1,12 +1,17 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { IconArrowRight } from '@posthog/icons'
+import { LemonButton, LemonCard, LemonSkeleton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { useState } from 'react'
+import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
+import { IframedToolbarBrowser } from 'lib/components/IframedToolbarBrowser/IframedToolbarBrowser'
+import { iframedToolbarBrowserLogic } from 'lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic'
+import { useRef, useState } from 'react'
 import { DashboardTemplateVariables } from 'scenes/dashboard/DashboardTemplateVariables'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 
 import { OnboardingStepKey } from '../onboardingLogic'
 import { OnboardingStep } from '../OnboardingStep'
+import { sdksLogic } from '../sdks/sdksLogic'
 import { onboardingTemplateConfigLogic } from './onboardingTemplateConfigLogic'
 
 export const OnboardingDashboardTemplateConfigureStep = ({
@@ -14,10 +19,15 @@ export const OnboardingDashboardTemplateConfigureStep = ({
 }: {
     stepKey?: OnboardingStepKey
 }): JSX.Element => {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
     const { activeDashboardTemplate } = useValues(onboardingTemplateConfigLogic)
     const { createDashboardFromTemplate } = useActions(newDashboardLogic)
     const { isLoading } = useValues(newDashboardLogic)
     const { variables } = useValues(dashboardTemplateVariablesLogic)
+    const { snippetHosts } = useValues(sdksLogic)
+    const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
+    const { setBrowserUrl } = useActions(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true }))
+    const { browserUrl } = useValues(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true }))
 
     const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -26,27 +36,94 @@ export const OnboardingDashboardTemplateConfigureStep = ({
             title={activeDashboardTemplate?.template_name || 'Configure dashboard'}
             stepKey={stepKey}
             breadcrumbHighlightName={OnboardingStepKey.DASHBOARD_TEMPLATE}
-            continueOverride={
-                <LemonButton
-                    type="primary"
-                    onClick={() => {
-                        if (activeDashboardTemplate) {
-                            setIsSubmitting(true)
-                            createDashboardFromTemplate(activeDashboardTemplate, variables, false)
-                        }
-                    }}
-                    loading={isLoading}
-                >
-                    Create dashboard
-                </LemonButton>
-            }
+            fullWidth
+            continueOverride={<></>}
         >
             {isSubmitting || isLoading ? (
                 <p>Creating dashboard...</p>
             ) : (
                 <>
-                    <p>Select the events or website elements that represent important parts of your funnel.</p>
-                    <DashboardTemplateVariables />
+                    <div className="grid grid-cols-6 space-x-6 min-h-[80vh]">
+                        <div className="col-span-4 relative">
+                            {browserUrl ? (
+                                <div className="border border-1 border-border-bold p-2 rounded h-full w-full">
+                                    <IframedToolbarBrowser iframeRef={iframeRef} userIntent="add-action" />
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="absolute inset-0 bg-primary-alt-highlight z-10 rounded opacity-80 backdrop-filter backdrop-blur-md flex items-center justify-center" />
+                                    <div className="absolute inset-0 z-20 rounded flex items-center justify-center">
+                                        <LemonCard className="max-w-lg" hoverEffect={false}>
+                                            <h2>Select where you want to track events from.</h2>
+                                            <p>
+                                                Not seeing the site you want? Install posthog-js or the HTML snippet
+                                                wherever you want to track events, then come back here.
+                                            </p>
+                                            {snippetHosts.length > 0 ? (
+                                                <div className="space-y-2">
+                                                    {snippetHosts.map((host) => (
+                                                        <LemonButton
+                                                            key={`snippet-host-button-${host}`}
+                                                            type="tertiary"
+                                                            status="default"
+                                                            onClick={() => {
+                                                                addUrl(host)
+                                                                setBrowserUrl(host)
+                                                            }}
+                                                            sideIcon={<IconArrowRight />}
+                                                        >
+                                                            {host}
+                                                        </LemonButton>
+                                                    ))}
+                                                </div>
+                                            ) : (
+                                                <p>
+                                                    Hm, we're not finding any available hosts. Head back to the install
+                                                    step to install posthog-js in your frontend.
+                                                </p>
+                                            )}
+                                        </LemonCard>
+                                    </div>
+                                    <div className="space-y-6 relative m-6">
+                                        <LemonSkeleton className="h-10 rounded-lg w-1/3" />
+                                        <div className="space-y-2">
+                                            <LemonSkeleton repeat={5} />
+                                        </div>
+                                        <div className="space-y-2">
+                                            <LemonSkeleton repeat={3} />
+                                        </div>
+                                        <LemonSkeleton className="h-6 rounded-lg w-2/3" />
+                                        <div className="space-y-2">
+                                            <LemonSkeleton repeat={3} />
+                                        </div>
+                                        <LemonSkeleton className="h-10 rounded-lg w-2/3" />
+                                        <div className="space-y-2">
+                                            <LemonSkeleton repeat={5} />
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                        <div className="col-span-2">
+                            <DashboardTemplateVariables />
+                            <LemonButton
+                                type="primary"
+                                status="alt"
+                                onClick={() => {
+                                    if (activeDashboardTemplate) {
+                                        setIsSubmitting(true)
+                                        createDashboardFromTemplate(activeDashboardTemplate, variables, false)
+                                    }
+                                }}
+                                loading={isLoading}
+                                fullWidth
+                                center
+                                className="mt-6"
+                            >
+                                Create dashboard
+                            </LemonButton>
+                        </div>
+                    </div>
                 </>
             )}
         </OnboardingStep>
diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
index a46984ee8f897..0ab48594d2825 100644
--- a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -54,6 +54,7 @@ export const sdksLogic = kea<sdksLogicType>([
         setShowSideBySide: (showSideBySide: boolean) => ({ showSideBySide }),
         setPanel: (panel: 'instructions' | 'options') => ({ panel }),
         setHasSnippetEvents: (hasSnippetEvents: boolean) => ({ hasSnippetEvents }),
+        setSnippetHosts: (snippetHosts: string[]) => ({ snippetHosts }),
     }),
     reducers({
         sourceFilter: [
@@ -101,6 +102,12 @@ export const sdksLogic = kea<sdksLogicType>([
         hasSnippetEvents: {
             setHasSnippetEvents: (_, { hasSnippetEvents }) => hasSnippetEvents,
         },
+        snippetHosts: [
+            [] as string[],
+            {
+                setSnippetHosts: (_, { snippetHosts }) => snippetHosts,
+            },
+        ],
     }),
     selectors({
         showSourceOptionsSelect: [
@@ -112,7 +119,7 @@ export const sdksLogic = kea<sdksLogicType>([
             },
         ],
     }),
-    loaders({
+    loaders(({ actions }) => ({
         hasSnippetEvents: [
             null as boolean | null,
             {
@@ -120,23 +127,33 @@ export const sdksLogic = kea<sdksLogicType>([
                     const query: HogQLQuery = {
                         kind: NodeKind.HogQLQuery,
                         query: hogql`SELECT properties.$lib_version AS lib_version,
-                                            max(timestamp)          AS latest_timestamp,
-                                            count(lib_version) as count
-                                     FROM events
-                                     WHERE timestamp >= now() - INTERVAL 3 DAY
-                                       AND timestamp <= now()
-                                       AND properties.$lib = 'web'
-                                     GROUP BY lib_version
-                                     ORDER BY latest_timestamp DESC
-                                         limit 10`,
+                                        max(timestamp) AS latest_timestamp,
+                                        count(lib_version) AS count,
+                                        concat(
+                                            if(startsWith(properties.current_url, 'https://'), 'https://', 'http://'),
+                                            properties.$host
+                                        ) AS full_host
+                                    FROM events
+                                    WHERE timestamp >= now() - INTERVAL 3 DAY
+                                    AND timestamp <= now()
+                                    AND properties.$lib = 'web'
+                                    AND properties.$host is not null
+                                    GROUP BY lib_version, full_host
+                                    ORDER BY latest_timestamp DESC
+                                    LIMIT 10`,
                     }
 
                     const res = await api.query(query)
-                    return !!(res.results?.length ?? 0 > 0)
+                    const hasEvents = !!(res.results?.length ?? 0 > 0)
+                    const snippetHosts = res.results?.map((result) => result[3]).filter((val) => !!val) ?? []
+                    if (hasEvents) {
+                        actions.setSnippetHosts(snippetHosts)
+                    }
+                    return hasEvents
                 },
             },
         ],
-    }),
+    })),
     listeners(({ actions, values }) => ({
         filterSDKs: () => {
             const filteredSDks: SDK[] = allSDKs
diff --git a/frontend/src/toolbar/bar/toolbarLogic.ts b/frontend/src/toolbar/bar/toolbarLogic.ts
index 9512cfcfb5777..20148d0ca3b40 100644
--- a/frontend/src/toolbar/bar/toolbarLogic.ts
+++ b/frontend/src/toolbar/bar/toolbarLogic.ts
@@ -1,8 +1,8 @@
 import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { windowValues } from 'kea-window-values'
-import { PostHogAppToolbarEvent } from 'lib/components/heatmaps/utils'
 import { HedgehogActor } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
 import { SPRITE_SIZE } from 'lib/components/HedgehogBuddy/sprites/sprites'
+import { PostHogAppToolbarEvent } from 'lib/components/IframedToolbarBrowser/utils'
 
 import { actionsTabLogic } from '~/toolbar/actions/actionsTabLogic'
 import { elementsLogic } from '~/toolbar/elements/elementsLogic'
diff --git a/frontend/src/toolbar/elements/heatmapLogic.ts b/frontend/src/toolbar/elements/heatmapLogic.ts
index f297110587e1a..00ec34523bb62 100644
--- a/frontend/src/toolbar/elements/heatmapLogic.ts
+++ b/frontend/src/toolbar/elements/heatmapLogic.ts
@@ -14,7 +14,7 @@ import {
     HeatmapJsDataPoint,
     HeatmapRequestType,
 } from 'lib/components/heatmaps/types'
-import { calculateViewportRange, DEFAULT_HEATMAP_FILTERS } from 'lib/components/heatmaps/utils'
+import { calculateViewportRange, DEFAULT_HEATMAP_FILTERS } from 'lib/components/IframedToolbarBrowser/utils'
 import { dateFilterToText } from 'lib/utils'
 import { createVersionChecker } from 'lib/utils/semver'
 import { PostHog } from 'posthog-js'
diff --git a/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx b/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx
index dc7b06fd99540..49576459788c2 100644
--- a/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx
+++ b/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx
@@ -3,7 +3,7 @@ import { LemonTag, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { HeatmapsSettings } from 'lib/components/heatmaps/HeatMapsSettings'
-import { heatmapDateOptions } from 'lib/components/heatmaps/utils'
+import { heatmapDateOptions } from 'lib/components/IframedToolbarBrowser/utils'
 import { IconSync } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonInput } from 'lib/lemon-ui/LemonInput'