diff --git a/packages/gatsby-theme-docs/src/components/user-guiding.js b/packages/gatsby-theme-docs/src/components/user-guiding.js
new file mode 100644
index 0000000000..c6518e6d28
--- /dev/null
+++ b/packages/gatsby-theme-docs/src/components/user-guiding.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { Script } from 'gatsby';
+
+const UserGuiding = (props) => {
+  return props.ugId ? (
+    <Script
+      src={`https://static.userguiding.com/media/user-guiding-${props.ugId}-embedded.js`}
+    />
+  ) : null;
+};
+
+UserGuiding.propTypes = {
+  ugId: PropTypes.string,
+};
+
+export default UserGuiding;
diff --git a/packages/gatsby-theme-docs/src/templates/homepage.js b/packages/gatsby-theme-docs/src/templates/homepage.js
index 9d52a29664..edb7a7a455 100644
--- a/packages/gatsby-theme-docs/src/templates/homepage.js
+++ b/packages/gatsby-theme-docs/src/templates/homepage.js
@@ -9,6 +9,7 @@ import { PageDataContext } from '../hooks/use-page-data';
 import LayoutContentHomepage from '../layouts/content-homepage';
 import { SEO, ThemeProvider } from '../components';
 import markdownComponents from '../markdown-components';
+import UserGuiding from '../components/user-guiding';
 
 const HomepageTemplate = (props) => (
   <IntlProvider locale="en">
@@ -69,6 +70,7 @@ export function Head({ data, pageContext }) {
         // eslint-disable-next-line react/prop-types
         excludeFromSearchIndex={data.contentPage.excludeFromSearchIndex}
       />
+      <UserGuiding ugId={'U4I78799B6RID'} />
     </ThemeProvider>
   );
 }
diff --git a/packages/gatsby-theme-docs/src/templates/page-content.js b/packages/gatsby-theme-docs/src/templates/page-content.js
index f1d7130f20..9530f88edb 100644
--- a/packages/gatsby-theme-docs/src/templates/page-content.js
+++ b/packages/gatsby-theme-docs/src/templates/page-content.js
@@ -10,6 +10,7 @@ import { SEO, ThemeProvider } from '../components';
 import markdownComponents from '../markdown-components';
 import { PageDataContext } from '../hooks/use-page-data';
 import ChildSectionsNav from '../components/child-sections-nav';
+import UserGuiding from '../components/user-guiding';
 
 const ContentCards = (props) => (
   <markdownComponents.Cards fitContentColumn={true} {...props} />
@@ -82,6 +83,7 @@ export function Head({ data, pageContext }) {
         // eslint-disable-next-line react/prop-types
         excludeFromSearchIndex={data.contentPage.excludeFromSearchIndex}
       />
+      <UserGuiding ugId={'U4I78799B6RID'} />
     </ThemeProvider>
   );
 }
diff --git a/packages/gatsby-theme-docs/src/templates/release-notes-detail.js b/packages/gatsby-theme-docs/src/templates/release-notes-detail.js
index 3b431d5456..dd5e3e8467 100644
--- a/packages/gatsby-theme-docs/src/templates/release-notes-detail.js
+++ b/packages/gatsby-theme-docs/src/templates/release-notes-detail.js
@@ -9,6 +9,7 @@ import LayoutReleaseNotesDetail from '../layouts/release-notes-detail';
 import LayoutReleaseNoteBody from '../layouts/internals/layout-release-note-body';
 import { SEO, ThemeProvider } from '../components';
 import markdownComponents from '../markdown-components';
+import UserGuiding from '../components/user-guiding';
 
 const releaseNoteMarkdownComponents = {
   ...markdownComponents,
@@ -68,6 +69,7 @@ export function Head({ data }) {
         // eslint-disable-next-line react/prop-types
         excludeFromSearchIndex={data.releaseNotePage.excludeFromSearchIndex}
       />
+      <UserGuiding ugId={'U4I78799B6RID'} />
     </ThemeProvider>
   );
 }
diff --git a/packages/gatsby-theme-docs/src/templates/release-notes-list.js b/packages/gatsby-theme-docs/src/templates/release-notes-list.js
index 3cb25225dc..63ad4b9acf 100644
--- a/packages/gatsby-theme-docs/src/templates/release-notes-list.js
+++ b/packages/gatsby-theme-docs/src/templates/release-notes-list.js
@@ -12,6 +12,7 @@ import { SEO, ThemeProvider } from '../components';
 import markdownComponents from '../markdown-components';
 import useFilteredReleaseNotes from '../hooks/use-filtered-release-notes';
 import GatsbyLink from '../components/link';
+import UserGuiding from '../components/user-guiding';
 
 const ReleaseNotesListTemplate = (props) => {
   const filteredReleaseNotes = useFilteredReleaseNotes(
@@ -98,6 +99,7 @@ export function Head({ data }) {
         // eslint-disable-next-line react/prop-types
         excludeFromSearchIndex={data.contentPage.excludeFromSearchIndex}
       />
+      <UserGuiding ugId={'U4I78799B6RID'} />
     </ThemeProvider>
   );
 }