diff --git a/README.md b/README.md
index 4eb7ca134..8b142c643 100644
--- a/README.md
+++ b/README.md
@@ -69,12 +69,11 @@ Note: there is a test account you can use. Get this from another developer if yo
 - `DATADOG_APP_ID` - Datadog tracking application ID.
 - `DATADOG_CLIENT_TOKEN` - Datadog tracking client token.
 - `DD_ENV` - Datadog environment.
-- `BEACON_TOKEN` - HelpScout beacon token
-- `HS_CONTACTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the contacts page
-- `HS_CONTACTS_CONTACT_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the contact page
-- `HS_HOME_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the dashboard page
-- `HS_REPORTS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the reports pages
-- `HS_TASKS_SUGGESTIONS` - Comma-separated IDs of the HelpScout articles to suggest on the tasks page
+- `HELPJUICE_ORIGIN` - Helpjuice origin for documentation and user support (example: `https://www.helpducks.org`)
+- `HELPJUICE_KNOWLEDGE_BASE_URL` - Knowledge base page to make the Helpjuice "Visit Knowledge Base" page link to (example: `https://www.helpducks.org/mpdx`)
+- `HELP_URL_COACHING_ACTIVITY` - Link to an article explaining the coaching activity table
+- `HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS` - Link to an article explaining the coaching appointments and results table
+- `HELP_URL_SETUP_FIND_ORGANIZATION` - Link to an article explaining how to find an organization
 - `PRIVACY_POLICY_URL` - URL of the privacy policy
 - `TERMS_OF_USE_URL` - URL of the terms of use
 - `DISABLE_SETUP_TOUR` - Set to `true` to disable starting users on the welcome tour. This should be removed from the codebase once tools are live.
diff --git a/__tests__/util/setup.ts b/__tests__/util/setup.ts
index c6b0ece87..379081a5c 100644
--- a/__tests__/util/setup.ts
+++ b/__tests__/util/setup.ts
@@ -25,8 +25,6 @@ expect.extend({
   toHaveGraphqlOperation,
 });
 
