diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.test.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.test.tsx
deleted file mode 100644
index 52f405367f257..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import '../../../__mocks__/shallow_useeffect.mock';
-
-import React from 'react';
-
-import { EuiCodeBlock, EuiDescriptionListDescription } from '@elastic/eui';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-
-import { AnalyticsCollection } from '../../../../../common/types/analytics';
-
-import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate';
-
-describe('AnalyticsCollectionIntegrate', () => {
-  const analyticsCollections: AnalyticsCollection = {
-    event_retention_day_length: 180,
-    events_datastream: 'analytics-events-example',
-    id: '1',
-    name: 'example',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders', () => {
-    const wrapper = mountWithIntl(
-      <AnalyticsCollectionIntegrate collection={analyticsCollections} />
-    );
-    expect(wrapper.find(EuiCodeBlock)).toHaveLength(2);
-
-    expect(wrapper.find(EuiDescriptionListDescription).get(0)).toMatchInlineSnapshot(`
-          <EuiDescriptionListDescription>
-            /analytics/api/collections/1
-          </EuiDescriptionListDescription>
-      `);
-  });
-});
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.tsx
deleted file mode 100644
index 5a1f4c45bb9fe..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-import {
-  EuiCodeBlock,
-  EuiDescriptionList,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import { AnalyticsCollection } from '../../../../../common/types/analytics';
-import { getEnterpriseSearchUrl } from '../../../shared/enterprise_search_url';
-
-interface AnalyticsCollectionIntegrateProps {
-  collection: AnalyticsCollection;
-}
-
-export const AnalyticsCollectionIntegrate: React.FC<AnalyticsCollectionIntegrateProps> = ({
-  collection,
-}) => {
-  const analyticsDNSUrl = getEnterpriseSearchUrl(`/analytics/api/collections/${collection.id}`);
-  const credentials = [
-    {
-      title: i18n.translate(
-        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.collectionDns',
-        {
-          defaultMessage: 'DNS URL',
-        }
-      ),
-      description: analyticsDNSUrl,
-    },
-  ];
-  const webclientSrc = getEnterpriseSearchUrl('/analytics.js');
-
-  return (
-    <>
-      <EuiTitle>
-        <h4>
-          {i18n.translate(
-            'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.headingTitle',
-            {
-              defaultMessage: 'Credentials',
-            }
-          )}
-        </h4>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiPanel hasShadow={false} color="subdued" paddingSize="xl" grow={false}>
-        <EuiDescriptionList listItems={credentials} type="column" align="center" />
-      </EuiPanel>
-
-      <EuiSpacer size="l" />
-
-      <EuiTitle>
-        <h4>
-          {i18n.translate(
-            'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.headingTitle',
-            {
-              defaultMessage: 'Start tracking events',
-            }
-          )}
-        </h4>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText size="s">
-        <p>
-          {i18n.translate(
-            'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.description',
-            {
-              defaultMessage:
-                'Embed the JS snippet below on every page of the website or application you’d like to tracks.',
-            }
-          )}
-        </p>
-      </EuiText>
-      <EuiSpacer size="s" />
-      <EuiCodeBlock language="html" isCopyable>
-        {`<script src="${webclientSrc}" data-dsn="${analyticsDNSUrl}" defer></script>`}
-      </EuiCodeBlock>
-
-      <EuiSpacer size="l" />
-      <EuiText size="s">
-        <FormattedMessage
-          id="xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.scriptDescription"
-          defaultMessage="Track individual events, like clicks, by calling the {trackEvent} method."
-          values={{
-            trackEvent: <strong>trackEvent</strong>,
-          }}
-        />
-      </EuiText>
-      <EuiSpacer size="s" />
-      <EuiCodeBlock language="js" isCopyable>
-        {`window.elasticAnalytics.trackEvent("click", {
-  title: "Website Analytics",
-  url: "www.elastic.co/analytics/overview"
-})`}
-      </EuiCodeBlock>
-    </>
-  );
-};
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.test.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.test.tsx
new file mode 100644
index 0000000000000..8ba63eb5e3cc7
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '../../../../__mocks__/shallow_useeffect.mock';
+
+import React from 'react';
+
+import { EuiCodeBlock } from '@elastic/eui';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+
+import { AnalyticsCollection } from '../../../../../../common/types/analytics';
+
+import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate';
+
+describe('AnalyticsCollectionIntegrate', () => {
+  const analyticsCollections: AnalyticsCollection = {
+    event_retention_day_length: 180,
+    events_datastream: 'analytics-events-example',
+    id: '1',
+    name: 'example',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const wrapper = mountWithIntl(
+      <AnalyticsCollectionIntegrate collection={analyticsCollections} />
+    );
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(3);
+    wrapper.find('[data-test-subj="searchuiEmbed"]').at(0).simulate('click');
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(3);
+    wrapper.find('[data-test-subj="javascriptClientEmbed"]').at(0).simulate('click');
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(5);
+  });
+
+  it('check value of analyticsDNSUrl & webClientSrc', () => {
+    const wrapper = mountWithIntl(
+      <AnalyticsCollectionIntegrate collection={analyticsCollections} />
+    );
+    expect(wrapper.find(EuiCodeBlock).at(0).text()).toContain(
+      'data-dsn="/analytics/api/collections/1"'
+    );
+    expect(wrapper.find(EuiCodeBlock).at(0).text()).toContain('src="/analytics.js"');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.tsx
new file mode 100644
index 0000000000000..cd9789d0c9424
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiPanel, EuiSpacer, EuiSteps, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
+
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+
+import { AnalyticsCollection } from '../../../../../../common/types/analytics';
+import { getEnterpriseSearchUrl } from '../../../../shared/enterprise_search_url';
+
+import { javascriptClientEmbedSteps } from './analytics_collection_integrate_javascript_client_embed';
+import { javascriptEmbedSteps } from './analytics_collection_integrate_javascript_embed';
+import { searchUIEmbedSteps } from './analytics_collection_integrate_searchui';
+
+interface AnalyticsCollectionIntegrateProps {
+  collection: AnalyticsCollection;
+}
+
+export type TabKey = 'javascriptEmbed' | 'searchuiEmbed' | 'javascriptClientEmbed';
+
+export const AnalyticsCollectionIntegrate: React.FC<AnalyticsCollectionIntegrateProps> = ({
+  collection,
+}) => {
+  const analyticsDNSUrl = getEnterpriseSearchUrl(`/analytics/api/collections/${collection.id}`);
+  const webClientSrc = getEnterpriseSearchUrl('/analytics.js');
+
+  const [selectedTab, setSelectedTab] = React.useState<TabKey>('javascriptEmbed');
+
+  const tabs: Array<{
+    key: TabKey;
+    title: string;
+  }> = [
+    {
+      key: 'javascriptEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.title',
+        {
+          defaultMessage: 'Javascript Embed',
+        }
+      ),
+    },
+    {
+      key: 'javascriptClientEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.title',
+        {
+          defaultMessage: 'Javascript Client',
+        }
+      ),
+    },
+    {
+      key: 'searchuiEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchuiEmbed.title',
+        {
+          defaultMessage: 'Search UI',
+        }
+      ),
+    },
+  ];
+
+  const steps: Record<TabKey, EuiContainedStepProps[]> = {
+    javascriptClientEmbed: javascriptClientEmbedSteps(analyticsDNSUrl),
+    javascriptEmbed: javascriptEmbedSteps(webClientSrc, analyticsDNSUrl),
+    searchuiEmbed: searchUIEmbedSteps(setSelectedTab),
+  };
+
+  return (
+    <EuiPanel hasBorder paddingSize="l">
+      <EuiTitle size="s">
+        <h2>
+          {i18n.translate(
+            'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.title',
+            {
+              defaultMessage: 'Start tracking events',
+            }
+          )}
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiTabs>
+        {tabs.map((tab) => (
+          <EuiTab
+            key={tab.key}
+            onClick={() => {
+              setSelectedTab(tab.key);
+            }}
+            isSelected={selectedTab === tab.key}
+            data-test-subj={tab.key}
+            data-telemetry-id={`entSearch-analytics-integrate-${tab.key}-tab`}
+          >
+            {tab.title}
+          </EuiTab>
+        ))}
+      </EuiTabs>
+      <EuiSpacer size="xxl" />
+      <EuiSteps steps={steps[selectedTab]} />
+    </EuiPanel>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_client_embed.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_client_embed.tsx
new file mode 100644
index 0000000000000..4aa2b6865cd6b
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_client_embed.tsx
@@ -0,0 +1,187 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+export const javascriptClientEmbedSteps = (analyticsDNSUrl: string) => [
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepOne.title',
+      {
+        defaultMessage: 'Install client',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepOne.description',
+              {
+                defaultMessage:
+                  'Download the behavioral analytics javascript tracker client from NPM.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="bash" isCopyable>
+            {'npm install @elastic/behavioral-analytics-javascript-tracker'}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepTwo.title',
+      {
+        defaultMessage: 'Import the client',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepTwo.description',
+              {
+                defaultMessage: 'Import the client in your application.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="bash" isCopyable>
+            {`import {
+createTracker,
+trackPageView,
+trackEvent,
+} from "@elastic/behavioural-analytics-javascript-tracker";`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepThree.title',
+      {
+        defaultMessage: 'Initialize the client',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepThree.description',
+              {
+                defaultMessage:
+                  ' Use createTracker method to initialize the tracker with your DSN. You will then be able to use the tracker to send events to Behavioural Analytics.',
+              }
+            )}
+          </p>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepThree.descriptionTwo',
+              {
+                defaultMessage:
+                  'Once you have called createTracker, you can use the tracker methods such as trackPageView to send events to Behavioural Analytics.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="javascript" isCopyable>
+            {`createTracker({
+dsn: "${analyticsDNSUrl}",
+});`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepFour.title',
+      {
+        defaultMessage: 'Dispatch Pageview and behavior events',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepFour.description',
+              {
+                defaultMessage:
+                  'Once you have called createTracker, you can use the tracker methods such as trackPageView to send events to Behavioural Analytics.',
+              }
+            )}
+          </p>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepFour.descriptionTwo',
+              {
+                defaultMessage:
+                  'Once initialized, you will be able to track page views in your application.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="javascript" isCopyable>
+            {`// track a page view in React
+
+const SearchPage = (props) => {
+useEffect(() => {
+trackPageView();
+}, []);
+
+return (
+<div>
+  <h1>Search Page</h1>
+  <
+</div>
+);
+};`}
+          </EuiCodeBlock>
+          <EuiSpacer size="m" />
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.stepFour.descriptionThree',
+              {
+                defaultMessage:
+                  'You can also dispatch custom events to Behavioural Analytics by calling the trackEvent method.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="javascript" isCopyable>
+            {`// track a custom event in React
+import { trackEvent } from '@elastic/behavioural-analytics-javascript-tracker';
+
+const ProductDetailPage = (props) => {
+
+return (
+<div>
+  <h1>Product detail page</h1>
+  <input type="button" onClick={() => {
+    trackEvent("click", {
+      category: "product",
+      action: "add_to_cart",
+      label: "product_id",
+      value: "123"
+    })
+  }} />
+  }}>Add to Basket</input>
+</div>
+)
+}`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+];
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_embed.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_embed.tsx
new file mode 100644
index 0000000000000..0cd91a14b4e21
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_javascript_embed.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiCodeBlock, EuiLink, EuiText } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export const javascriptEmbedSteps = (webClientSrc: string, analyticsDNSUrl: string) => [
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepOne.title',
+      {
+        defaultMessage: 'Embed onto site',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepOne.description',
+              {
+                defaultMessage:
+                  'Embed the behavioral analytics JavaScript snippet on every page of the website or application you’d like to track.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="html" isCopyable>
+            {`<script src="${webClientSrc}" data-dsn="${analyticsDNSUrl}"></script>`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepTwo.title',
+      {
+        defaultMessage: 'Initialize the client',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepTwo.description',
+              {
+                defaultMessage:
+                  'You must initialize the client before you can track events. We recommend initializing just below the script tag.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="html" isCopyable>
+            {'<script type="text/javascript">window.elasticAnalytics.createTracker();</script>'}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchuiEmbed.stepThree.title',
+      {
+        defaultMessage: 'Track individual events',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepThree.description"
+              defaultMessage="Track individual events, like clicks, by calling the trackEvent method. {link}"
+              values={{
+                link: (
+                  <EuiLink
+                    href="http://www.elastic.co"
+                    target="_blank"
+                    data-telemetry-id={
+                      'entSearch-analytics-integrate-javascriptEmbed-trackEventDocumentationLink'
+                    }
+                  >
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.stepThree.link',
+                      {
+                        defaultMessage: 'Learn more about tracking events',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+          <EuiCodeBlock language="html" isCopyable>
+            {`<script src="${webClientSrc}" data-dsn="${analyticsDNSUrl}" defer></script>`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+];
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_searchui.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_searchui.tsx
new file mode 100644
index 0000000000000..b12dbc6e45773
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/analytics_collection_integrate_searchui.tsx
@@ -0,0 +1,129 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiCodeBlock, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { TabKey } from './analytics_collection_integrate';
+
+export const searchUIEmbedSteps = (setSelectedTab: (tab: TabKey) => void) => [
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchuiEmbed.stepOne.title',
+      {
+        defaultMessage: 'Embed Behavioral Analytics',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepOne.description"
+              defaultMessage="Follow the instructions to embed Behavioral Analytics into your site via {embedLink} or {clientLink}."
+              values={{
+                embedLink: (
+                  <EuiLink
+                    data-telemetry-id={'entSearch-analytics-integrate-javascriptClientEmbed-tab'}
+                    onClick={() => {
+                      setSelectedTab('javascriptClientEmbed');
+                    }}
+                  >
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepOne.embedLink',
+                      {
+                        defaultMessage: 'Javascript Embed',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+                clientLink: (
+                  <EuiLink
+                    data-telemetry-id={'entSearch-analytics-integrate-javascriptEmbed-tab'}
+                    onClick={() => {
+                      setSelectedTab('javascriptEmbed');
+                    }}
+                  >
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepOne.clientLink',
+                      {
+                        defaultMessage: 'Javascript Client',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    title: i18n.translate(
+      'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchuiEmbed.stepTwo.title',
+      {
+        defaultMessage: 'Install Search UI Behavioral Analytics Plugin',
+      }
+    ),
+    children: (
+      <>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepTwo.description',
+              {
+                defaultMessage: 'Download the Behavioral Analytics plugin from NPM.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="bash" isCopyable>
+            {'npm install @elastic/search-ui-analytics-plugin'}
+          </EuiCodeBlock>
+          <EuiSpacer size="m" />
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepTwo.importDescription',
+              {
+                defaultMessage: 'Then import the Behavioral Analytics plugin into your app.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="javascript" isCopyable>
+            {'import AnalyticsPlugin from "@elastic/search-ui-analytics-plugin";'}
+          </EuiCodeBlock>
+          <EuiSpacer size="m" />
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchui.stepTwo.setupDescription',
+              {
+                defaultMessage:
+                  'Finally, add the plugin to your Search UI configuration. Depending on how you have embedded Behavioural analytics, you may need to pass in the client. The example below shows how to pass in the client when using the Javascript client.',
+              }
+            )}
+          </p>
+          <EuiCodeBlock language="javascript" isCopyable>
+            {`
+import { getTracker } from "@elastic/behavioral-analytics-tracker";
+
+const searchUIConfig = {
+...
+plugins: [AnalyticsPlugin(
+client: getTracker();
+)],
+...
+}`}
+          </EuiCodeBlock>
+        </EuiText>
+      </>
+    ),
+  },
+];
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.test.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.test.tsx
index 6fc82551818ce..95e26ec8171d3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.test.tsx
@@ -16,7 +16,7 @@ import { shallow } from 'enzyme';
 
 import { AnalyticsCollection } from '../../../../../common/types/analytics';
 
-import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate';
+import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate/analytics_collection_integrate';
 import { AnalyticsCollectionSettings } from './analytics_collection_settings';
 
 import { AnalyticsCollectionView } from './analytics_collection_view';
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.tsx
index 7f9966037407a..adc2b173e5b90 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_view.tsx
@@ -21,7 +21,7 @@ import { COLLECTION_CREATION_PATH, COLLECTION_VIEW_PATH } from '../../routes';
 import { EnterpriseSearchAnalyticsPageTemplate } from '../layout/page_template';
 
 import { AnalyticsCollectionEvents } from './analytics_collection_events';
-import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate';
+import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate/analytics_collection_integrate';
 import { AnalyticsCollectionSettings } from './analytics_collection_settings';
 
 import { FetchAnalyticsCollectionLogic } from './fetch_analytics_collection_logic';
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 1bbe3e7601978..4d232284244a2 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -10990,10 +10990,6 @@
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.eventName": "Nom de l'événement",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.userUuid": "UUID d'utilisateur",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.headingTitle": "Collections",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.collectionDns": "URL DNS",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.headingTitle": "Informations d'identification",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.description": "Incorporez l'extrait JS ci-dessous dans chaque page du site web ou de l'application que vous souhaitez suivre.",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.headingTitle": "Commencer à suivre les événements",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.buttonTitle": "Supprimer cette collection",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.headingTitle": "Supprimer cette collection d'analyses",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.warning": "Cette action est irréversible",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index abfa458676c23..2f8fe3338e9b2 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10977,10 +10977,6 @@
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.eventName": "イベント名",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.userUuid": "ユーザーUUID",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.headingTitle": "コレクション",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.collectionDns": "DNS URL",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.headingTitle": "資格情報",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.description": "追跡したいWebサイトまたはアプリケーションのすべてのページで、以下のJSスニペットを埋め込みます。",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.headingTitle": "追跡イベントの開始",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.buttonTitle": "このコレクションを削除",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.headingTitle": "この分析コレクションを削除",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.warning": "この操作は元に戻すことができません",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 7c7b30bc9e12a..b1ee1a34a5bcf 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10994,10 +10994,6 @@
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.eventName": "事件名称",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.eventsTab.columns.userUuid": "用户 UUID",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.headingTitle": "集合",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.collectionDns": "DNS URL",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.credentials.headingTitle": "凭据",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.description": "在您要跟踪的每个网站页面或应用程序上嵌入以下 JS 代码片段。",
-    "xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.embed.headingTitle": "开始跟踪事件",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.buttonTitle": "删除此集合",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.headingTitle": "删除此分析集合",
     "xpack.enterpriseSearch.analytics.collections.collectionsView.settingsTab.delete.warning": "此操作不可逆",