-window.Beacon = jest.fn();
-
 window.document.createRange = (): Range =>
   ({
     setStart: jest.fn(),
diff --git a/next.config.js b/next.config.js
index 07e076370..1661c7226 100644
--- a/next.config.js
+++ b/next.config.js
@@ -41,7 +41,6 @@ const config = {
     SITE_URL: siteUrl,
     CLIENT_ID: process.env.CLIENT_ID ?? '4027334344069527005',
     CLIENT_SECRET: process.env.CLIENT_SECRET,
-    BEACON_TOKEN: process.env.BEACON_TOKEN,
     AUTH_PROVIDER: process.env.AUTH_PROVIDER ?? 'OKTA',
     OKTA_CLIENT_ID: process.env.OKTA_CLIENT_ID ?? '0oa1n0gjoy3j5Ycdg0h8',
     OKTA_CLIENT_SECRET: process.env.OKTA_CLIENT_SECRET,
@@ -76,25 +75,13 @@ const config = {
         process.env.DATADOG_APP_ID &&
         process.env.DATADOG_CLIENT_TOKEN,
     ).toString(),
-    HS_COACHING_ACTIVITY_SUMMARY: process.env.HS_COACHING_ACTIVITY_SUMMARY,
-    HS_COACHING_ACTIVITY: process.env.HS_COACHING_ACTIVITY,
-    HS_COACHING_APPOINTMENTS_AND_RESULTS:
-      process.env.HS_COACHING_APPOINTMENTS_AND_RESULTS,
-    HS_COACHING_COMMITMENTS: process.env.HS_COACHING_COMMITMENTS,
-    HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS:
-      process.env.HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS,
-    HS_COACHING_OUTSTANDING_SPECIAL_NEEDS:
-      process.env.HS_COACHING_OUTSTANDING_SPECIAL_NEEDS,
-    HS_COACHING_SUGGESTIONS: process.env.HS_COACHING_SUGGESTIONS,
-    HS_CONTACTS_CONTACT_SUGGESTIONS:
-      process.env.HS_CONTACTS_CONTACT_SUGGESTIONS,
-    HS_CONTACTS_SUGGESTIONS: process.env.HS_CONTACTS_SUGGESTIONS,
-    HS_HOME_SUGGESTIONS: process.env.HS_HOME_SUGGESTIONS,
-    HS_REPORTS_SUGGESTIONS: process.env.HS_REPORTS_SUGGESTIONS,
-    HS_TASKS_SUGGESTIONS: process.env.HS_TASKS_SUGGESTIONS,
-    HS_SETTINGS_SERVICES_SUGGESTIONS:
-      process.env.HS_SETTINGS_SERVICES_SUGGESTIONS,
-    HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION,
+    HELPJUICE_ORIGIN: process.env.HELPJUICE_ORIGIN,
+    HELPJUICE_KNOWLEDGE_BASE_URL: process.env.HELPJUICE_KNOWLEDGE_BASE_URL,
+    HELP_URL_COACHING_ACTIVITY: process.env.HELP_URL_COACHING_ACTIVITY,
+    HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS:
+      process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS,
+    HELP_URL_SETUP_FIND_ORGANIZATION:
+      process.env.HELP_URL_SETUP_FIND_ORGANIZATION,
     ALERT_MESSAGE: process.env.ALERT_MESSAGE,
     PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
     TERMS_OF_USE_URL: process.env.TERMS_OF_USE_URL,
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
index 9cef845a7..20d37f3b7 100644
--- a/pages/_app.page.tsx
+++ b/pages/_app.page.tsx
@@ -21,7 +21,7 @@ import { I18nextProvider, useTranslation } from 'react-i18next';
 import Rollbar from 'rollbar';
 import DataDog from 'src/components/DataDog/DataDog';
 import { GlobalStyles } from 'src/components/GlobalStyles/GlobalStyles';
-import HelpscoutBeacon from 'src/components/Helpscout/HelpscoutBeacon';
+import { Helpjuice } from 'src/components/Helpjuice/Helpjuice';
 import PrimaryLayout from 'src/components/Layouts/Primary';
 import Loading from 'src/components/Loading';
 import { RouterGuard } from 'src/components/RouterGuard/RouterGuard';
@@ -36,7 +36,7 @@ import { useRequiredSession } from 'src/hooks/useRequiredSession';
 import makeClient from 'src/lib/apollo/client';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import './helpscout.css';
+import './helpjuice.css';
 import './print.css';
 
 export type PageWithLayout = NextPage & {
@@ -170,7 +170,6 @@ const App = ({
         <ErrorBoundary>
           <AppSettingsProvider>
             <SessionProvider session={session}>
-              <HelpscoutBeacon />
               <I18nextProvider i18n={i18n}>
                 <StyledEngineProvider injectFirst>
                   <CacheProvider value={emotionCache}>
@@ -203,6 +202,7 @@ const App = ({
                 </StyledEngineProvider>
               </I18nextProvider>
               <DataDog />
+              <Helpjuice />
             </SessionProvider>
             {process.env.ALERT_MESSAGE ? (
               <AlertBanner
diff --git a/pages/_document.page.tsx b/pages/_document.page.tsx
index 156e8c914..cbfad50db 100644
--- a/pages/_document.page.tsx
+++ b/pages/_document.page.tsx
@@ -22,6 +22,33 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap"
             rel="stylesheet"
           />
+          {process.env.HELPJUICE_ORIGIN && (
+            <link
+              rel="stylesheet"
+              href={`${process.env.HELPJUICE_ORIGIN}/swifty.css`}
+            />
+          )}
+          {/* The swifty.js script initializes in response to a DOMContentLoaded
+           * event, but that event has fired by the time the script is executed
+           * when using the Next.js <Script> component. To workaround this, we
+           * have to use a native <script> element and cannot use async or
+           * defer. This is not ideal for first-load performance and should be
+           * switched to <Script> as soon as Helpjuice can fix their swifty.js
+           * script.
+           */}
+          {process.env.HELPJUICE_ORIGIN && (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `window.helpjuice_account_url = '${process.env.HELPJUICE_ORIGIN}';
+window.helpjuice_contact_us_url = '${process.env.HELPJUICE_ORIGIN}/contact-us';
+window.helpjuiceSwiftyConfig = { widgetPosition: 'bottomRight' };
+window.helpjuiceSwiftyUrlMap = {};`,
+              }}
+            />
+          )}
+          {process.env.HELPJUICE_ORIGIN && (
+            <script src={`${process.env.HELPJUICE_ORIGIN}/swifty.js`} />
+          )}
           {process.env.DATADOG_CONFIGURED === 'true' && (
             <Script id="datadog-rum" strategy="afterInteractive">
               {`!function(a,e,t,n,s){a=a[s]=a[s]||{q:[],onReady:function(e){a.q.push(e)}},(s=e.createElement(t)).async=1,s.src=n,(n=e.getElementsByTagName(t)[0]).parentNode.insertBefore(s,n)}(window,document,"script","https://www.datadoghq-browser-agent.com/datadog-rum-v5.js","DD_RUM"),DD_RUM.onReady(function(){DD_RUM.init({clientToken:"${process.env.DATADOG_CLIENT_TOKEN}",applicationId:"${process.env.DATADOG_APP_ID}",site:"datadoghq.com",service:"mpdx-web-react",sessionSampleRate:100,sessionReplaySampleRate:20,trackUserInteractions:!0,trackResources:!0,trackLongTasks:!0,defaultPrivacyLevel:"mask-user-input",env:"${process.env.DD_ENV}",allowedTracingUrls:["${process.env.API_URL}"]})});`}
diff --git a/pages/accountLists/[accountListId].page.tsx b/pages/accountLists/[accountListId].page.tsx
index bbc4df317..b1ed999e5 100644
--- a/pages/accountLists/[accountListId].page.tsx
+++ b/pages/accountLists/[accountListId].page.tsx
@@ -11,7 +11,6 @@ import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import useTaskModal from 'src/hooks/useTaskModal';
 import makeSsrClient from 'src/lib/apollo/ssrClient';
-import { suggestArticles } from 'src/lib/helpScout';
 import {
   GetDashboardDocument,
   GetDashboardQuery,
@@ -33,10 +32,6 @@ const AccountListIdPage = ({
     useState<AddMenuItemsEnum | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  useEffect(() => {
-    suggestArticles('HS_HOME_SUGGESTIONS');
-  }, []);
-
   useEffect(() => {
     if (!modal || dialogOpen) {
       return;
diff --git a/pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx b/pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx
index 729776471..b68b343c4 100644
--- a/pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx
+++ b/pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx
@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext';
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
-import { suggestArticles } from 'src/lib/helpScout';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 
 interface Props {
@@ -45,12 +44,6 @@ export const ContactsWrapper: React.FC<Props> = ({ children }) => {
     });
   }, [sanitizedFilters, isReady]);
 
-  useEffect(() => {
-    suggestArticles(
-      contactId ? 'HS_CONTACTS_CONTACT_SUGGESTIONS' : 'HS_CONTACTS_SUGGESTIONS',
-    );
-  }, [contactId]);
-
   return (
     <ContactsProvider
       urlFilters={urlFilters}
diff --git a/pages/accountLists/[accountListId]/reports/coaching.page.tsx b/pages/accountLists/[accountListId]/reports/coaching.page.tsx
index 7b0fa12f8..f773525b3 100644
--- a/pages/accountLists/[accountListId]/reports/coaching.page.tsx
+++ b/pages/accountLists/[accountListId]/reports/coaching.page.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import {
@@ -9,17 +9,12 @@ import {
 import Loading from 'src/components/Loading';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const CoachingReportPage = (): ReactElement => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
   const { appName } = useGetAppSettings();
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   return (
     <>
       <Head>
diff --git a/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx b/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx
index df3626875..077d4fb14 100644
--- a/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx
+++ b/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@ import {
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const DesignationAccountsReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -26,10 +25,6 @@ const DesignationAccountsReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };
diff --git a/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx
index 20945c7fc..34ff82c32 100644
--- a/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx
+++ b/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,6 @@ import {
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -31,10 +30,6 @@ const DonationsReportPage: React.FC = () => {
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const selectedContactId = getQueryParam(router.query, 'contactId');
 
   const handleNavListToggle = () => {
diff --git a/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx b/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx
index 25b2651c5..5cd5b07f0 100644
--- a/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx
+++ b/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,6 @@ import {
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const ExpectedMonthlyTotalReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -27,10 +26,6 @@ const ExpectedMonthlyTotalReportPage = (): ReactElement => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };
diff --git a/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx
index 277ee217f..0adaa6ba8 100644
--- a/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx
+++ b/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,6 @@ import {
 import { FourteenMonthReportCurrencyType } from 'src/graphql/types.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -33,10 +32,6 @@ const PartnerCurrencyReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };
diff --git a/pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx
index bbdd7426b..eb1ac7e87 100644
--- a/pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx
+++ b/pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { sortBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { ReportContactFilterSetInput } from 'pages/api/graphql-rest.page.generated';
@@ -22,7 +22,6 @@ import {
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useDebouncedValue } from 'src/hooks/useDebounce';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { useContactFiltersQuery } from '../../contacts/Contacts.generated';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
@@ -87,10 +86,6 @@ const PartnerGivingAnalysisReportPage: React.FC = () => {
     return [reportFilterGroup, ...groups];
   }, [filterData]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleSelectContact = (contactId: string) => {
     router.push(
       `/accountLists/${accountListId}/reports/partnerGivingAnalysis/${contactId}`,
diff --git a/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx b/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx
index 0eba1be51..b5d0044ce 100644
--- a/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx
+++ b/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@ import {
 } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 
 const ResponsibilityCentersReportPageWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.common.white,
@@ -26,10 +25,6 @@ const ResponsibilityCentersReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };
diff --git a/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx
index b143d37ac..843902adc 100644
--- a/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx
+++ b/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,6 @@ import {
 import { FourteenMonthReportCurrencyType } from 'src/graphql/types.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { getQueryParam } from 'src/utils/queryParam';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
 
@@ -33,10 +32,6 @@ const SalaryCurrencyReportPage: React.FC = () => {
   const [isNavListOpen, setNavListOpen] = useState<boolean>(false);
   const [designationAccounts, setDesignationAccounts] = useState<string[]>([]);
 
-  useEffect(() => {
-    suggestArticles('HS_REPORTS_SUGGESTIONS');
-  }, []);
-
   const handleNavListToggle = () => {
     setNavListOpen(!isNavListOpen);
   };
diff --git a/pages/accountLists/[accountListId]/settings/admin.page.test.tsx b/pages/accountLists/[accountListId]/settings/admin.page.test.tsx
index 114019b27..8d90b7038 100644
--- a/pages/accountLists/[accountListId]/settings/admin.page.test.tsx
+++ b/pages/accountLists/[accountListId]/settings/admin.page.test.tsx
@@ -6,18 +6,14 @@ import { SnackbarProvider } from 'notistack';
 import { I18nextProvider } from 'react-i18next';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { suggestArticles } from 'src/lib/helpScout';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import Admin, { suggestedArticles } from './admin.page';
+import Admin from './admin.page';
 
 jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -62,13 +58,6 @@ describe('Admin', () => {
     });
   });
 
-  it('should fire suggestArticles on intital render', async () => {
-    render(<Components />);
-    await waitFor(() =>
-      expect(suggestArticles).toHaveBeenCalledWith(suggestedArticles),
-    );
-  });
-
   it('should keep impersonate user accordion close', async () => {
     const { getAllByText } = render(<Components />);
     await waitFor(() => {
diff --git a/pages/accountLists/[accountListId]/settings/admin.page.tsx b/pages/accountLists/[accountListId]/settings/admin.page.tsx
index e855faf64..fc402ad70 100644
--- a/pages/accountLists/[accountListId]/settings/admin.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/admin.page.tsx
@@ -1,11 +1,10 @@
 import { useRouter } from 'next/router';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { enforceAdmin } from 'pages/api/utils/pagePropsHelpers';
 import { ImpersonateUserAccordion } from 'src/components/Settings/Admin/ImpersonateUser/ImpersonateUserAccordion';
 import { ResetAccountAccordion } from 'src/components/Settings/Admin/ResetAccount/ResetAccountAccordion';
 import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from './Wrapper';
 
 export const suggestedArticles = 'HS_SETTINGS_SERVICES_SUGGESTIONS';
@@ -19,10 +18,6 @@ const Admin = (): ReactElement => {
       : 'Impersonate User',
   );
 
-  useEffect(() => {
-    suggestArticles(suggestedArticles);
-  }, []);
-
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
diff --git a/pages/accountLists/[accountListId]/settings/integrations/index.page.tsx b/pages/accountLists/[accountListId]/settings/integrations/index.page.tsx
index ae632395f..5ad22ca8e 100644
--- a/pages/accountLists/[accountListId]/settings/integrations/index.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/integrations/index.page.tsx
@@ -17,7 +17,6 @@ import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/Accordion
 import { StickyBox } from 'src/components/Shared/Header/styledComponents';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from '../Wrapper';
 
 const Integrations: React.FC = () => {
@@ -65,9 +64,6 @@ const Integrations: React.FC = () => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
   };
-  useEffect(() => {
-    suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
-  }, []);
 
   useEffect(() => {
     if (onSetupTour) {
diff --git a/pages/accountLists/[accountListId]/settings/manageAccounts.page.test.tsx b/pages/accountLists/[accountListId]/settings/manageAccounts.page.test.tsx
index 17f1dc1f4..5921e894e 100644
--- a/pages/accountLists/[accountListId]/settings/manageAccounts.page.test.tsx
+++ b/pages/accountLists/[accountListId]/settings/manageAccounts.page.test.tsx
@@ -5,17 +5,13 @@ import { SnackbarProvider } from 'notistack';
 import { I18nextProvider } from 'react-i18next';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { suggestArticles } from 'src/lib/helpScout';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import ManageAccounts, { suggestedArticles } from './manageAccounts.page';
+import ManageAccounts from './manageAccounts.page';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -49,13 +45,6 @@ describe('ManageAccounts', () => {
     });
   });
 
-  it('should fire suggestArticles on initial render', async () => {
-    render(<Components />);
-    await waitFor(() =>
-      expect(suggestArticles).toHaveBeenCalledWith(suggestedArticles),
-    );
-  });
-
   it('should open `Manage Account Access` accordion', async () => {
     const { getAllByText } = render(<Components />);
     await waitFor(() => {
diff --git a/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx b/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx
index 3d875d226..1e8de017b 100644
--- a/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx
@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import { ManageAccountAccessAccordion } from 'src/components/Settings/Accounts/ManageAccountAccess/ManageAccountAccessAccordion';
 import { MergeAccountsAccordion } from 'src/components/Settings/Accounts/MergeAccounts/MergeAccountsAccordion';
 import { MergeSpouseAccountsAccordion } from 'src/components/Settings/Accounts/MergeSpouseAccounts/MergeSpouseAccountsAccordion';
 import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from './Wrapper';
 
 export const suggestedArticles = 'HS_SETTINGS_SERVICES_SUGGESTIONS';
@@ -20,10 +19,6 @@ const ManageAccounts = (): ReactElement => {
       : 'Manage Account Access',
   );
 
-  useEffect(() => {
-    suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
-  }, []);
-
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
diff --git a/pages/accountLists/[accountListId]/settings/manageCoaches.page.test.tsx b/pages/accountLists/[accountListId]/settings/manageCoaches.page.test.tsx
index 9282f2a59..732e23b1f 100644
--- a/pages/accountLists/[accountListId]/settings/manageCoaches.page.test.tsx
+++ b/pages/accountLists/[accountListId]/settings/manageCoaches.page.test.tsx
@@ -5,17 +5,13 @@ import { SnackbarProvider } from 'notistack';
 import { I18nextProvider } from 'react-i18next';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { suggestArticles } from 'src/lib/helpScout';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import ManageCoaching, { suggestedArticles } from './manageCoaches.page';
+import ManageCoaching from './manageCoaches.page';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -49,13 +45,6 @@ describe('ManageCoaching', () => {
     });
   });
 
-  it('should fire suggestArticles on initial render', async () => {
-    render(<Components />);
-    await waitFor(() =>
-      expect(suggestArticles).toHaveBeenCalledWith(suggestedArticles),
-    );
-  });
-
   it('should open Coaching Access accordion', async () => {
     const { getAllByText } = render(<Components />);
     await waitFor(() => {
diff --git a/pages/accountLists/[accountListId]/settings/manageCoaches.page.tsx b/pages/accountLists/[accountListId]/settings/manageCoaches.page.tsx
index 771adf082..f154a57f9 100644
--- a/pages/accountLists/[accountListId]/settings/manageCoaches.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/manageCoaches.page.tsx
@@ -1,14 +1,11 @@
 import { useRouter } from 'next/router';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import { ManageCoachesAccessAccordion } from 'src/components/Settings/Coaches/ManageCoachesAccess/ManageCoachesAccessAccordion';
 import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from './Wrapper';
 
-export const suggestedArticles = 'HS_SETTINGS_SERVICES_SUGGESTIONS';
-
 const ManageCoaching = (): ReactElement => {
   const { t } = useTranslation();
   const { query } = useRouter();
@@ -18,10 +15,6 @@ const ManageCoaching = (): ReactElement => {
       : 'Manage Account Coaching Access',
   );
 
-  useEffect(() => {
-    suggestArticles(suggestedArticles);
-  }, []);
-
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
diff --git a/pages/accountLists/[accountListId]/settings/organizations.page.tsx b/pages/accountLists/[accountListId]/settings/organizations.page.tsx
index 4e6877189..da5951b0c 100644
--- a/pages/accountLists/[accountListId]/settings/organizations.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/organizations.page.tsx
@@ -7,7 +7,6 @@ import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import { ImpersonateUserAccordion } from 'src/components/Settings/Organization/ImpersonateUser/ImpersonateUserAccordion';
 import { ManageOrganizationAccessAccordion } from 'src/components/Settings/Organization/ManageOrganizationAccess/ManageOrganizationAccessAccordion';
 import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from './Wrapper';
 import {
   SettingsOrganizationFragment,
@@ -61,10 +60,6 @@ const Organizations = (): ReactElement => {
     setSelectedOrganization(organizations?.[0]);
   }, [organizations]);
 
-  useEffect(() => {
-    suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
-  }, []);
-
   const handleAccordionChange = (panel: string) => {
     const panelLowercase = panel.toLowerCase();
     setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase);
diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx
index 5e4cd7192..555430342 100644
--- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx
+++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx
@@ -33,7 +33,6 @@ import { StickyBox } from 'src/components/Shared/Header/styledComponents';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useGetTimezones } from 'src/hooks/useGetTimezones';
 import { getCountries } from 'src/lib/data/countries';
-import { suggestArticles } from 'src/lib/helpScout';
 import { SettingsWrapper } from './Wrapper';
 
 const AccordionLoading = styled(Skeleton)(() => ({
@@ -80,10 +79,6 @@ const Preferences: React.FC = () => {
   const { data: userOrganizationAccountsData } =
     useGetUsersOrganizationsAccountsQuery();
 
-  useEffect(() => {
-    suggestArticles('HS_SETTINGS_PREFERENCES_SUGGESTIONS');
-  }, []);
-
   useEffect(() => {
     if (onSetupTour) {
       setExpandedPanel(setupAccordions[0]);
diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
index 6086696b4..1def2309c 100644
--- a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
+++ b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
@@ -31,7 +31,6 @@ import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { useMassSelection } from 'src/hooks/useMassSelection';
 import useTaskModal from 'src/hooks/useTaskModal';
-import { suggestArticles } from 'src/lib/helpScout';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 import theme from 'src/theme';
 import {
@@ -117,10 +116,6 @@ const TasksPage: React.FC = () => {
     }
   }, [isReady, contactId]);
 
-  useEffect(() => {
-    suggestArticles('HS_TASKS_SUGGESTIONS');
-  }, []);
-
   //#region Filters
   const urlFilters =
     query?.filters && JSON.parse(decodeURI(query.filters as string));
diff --git a/pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper.tsx b/pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper.tsx
index 4290401e0..df6ef5e93 100644
--- a/pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper.tsx
+++ b/pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper.tsx
@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useState } from 'react';
 import { AppealsProvider } from 'src/components/Tool/Appeal/AppealsContext/AppealsContext';
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
-import { suggestArticles } from 'src/lib/helpScout';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 
 interface Props {
@@ -39,12 +38,6 @@ export const AppealsWrapper: React.FC<Props> = ({ children }) => {
   const { appealId: appealIdParams, searchTerm, accountListId } = query;
 
   useEffect(() => {
-    // TODO: Fix these suggested Articles
-    suggestArticles(
-      appealIdParams
-        ? 'HS_CONTACTS_CONTACT_SUGGESTIONS'
-        : 'HS_CONTACTS_SUGGESTIONS',
-    );
     if (appealIdParams === undefined) {
       push({
         pathname: '/accountLists/[accountListId]/tools/appeals',
diff --git a/pages/accountLists/[accountListId]/tools/fix/emailAddresses/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/fix/emailAddresses/[[...contactId]].page.test.tsx
index 1ea547ae3..896a960d9 100644
--- a/pages/accountLists/[accountListId]/tools/fix/emailAddresses/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/fix/emailAddresses/[[...contactId]].page.test.tsx
@@ -19,9 +19,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/accountLists/[accountListId]/tools/fix/mailingAddresses/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/fix/mailingAddresses/[[...contactId]].page.test.tsx
index 7a84a17de..931eb9740 100644
--- a/pages/accountLists/[accountListId]/tools/fix/mailingAddresses/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/fix/mailingAddresses/[[...contactId]].page.test.tsx
@@ -18,9 +18,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/accountLists/[accountListId]/tools/fix/phoneNumbers/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/fix/phoneNumbers/[[...contactId]].page.test.tsx
index 23bae70e9..882fe6958 100644
--- a/pages/accountLists/[accountListId]/tools/fix/phoneNumbers/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/fix/phoneNumbers/[[...contactId]].page.test.tsx
@@ -17,9 +17,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/accountLists/[accountListId]/tools/fix/sendNewsletter/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/fix/sendNewsletter/[[...contactId]].page.test.tsx
index fc4913e12..ffc891b9b 100644
--- a/pages/accountLists/[accountListId]/tools/fix/sendNewsletter/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/fix/sendNewsletter/[[...contactId]].page.test.tsx
@@ -18,9 +18,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]].page.test.tsx
index 41f9531e4..d82e172d5 100644
--- a/pages/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]].page.test.tsx
@@ -17,9 +17,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/accountLists/[accountListId]/tools/merge/people/[[...contactId]].page.test.tsx b/pages/accountLists/[accountListId]/tools/merge/people/[[...contactId]].page.test.tsx
index c87f5cfcd..9423a7040 100644
--- a/pages/accountLists/[accountListId]/tools/merge/people/[[...contactId]].page.test.tsx
+++ b/pages/accountLists/[accountListId]/tools/merge/people/[[...contactId]].page.test.tsx
@@ -17,9 +17,6 @@ jest.mock('next-auth/react');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
-jest.mock('src/lib/helpScout', () => ({
-  suggestArticles: jest.fn(),
-}));
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
diff --git a/pages/helpjuice.css b/pages/helpjuice.css
new file mode 100644
index 000000000..1bd471837
--- /dev/null
+++ b/pages/helpjuice.css
@@ -0,0 +1,46 @@
+#helpjuice-widget .article .footer {
+  /* Hide the estimated reading time and last updated time in search results */
+  display: none !important;
+}
+
+/*
+ * The default height of #helpjuice-widget-expanded is 620px and #helpjuice-widget-content is 500px. It fits well when
+ * the screen is 800px. Therefore, the widget content height should be 300px less than the screen height, while keeping
+ * its height between 300px and 500px. And the widget itself should be 120px taller than the content.
+ */
+#helpjuice-widget #helpjuice-widget-expanded {
+  --content-height: clamp(100vh - 300px, 300px, 500px);
+  height: calc(var(--content-height) + 120px) !important;
+}
+
+#helpjuice-widget #helpjuice-widget-expanded #helpjuice-widget-content {
+  height: var(--content-height) !important;
+}
+
+#helpjuice-widget.bottomRight {
+  right: 130px !important;
+}
+
+/* Move the beacon higher from the bottom when it is not expanded */
+#helpjuice-widget.bottomRight:has(#helpjuice-widget-expanded:not(.hj-shown)) {
+  bottom: 170px !important;
+}
+
+/* If the browser doesn't support :has and :not selectors, always move the beacon higher. */
+@supports not selector(:has(*):not(*)) {
+  #helpjuice-widget.bottomRight {
+    bottom: 170px !important;
+  }
+}
+
+@media (max-width: 900px) {
+  #helpjuice-widget.bottomRight {
+    right: 100px !important;
+  }
+}
+
+@media (max-width: 600px) {
+  #helpjuice-widget.bottomRight {
+    right: 90px !important;
+  }
+}
diff --git a/pages/helpscout.css b/pages/helpscout.css
deleted file mode 100644
index 3184cb2a0..000000000
--- a/pages/helpscout.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.BeaconFabButtonFrame {
-  right: 70px !important;
-  bottom: 30px !important;
-}
-
-@media only screen and (max-width: 900px) {
-  .BeaconFabButtonFrame {
-    right: 40px !important;
-    bottom: 25px !important;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .BeaconFabButtonFrame {
-    right: 30px !important;
-    bottom: 30px !important;
-  }
-}
-
-.BeaconContainer {
-  right: 20px !important;
-  bottom: 90px !important;
-  z-index: 1350 !important;
-}
-.BeaconFabButtonFrame {
-  z-index: 1500 !important;
-}
diff --git a/pages/print.css b/pages/print.css
index f9442e4ca..0d5532bd7 100644
--- a/pages/print.css
+++ b/pages/print.css
@@ -18,8 +18,4 @@
   header {
     display: none !important;
   }
-
-  #beacon-container {
-    display: none;
-  }
 }
diff --git a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx
index 7ba454b8c..57a59fa70 100644
--- a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx
+++ b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx
@@ -263,7 +263,7 @@ export const Activity: React.FC<ActivityProps> = ({
                 <ChevronRight />
               </StyledButton>
             </ButtonGroup>
-            <HelpButton articleVar="HS_COACHING_ACTIVITY" />
+            <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />
           </Header>
         }
       />
diff --git a/src/components/Coaching/CoachingDetail/ActivitySummary/ActivitySummary.tsx b/src/components/Coaching/CoachingDetail/ActivitySummary/ActivitySummary.tsx
index 9c8f5875f..8795736cb 100644
--- a/src/components/Coaching/CoachingDetail/ActivitySummary/ActivitySummary.tsx
+++ b/src/components/Coaching/CoachingDetail/ActivitySummary/ActivitySummary.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import {
-  Box,
   CardContent,
   CardHeader,
   Divider,
@@ -18,7 +17,6 @@ import { useLocale } from 'src/hooks/useLocale';
 import { dateFormatWithoutYear } from 'src/lib/intlFormat';
 import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 import { CoachingPeriodEnum } from '../CoachingDetail';
-import { HelpButton } from '../HelpButton';
 import { AlignedTableCell, DividerRow, HeaderRow } from '../StyledComponents';
 import { getResultColor } from '../helpers';
 import { useActivitySummaryQuery } from './ActivitySummary.generated';
@@ -96,14 +94,7 @@ export const ActivitySummary: React.FC<ActivitySummaryProps> = ({
 
   return (
     <AnimatedCard>
-      <CardHeader
-        title={
-          <Box display="flex" alignItems="center">
-            <Box flex={1}>{t('Activity Summary')}</Box>
-            <HelpButton articleVar="HS_COACHING_ACTIVITY_SUMMARY" />
-          </Box>
-        }
-      />
+      <CardHeader title={t('Activity Summary')} />
       <ContentContainer>
         {loading ? (
           <MultilineSkeleton lines={4} />
diff --git a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx
index de8defa64..251baa9e9 100644
--- a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx
+++ b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx
@@ -83,7 +83,7 @@ export const AppointmentResults: React.FC<AppointmentResultsProps> = ({
         title={
           <Box display="flex" alignItems="center">
             <Box flex={1}>{t('Appointments and Results')}</Box>
-            <HelpButton articleVar="HS_COACHING_APPOINTMENTS_AND_RESULTS" />
+            <HelpButton articleVar="HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS" />
           </Box>
         }
       />
diff --git a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
index c62ab500f..2f0190f40 100644
--- a/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
+++ b/src/components/Coaching/CoachingDetail/CoachingDetail.tsx
@@ -58,7 +58,7 @@ const CoachingDetailContainer = styled(Box)({
 const CoachingMainContainer = styled(Box)(({ theme }) => ({
   flex: 1,
   padding: theme.spacing(1),
-  paddingBottom: theme.spacing(6), // prevent the HelpScout beacon from obscuring content at the bottom
+  paddingBottom: theme.spacing(6), // prevent the Helpjuice beacon from obscuring content at the bottom
   overflowY: 'scroll',
 }));
 
diff --git a/src/components/Coaching/CoachingDetail/HelpButton.test.tsx b/src/components/Coaching/CoachingDetail/HelpButton.test.tsx
index 0b50f1def..fc3d43830 100644
--- a/src/components/Coaching/CoachingDetail/HelpButton.test.tsx
+++ b/src/components/Coaching/CoachingDetail/HelpButton.test.tsx
@@ -1,17 +1,27 @@
 import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { showArticle } from 'src/lib/helpScout';
 import { HelpButton } from './HelpButton';
 
-jest.mock('src/lib/helpScout');
-
 describe('help button', () => {
-  it('opens the HelpScout article', () => {
+  it('renders a link to the help article', () => {
+    process.env.HELP_URL_COACHING_ACTIVITY = 'https://help.org';
+
     const { getByRole } = render(
-      <HelpButton articleVar="HS_COACHING_ACTIVITY" />,
+      <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />,
+    );
+
+    expect(getByRole('link', { name: 'Help' })).toHaveAttribute(
+      'href',
+      'https://help.org',
+    );
+  });
+
+  it('renders nothing if the help article does not exist', () => {
+    process.env.HELP_URL_COACHING_ACTIVITY = '';
+
+    const { queryByRole } = render(
+      <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />,
     );
 
-    userEvent.click(getByRole('button', { name: 'Help' }));
-    expect(showArticle).toHaveBeenCalled();
+    expect(queryByRole('link', { name: 'Help' })).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Coaching/CoachingDetail/HelpButton.tsx b/src/components/Coaching/CoachingDetail/HelpButton.tsx
index e84d23561..23a3bcebb 100644
--- a/src/components/Coaching/CoachingDetail/HelpButton.tsx
+++ b/src/components/Coaching/CoachingDetail/HelpButton.tsx
@@ -1,17 +1,26 @@
 import QuestionMark from '@mui/icons-material/QuestionMark';
 import { IconButton } from '@mui/material';
-import { ArticleVar, showArticle } from 'src/lib/helpScout';
+import { ArticleVar, articles } from 'src/lib/helpjuice';
 
 interface HelpButtonProps {
   articleVar: ArticleVar;
 }
 
-export const HelpButton: React.FC<HelpButtonProps> = ({ articleVar }) => (
-  <IconButton
-    size="small"
-    onClick={() => showArticle(articleVar)}
-    aria-label="Help"
-  >
-    <QuestionMark />
-  </IconButton>
-);
+export const HelpButton: React.FC<HelpButtonProps> = ({ articleVar }) => {
+  const url = articles[articleVar];
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      href={url}
+      target="_blank"
+      rel="nofollow noreferrer"
+      size="small"
+      aria-label="Help"
+    >
+      <QuestionMark />
+    </IconButton>
+  );
+};
diff --git a/src/components/Contacts/ContactsMap/ContactsMap.tsx b/src/components/Contacts/ContactsMap/ContactsMap.tsx
index d3c039621..611e1932a 100644
--- a/src/components/Contacts/ContactsMap/ContactsMap.tsx
+++ b/src/components/Contacts/ContactsMap/ContactsMap.tsx
@@ -92,15 +92,14 @@ export const ContactsMap: React.FC = ({}) => {
   });
 
   useEffect(() => {
-    // Add styles to HelpScout Beacon to move left of Google zoom buttons.
-    const beacon = document.querySelector(
-      '#beacon-container .BeaconFabButtonFrame',
-    ) as HTMLElement;
-    if (!beacon) {
+    // Add styles to Helpjuice beacon to move left of Google zoom buttons.
+    const beacon = document.querySelector('#helpjuice-widget.bottomRight');
+    if (!(beacon instanceof HTMLElement)) {
       return;
     }
-    beacon.style.setProperty('right', '60px', 'important');
-    return () => beacon.style.setProperty('right', '20px');
+    const oldRight = beacon.style.getPropertyValue('right');
+    beacon.style.setProperty('right', '120px', 'important');
+    return () => beacon.style.setProperty('right', oldRight);
   }, []);
 
   useEffect(() => {
diff --git a/src/components/Helpjuice/Helpjuice.test.tsx b/src/components/Helpjuice/Helpjuice.test.tsx
new file mode 100644
index 000000000..de879aa1c
--- /dev/null
+++ b/src/components/Helpjuice/Helpjuice.test.tsx
@@ -0,0 +1,100 @@
+import { act, render } from '@testing-library/react';
+import { useSession } from 'next-auth/react';
+import { session } from '__tests__/fixtures/session';
+import { Helpjuice } from './Helpjuice';
+
+describe('Helpjuice', () => {
+  beforeEach(() => {
+    process.env.HELPJUICE_ORIGIN = 'https://domain.helpjuice.com';
+    process.env.HELPJUICE_KNOWLEDGE_BASE_URL =
+      'https://domain.helpjuice.com/kb';
+    document.body.innerHTML =
+      '<a id="helpjuice-contact-link">Contact Us</a><a class="knowledge-base-link">Visit Knowledge Base</a>';
+    location.href = 'https://example.com/';
+  });
+
+  it('does nothing if the element is missing', () => {
+    document.body.innerHTML = '';
+
+    render(<Helpjuice />);
+
+    expect(
+      document.getElementById('helpjuice-contact-link'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('does nothing if the $HELPJUICE_ORIGIN environment variable is missing', () => {
+    process.env.HELPJUICE_ORIGIN = '';
+
+    render(<Helpjuice />);
+
+    expect(document.getElementById('helpjuice-contact-link')).toHaveProperty(
+      'href',
+      '',
+    );
+  });
+
+  it('updates the contact link', () => {
+    const { rerender } = render(<Helpjuice />);
+
+    expect(document.getElementById('helpjuice-contact-link')).toHaveProperty(
+      'href',
+      'https://domain.helpjuice.com/contact-us?mpdxName=First+Last&mpdxEmail=first.last%40cru.org&mpdxUrl=https%3A%2F%2Fexample.com%2F',
+    );
+
+    // Update the session
+    (useSession as jest.MockedFn<typeof useSession>).mockReturnValue({
+      data: {
+        ...session,
+        user: {
+          ...session.user,
+          name: 'John Doe',
+          email: 'john.doe@cru.org',
+        },
+      },
+      status: 'authenticated',
+      update: () => Promise.resolve(null),
+    });
+    rerender(<Helpjuice />);
+
+    expect(document.getElementById('helpjuice-contact-link')).toHaveProperty(
+      'href',
+      'https://domain.helpjuice.com/contact-us?mpdxName=John+Doe&mpdxEmail=john.doe%40cru.org&mpdxUrl=https%3A%2F%2Fexample.com%2F',
+    );
+
+    // Update the URL
+    location.href = 'https://example.com/page';
+    act(() => {
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(document.getElementById('helpjuice-contact-link')).toHaveProperty(
+      'href',
+      'https://domain.helpjuice.com/contact-us?mpdxName=John+Doe&mpdxEmail=john.doe%40cru.org&mpdxUrl=https%3A%2F%2Fexample.com%2Fpage',
+    );
+  });
+
+  it('omits the user data if the session is missing', () => {
+    (useSession as jest.MockedFn<typeof useSession>).mockReturnValue({
+      data: null,
+      status: 'loading',
+      update: () => Promise.resolve(null),
+    });
+
+    render(<Helpjuice />);
+
+    expect(document.getElementById('helpjuice-contact-link')).toHaveProperty(
+      'href',
+      'https://domain.helpjuice.com/contact-us?mpdxUrl=https%3A%2F%2Fexample.com%2F',
+    );
+  });
+
+  it('updates the knowledge base link', () => {
+    render(<Helpjuice />);
+
+    expect(document.querySelector('a.knowledge-base-link')).toHaveProperty(
+      'href',
+      'https://domain.helpjuice.com/kb',
+    );
+  });
+});
diff --git a/src/components/Helpjuice/Helpjuice.tsx b/src/components/Helpjuice/Helpjuice.tsx
new file mode 100644
index 000000000..b21663242
--- /dev/null
+++ b/src/components/Helpjuice/Helpjuice.tsx
@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useSession } from 'next-auth/react';
+import { useLocation } from './useLocation';
+
+export const Helpjuice: React.FC = () => {
+  // Because of the way the Helpjuice script is written, it must be added in _document.page.tsx instead of a component.
+  // It adds content to the DOM in response to the DOMContentLoaded. If we add the Swifty script to this component, the
+  // DOMContentLoaded event has already fired, and Swifty will not add the beacon elements to the page.
+  const { data: session } = useSession();
+  const href = useLocation();
+
+  useEffect(() => {
+    if (!process.env.HELPJUICE_ORIGIN) {
+      return;
+    }
+
+    // Add some extra information about the current user and page to the contact us Helpjuice link. Out custom JS on the
+    // Helpjuice page will extract this data from the URL and use it to pre-populate the contact form.
+    const contactLink = document.getElementById('helpjuice-contact-link');
+    if (contactLink instanceof HTMLAnchorElement) {
+      const url = new URL(`${process.env.HELPJUICE_ORIGIN}/contact-us`);
+      if (session) {
+        url.searchParams.set('mpdxName', session.user.name);
+        url.searchParams.set('mpdxEmail', session.user.email);
+      }
+      url.searchParams.set('mpdxUrl', window.location.href);
+      contactLink.href = url.toString();
+    }
+
+    const knowledgeBaseLink = document.querySelector('a.knowledge-base-link');
+    if (
+      process.env.HELPJUICE_KNOWLEDGE_BASE_URL &&
+      knowledgeBaseLink instanceof HTMLAnchorElement
+    ) {
+      knowledgeBaseLink.href = process.env.HELPJUICE_KNOWLEDGE_BASE_URL;
+    }
+  }, [session, href]);
+
+  return null;
+};
diff --git a/src/components/Helpjuice/useLocation.test.ts b/src/components/Helpjuice/useLocation.test.ts
new file mode 100644
index 000000000..0faee43f5
--- /dev/null
+++ b/src/components/Helpjuice/useLocation.test.ts
@@ -0,0 +1,53 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useLocation } from './useLocation';
+
+describe('useLocation', () => {
+  beforeEach(() => {
+    location.href = 'https://example.com';
+  });
+
+  it('should return the current location.href initially', () => {
+    const { result } = renderHook(useLocation);
+
+    expect(result.current).toBe('https://example.com');
+  });
+
+  it('should update href when location.href changes due to popstate event', () => {
+    const { result } = renderHook(useLocation);
+
+    act(() => {
+      location.href = 'https://example.com/page1';
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(result.current).toBe('https://example.com/page1');
+  });
+
+  it('should update href when location.href changes due to hashchange event', () => {
+    const { result } = renderHook(useLocation);
+
+    act(() => {
+      location.href = 'https://example.com#section';
+      window.dispatchEvent(new HashChangeEvent('hashchange'));
+    });
+
+    expect(result.current).toBe('https://example.com#section');
+  });
+
+  it('should remove event listeners on unmount', () => {
+    const { unmount } = renderHook(useLocation);
+
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'popstate',
+      expect.any(Function),
+    );
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'hashchange',
+      expect.any(Function),
+    );
+  });
+});
diff --git a/src/components/Helpjuice/useLocation.ts b/src/components/Helpjuice/useLocation.ts
new file mode 100644
index 000000000..283e45ae0
--- /dev/null
+++ b/src/components/Helpjuice/useLocation.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+// This hook returns the current value of location.href
+export const useLocation = () => {
+  const [href, setHref] = useState(
+    typeof location !== 'undefined' ? location.href : '',
+  );
+
+  useEffect(() => {
+    const handleLocationChange = () => {
+      setHref(location.href);
+    };
+
+    window.addEventListener('popstate', handleLocationChange);
+    window.addEventListener('hashchange', handleLocationChange);
+
+    return () => {
+      window.removeEventListener('popstate', handleLocationChange);
+      window.removeEventListener('hashchange', handleLocationChange);
+    };
+  }, []);
+
+  return href;
+};
diff --git a/src/components/Helpscout/HelpscoutBeacon.test.tsx b/src/components/Helpscout/HelpscoutBeacon.test.tsx
deleted file mode 100644
index 45ff67e08..000000000
--- a/src/components/Helpscout/HelpscoutBeacon.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { render, waitFor } from '@testing-library/react';
-import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { identifyUser } from 'src/lib/helpScout';
-import { GetUserQuery } from '../User/GetUser.generated';
-import HelpscoutBeacon from './HelpscoutBeacon';
-
-jest.mock('src/lib/helpScout', () => ({
-  callBeacon: jest.fn(),
-  destroy: jest.fn(),
-  initBeacon: jest.fn(),
-  identifyUser: jest.fn(),
-}));
-
-describe('HelpscoutBeacon', () => {
-  it('identifies the current user', async () => {
-    render(
-      <GqlMockedProvider<{ GetUser: GetUserQuery }>
-        mocks={{
-          GetUser: {
-            user: {
-              id: 'user-1',
-              firstName: 'First',
-              lastName: 'Last',
-              keyAccounts: [
-                {
-                  email: 'first.last@cru.org',
-                },
-              ],
-            },
-          },
-        }}
-      >
-        <HelpscoutBeacon />
-      </GqlMockedProvider>,
-    );
-
-    await waitFor(() =>
-      expect(identifyUser).toHaveBeenCalledWith(
-        'user-1',
-        'first.last@cru.org',
-        'First Last',
-      ),
-    );
-  });
-});
diff --git a/src/components/Helpscout/HelpscoutBeacon.tsx b/src/components/Helpscout/HelpscoutBeacon.tsx
deleted file mode 100644
index b57794c81..000000000
--- a/src/components/Helpscout/HelpscoutBeacon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Script from 'next/script';
-import { useEffect } from 'react';
-import { useSession } from 'next-auth/react';
-import { callBeacon, identifyUser, initBeacon } from 'src/lib/helpScout';
-
-const HelpscoutBeacon: React.FC = () => {
-  const { data: session } = useSession();
-
-  useEffect(() => {
-    initBeacon();
-
-    return () => {
-      callBeacon('destroy');
-    };
-  }, []);
-
-  const user = session?.user;
-  useEffect(() => {
-    if (user) {
-      identifyUser(user.userID, user.email, user.name);
-    }
-  }, [user]);
-
-  return <Script src="https://beacon-v2.helpscout.net" strategy="lazyOnload" />;
-};
-
-export default HelpscoutBeacon;
diff --git a/src/components/Settings/integrations/Organization/ConnectOrganization.tsx b/src/components/Settings/integrations/Organization/ConnectOrganization.tsx
index 9fd85eb42..0e35c40c2 100644
--- a/src/components/Settings/integrations/Organization/ConnectOrganization.tsx
+++ b/src/components/Settings/integrations/Organization/ConnectOrganization.tsx
@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { clearDataDogUser } from 'src/lib/dataDog';
-import { articles, showArticle } from 'src/lib/helpScout';
+import { articles } from 'src/lib/helpjuice';
 import theme from 'src/theme';
 import { useOauthUrl } from '../useOauthUrl';
 import {
@@ -127,10 +127,6 @@ export const ConnectOrganization: React.FC<ConnectOrganizationProps> = ({
     onDone();
   };
 
-  const showOrganizationHelp = () => {
-    showArticle('HS_SETUP_FIND_ORGANIZATION');
-  };
-
   return (
     <Formik
       initialValues={{
@@ -178,11 +174,15 @@ export const ConnectOrganization: React.FC<ConnectOrganizationProps> = ({
                 <TextField {...params} label={t('Organization')} />
               )}
             />
-            {!selectedOrganization && !!articles.HS_SETUP_FIND_ORGANIZATION && (
-              <Button onClick={showOrganizationHelp}>
-                {t("Can't find your organization?")}
-              </Button>
-            )}
+            {!selectedOrganization &&
+              articles.HELP_URL_SETUP_FIND_ORGANIZATION && (
+                <Button
+                  href={articles.HELP_URL_SETUP_FIND_ORGANIZATION}
+                  target="_blank"
+                >
+                  {t("Can't find your organization?")}
+                </Button>
+              )}
             {organizationType === OrganizationTypesEnum.MINISTRY && (
               <WarningBox>
                 <Typography
diff --git a/src/lib/helpScout.test.ts b/src/lib/helpScout.test.ts
deleted file mode 100644
index b6d42db82..000000000
--- a/src/lib/helpScout.test.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  BeaconFn,
-  identifyUser,
-  initBeacon,
-  showArticle,
-  suggestArticles,
-} from './helpScout';
-
-const env = process.env;
-
-describe('HelpScout', () => {
-  const beacon = jest.fn() as BeaconFn;
-  beforeEach(() => {
-    beacon.readyQueue = [];
-    window.Beacon = beacon;
-    jest.resetModules();
-    process.env = { ...env };
-  });
-
-  afterEach(() => {
-    process.env = env;
-  });
-
-  beforeEach(() => {
-    jest.resetModules();
-    process.env = { ...env };
-  });
-
-  afterEach(() => {
-    process.env = env;
-  });
-
-  describe('initBeacon', () => {
-    it('sets window.Beacon if HelpScout has not loaded yet', () => {
-      window.Beacon = undefined;
-
-      initBeacon();
-
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      expect(window.Beacon.readyQueue).toHaveLength(1);
-    });
-
-    it('does nothing if HelpScout has already loaded', () => {
-      initBeacon();
-
-      expect(beacon).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('identifyUser', () => {
-    it('calls callBeacon', () => {
-      identifyUser('id', 'email', 'name');
-      expect(beacon).toHaveBeenCalledWith('identify', {
-        id: 'id',
-        name: 'name',
-        email: 'email',
-      });
-    });
-  });
-  describe('suggestArticles', () => {
-    it('calls callBeacon when the suggestions exist', () => {
-      const makeSuggestions = (key: string) => `${key}-1,${key}-2`;
-      Object.assign(process.env, {
-        HS_COACHING_SUGGESTIONS: makeSuggestions('coaching'),
-        HS_CONTACTS_CONTACT_SUGGESTIONS: makeSuggestions('contacts-contact'),
-        HS_CONTACTS_SUGGESTIONS: makeSuggestions('contacts'),
-        HS_HOME_SUGGESTIONS: makeSuggestions('home'),
-        HS_REPORTS_SUGGESTIONS: makeSuggestions('reports'),
-        HS_TASKS_SUGGESTIONS: makeSuggestions('tasks'),
-        HS_SETTINGS_SERVICES_SUGGESTIONS: makeSuggestions('services'),
-        HS_SETTINGS_PREFERENCES_SUGGESTIONS: makeSuggestions('preferences'),
-      });
-
-      suggestArticles('HS_COACHING_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'coaching-1',
-        'coaching-2',
-      ]);
-
-      suggestArticles('HS_CONTACTS_CONTACT_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'contacts-contact-1',
-        'contacts-contact-2',
-      ]);
-
-      suggestArticles('HS_CONTACTS_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'contacts-1',
-        'contacts-2',
-      ]);
-
-      suggestArticles('HS_HOME_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', ['home-1', 'home-2']);
-
-      suggestArticles('HS_REPORTS_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'reports-1',
-        'reports-2',
-      ]);
-
-      suggestArticles('HS_TASKS_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'tasks-1',
-        'tasks-2',
-      ]);
-
-      suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'services-1',
-        'services-2',
-      ]);
-
-      suggestArticles('HS_SETTINGS_PREFERENCES_SUGGESTIONS');
-      expect(beacon).toHaveBeenLastCalledWith('suggest', [
-        'preferences-1',
-        'preferences-2',
-      ]);
-    });
-
-    it('calls callBeacon when the suggestions do not exist', () => {
-      process.env.HS_HOME_SUGGESTIONS = undefined;
-      suggestArticles('HS_HOME_SUGGESTIONS');
-      expect(beacon).toHaveBeenCalledWith('suggest', []);
-    });
-  });
-
-  describe('showArticle', () => {
-    it('calls callBeacon when the article exists', () => {
-      Object.assign(process.env, {
-        HS_COACHING_ACTIVITY: 'coaching-activity',
-        HS_COACHING_ACTIVITY_SUMMARY: 'coaching-activity-summary',
-        HS_COACHING_APPOINTMENTS_AND_RESULTS:
-          'coaching-appointments-and-results',
-        HS_COACHING_COMMITMENTS: 'coaching-commitments',
-        HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS:
-          'coaching-outstanding-recurring-commitments',
-        HS_COACHING_OUTSTANDING_SPECIAL_NEEDS:
-          'coaching-outstanding-special-needs',
-        HS_SETUP_FIND_ORGANIZATION: 'organization-activity',
-      });
-
-      showArticle('HS_SETUP_FIND_ORGANIZATION');
-      expect(beacon).toHaveBeenCalledWith('article', 'organization-activity');
-
-      showArticle('HS_COACHING_ACTIVITY');
-      expect(beacon).toHaveBeenCalledWith('article', 'coaching-activity');
-
-      showArticle('HS_COACHING_ACTIVITY_SUMMARY');
-      expect(beacon).toHaveBeenCalledWith(
-        'article',
-        'coaching-activity-summary',
-      );
-
-      showArticle('HS_COACHING_APPOINTMENTS_AND_RESULTS');
-      expect(beacon).toHaveBeenCalledWith(
-        'article',
-        'coaching-appointments-and-results',
-      );
-
-      showArticle('HS_COACHING_COMMITMENTS');
-      expect(beacon).toHaveBeenCalledWith('article', 'coaching-commitments');
-
-      showArticle('HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS');
-      expect(beacon).toHaveBeenCalledWith(
-        'article',
-        'coaching-outstanding-recurring-commitments',
-      );
-
-      showArticle('HS_COACHING_OUTSTANDING_SPECIAL_NEEDS');
-      expect(beacon).toHaveBeenCalledWith(
-        'article',
-        'coaching-outstanding-special-needs',
-      );
-    });
-
-    it('calls callBeacon when the article does not exist', () => {
-      process.env.HS_COACHING_ACTIVITY = undefined;
-      showArticle('HS_COACHING_ACTIVITY');
-      expect(beacon).toHaveBeenCalledWith('open', undefined);
-    });
-  });
-});
diff --git a/src/lib/helpScout.ts b/src/lib/helpScout.ts
deleted file mode 100644
index 24ebb3903..000000000
--- a/src/lib/helpScout.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-export interface BeaconFn {
-  (method: string, options?: unknown, data?: unknown): void;
-  readyQueue?: unknown[];
-}
-
-declare global {
-  interface Window {
-    Beacon: BeaconFn | undefined;
-  }
-}
-
-// Create the beacon stub that will be used until the real HelpScout beacon loads
-const readyQueue: unknown[] = [];
-const beacon = (method: string, options?: unknown, data?: unknown) => {
-  readyQueue.push({ method, options, data });
-};
-beacon.readyQueue = readyQueue;
-
-export const initBeacon = () => {
-  if (!window.Beacon) {
-    window.Beacon = beacon;
-  }
-  callBeacon('init', process.env.BEACON_TOKEN);
-};
-
-export const callBeacon = (name: string, options?: unknown) => {
-  if (!window.Beacon) {
-    throw new Error('HelpScout beacon has not been initialized yet');
-  }
-
-  window.Beacon(name, options);
-};
-
-export const identifyUser = (id: string, email: string, name: string) => {
-  callBeacon('identify', {
-    id,
-    email,
-    name,
-  });
-};
-
-export type SuggestionsVar = keyof typeof suggestions;
-
-export const suggestArticles = (envVar: SuggestionsVar) => {
-  const articleIds = suggestions[envVar];
-  callBeacon('suggest', articleIds?.split(',') ?? []);
-};
-
-export type ArticleVar = keyof typeof articles;
-
-export const showArticle = (envVar: ArticleVar) => {
-  const articleId = articles[envVar];
-  if (articleId) {
-    callBeacon('article', articleId);
-  } else {
-    callBeacon('open');
-  }
-};
-
-// We are using getters so that when tests override environment variables, the changes will be picked up
-const suggestions = {
-  get HS_COACHING_SUGGESTIONS() {
-    return process.env.HS_COACHING_SUGGESTIONS;
-  },
-  get HS_CONTACTS_CONTACT_SUGGESTIONS() {
-    return process.env.HS_CONTACTS_CONTACT_SUGGESTIONS;
-  },
-  get HS_CONTACTS_SUGGESTIONS() {
-    return process.env.HS_CONTACTS_SUGGESTIONS;
-  },
-  get HS_HOME_SUGGESTIONS() {
-    return process.env.HS_HOME_SUGGESTIONS;
-  },
-  get HS_REPORTS_SUGGESTIONS() {
-    return process.env.HS_REPORTS_SUGGESTIONS;
-  },
-  get HS_TASKS_SUGGESTIONS() {
-    return process.env.HS_TASKS_SUGGESTIONS;
-  },
-  get HS_SETTINGS_SERVICES_SUGGESTIONS() {
-    return process.env.HS_SETTINGS_SERVICES_SUGGESTIONS;
-  },
-  get HS_SETTINGS_PREFERENCES_SUGGESTIONS() {
-    return process.env.HS_SETTINGS_PREFERENCES_SUGGESTIONS;
-  },
-};
-
-export const articles = {
-  get HS_SETUP_FIND_ORGANIZATION() {
-    return process.env.HS_SETUP_FIND_ORGANIZATION;
-  },
-  get HS_COACHING_ACTIVITY() {
-    return process.env.HS_COACHING_ACTIVITY;
-  },
-  get HS_COACHING_ACTIVITY_SUMMARY() {
-    return process.env.HS_COACHING_ACTIVITY_SUMMARY;
-  },
-  get HS_COACHING_APPOINTMENTS_AND_RESULTS() {
-    return process.env.HS_COACHING_APPOINTMENTS_AND_RESULTS;
-  },
-  get HS_COACHING_COMMITMENTS() {
-    return process.env.HS_COACHING_COMMITMENTS;
-  },
-  get HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS() {
-    return process.env.HS_COACHING_OUTSTANDING_RECURRING_COMMITMENTS;
-  },
-  get HS_COACHING_OUTSTANDING_SPECIAL_NEEDS() {
-    return process.env.HS_COACHING_OUTSTANDING_SPECIAL_NEEDS;
-  },
-};
diff --git a/src/lib/helpjuice.ts b/src/lib/helpjuice.ts
new file mode 100644
index 000000000..2001dc59a
--- /dev/null
+++ b/src/lib/helpjuice.ts
@@ -0,0 +1,14 @@
+export type ArticleVar = keyof typeof articles;
+
+// We are using getters so that when tests override environment variables, the changes will be picked up
+export const articles = {
+  get HELP_URL_COACHING_ACTIVITY() {
+    return process.env.HELP_URL_COACHING_ACTIVITY;
+  },
+  get HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS() {
+    return process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS;
+  },
+  get HELP_URL_SETUP_FIND_ORGANIZATION() {
+    return process.env.HELP_URL_SETUP_FIND_ORGANIZATION;
+  },
+};