chore(web): marketing utm campaign on doc links

apps/web/cypress/tests/digest-playground.spec.ts

@@ -16,7 +16,7 @@ describe('Digest Playground Workflow Page', function () {
     cy.url().should('include', '/digest-playground');
     cy.contains('Digest Workflow Playground');
 
-    cy.get('a[href="https://docs.novu.co/workflows/digest"]').contains('Learn more in docs');
+    cy.get('a[href="https://docs.novu.co/workflows/digest?utm_campaign=in-app"]').contains('Learn more in docs');
   });
 
   it('the set up digest workflow should redirect to template edit page', function () {

apps/web/cypress/tests/integrations-list-modal.spec.ts

@@ -773,7 +773,7 @@ describe('Integrations List Modal', function () {
       'Select a framework to set up credentials to start sending notifications.'
     );
     cy.getByTestId('update-provider-sidebar')
-      .find('a[href="https://docs.novu.co/notification-center/introduction"]')
+      .find('a[href="https://docs.novu.co/notification-center/introduction?utm_campaign=in-app"]')
       .contains('Explore set-up guide');
     cy.getByTestId('is_active_id').should('have.value', 'true');
     cy.window().then((win) => {

apps/web/cypress/tests/integrations-list-page.spec.ts

@@ -924,7 +924,7 @@ describe('Integrations List Page', function () {
       'Select a framework to set up credentials to start sending notifications.'
     );
     cy.getByTestId('update-provider-sidebar')
-      .find('a[href="https://docs.novu.co/notification-center/introduction"]')
+      .find('a[href="https://docs.novu.co/notification-center/introduction?utm_campaign=in-app"]')
       .contains('Explore set-up guide');
     cy.getByTestId('is_active_id').should('have.value', 'true');
     cy.window().then((win) => {

apps/web/cypress/tests/layout/side-menu.spec.ts

@@ -17,7 +17,7 @@ describe('Side Menu', function () {
     cy.getByTestId('side-nav-bottom-link-support').should('have.attr', 'href').should('eq', 'https://discord.novu.co');
     cy.getByTestId('side-nav-bottom-link-documentation')
       .should('have.attr', 'href')
-      .should('eq', 'https://docs.novu.co');
+      .should('eq', 'https://docs.novu.co?utm_campaign=in-app');
 
     cy.getByTestId('side-nav-bottom-link-share-feedback')
       .should('have.attr', 'href')

apps/web/src/components/layout/components/SideNav.tsx

@@ -30,7 +30,7 @@ import { currentOnboardingStep } from '../../../pages/quick-start/components/rou
 import { useSpotlightContext } from '../../providers/SpotlightProvider';
 import { ChangesCountBadge } from './ChangesCountBadge';
 import OrganizationSelect from './OrganizationSelect';
-import { FeatureFlagsKeysEnum } from '@novu/shared';
+import { FeatureFlagsKeysEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
 
 const usePopoverStyles = createStyles(({ colorScheme }) => ({
   dropdown: {
@@ -218,7 +218,7 @@ export function SideNav({}: Props) {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href="https://docs.novu.co"
+            href={`https://docs.novu.co${UTM_CAMPAIGN_QUERY_PARAM}`}
             data-test-id="side-nav-bottom-link-documentation"
           >
             Docs

apps/web/src/components/quick-start/digest-demo-flow/consts.ts

@@ -1,3 +1,5 @@
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 export enum GuideTitleEnum {
   TRIGGER_PREVIEW = 'Trigger',
   TRIGGER_PLAYGROUND = 'Run trigger multiple times',
@@ -26,7 +28,7 @@ export const guidePreview: Record<string, IGuide> = {
   trigger: {
     title: GuideTitleEnum.TRIGGER_PREVIEW,
     description: 'Use the server SDK in your app for a specific trigger. ',
-    docsUrl: 'https://docs.novu.co/api-reference/events/trigger-event',
+    docsUrl: `https://docs.novu.co/api-reference/events/trigger-event${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: true, opacity: HINT_VISIBLE_OPACITY },
@@ -38,7 +40,7 @@ export const guidePreview: Record<string, IGuide> = {
   digest: {
     title: GuideTitleEnum.DIGEST_PREVIEW,
     description: 'Aggregates multiple events into a precise notification. ',
-    docsUrl: 'https://docs.novu.co/workflows/digest',
+    docsUrl: `https://docs.novu.co/workflows/digest${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: false, opacity: HINT_HIDDEN_OPACITY },
@@ -50,7 +52,7 @@ export const guidePreview: Record<string, IGuide> = {
   email: {
     title: GuideTitleEnum.CHANNELS_PREVIEW,
     description: 'Build desired order of channels. ',
-    docsUrl: 'https://docs.novu.co/channels-and-providers/integration-store',
+    docsUrl: `https://docs.novu.co/channels-and-providers/integration-store${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: false, opacity: HINT_HIDDEN_OPACITY },

apps/web/src/components/utils/Spotlight.tsx

@@ -2,8 +2,10 @@ import { SpotlightProvider } from '@mantine/spotlight';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Activity, Bolt, Box, Settings, Repeat, Team, Brand, Chat } from '@novu/design-system';
-import { useSpotlightContext } from '../providers/SpotlightProvider';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { ROUTES } from '../../constants/routes.enum';
+import { useSpotlightContext } from '../providers/SpotlightProvider';
 
 export const SpotLight = ({ children }) => {
   const navigate = useNavigate();
@@ -57,7 +59,7 @@ export const SpotLight = ({ children }) => {
         id: 'navigate-docs',
         title: 'Go to Documentation',
         onTrigger: () => {
-          window?.open('https://docs.novu.co/', '_blank')?.focus();
+          window?.open(`https://docs.novu.co${UTM_CAMPAIGN_QUERY_PARAM}`, '_blank')?.focus();
         },
       },
       {

apps/web/src/pages/auth/components/SignUpForm.tsx

@@ -4,8 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { Center } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-
-import { passwordConstraints } from '@novu/shared';
+import { passwordConstraints, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
 import { PasswordInput, Button, colors, Input, Text, Checkbox } from '@novu/design-system';
 
 import { useAuthContext } from '../../../components/providers/AuthProvider';
@@ -223,13 +222,18 @@ function Accept() {
   return (
     <>
       <span>I accept the </span>
-      <a style={{ textDecoration: 'underline' }} href="https://novu.co/terms" target="_blank" rel="noopener noreferrer">
+      <a
+        style={{ textDecoration: 'underline' }}
+        href={`https://novu.co/terms${UTM_CAMPAIGN_QUERY_PARAM}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         Terms and Conditions
       </a>
       <span> and have read the </span>
       <a
         style={{ textDecoration: 'underline' }}
-        href="https://novu.co/privacy"
+        href={`https://novu.co/privacy${UTM_CAMPAIGN_QUERY_PARAM}`}
         target="_blank"
         rel="noopener noreferrer"
       >

apps/web/src/pages/integrations/components/FrameworkDisplay.tsx

@@ -2,6 +2,8 @@ import { Text, UnstyledButton, Group, useMantineTheme } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { colors } from '@novu/notification-center';
 import { AngularGradient, Copy, ReactGradient, VueGradient, JsGradient, CodeGradient } from '@novu/design-system';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { useEnvController } from '../../../hooks';
 import { FrameworkEnum } from '../../quick-start/consts';
 
@@ -82,7 +84,7 @@ export const FrameworkDisplay = ({ setFramework }: { setFramework: (framework: s
       </Group>
       <Group spacing={16} mt={16} grow>
         <a
-          href="https://docs.novu.co/notification-center/client/web-component"
+          href={`https://docs.novu.co/notification-center/client/web-component${UTM_CAMPAIGN_QUERY_PARAM}`}
           onClick={() => {
             setFramework('');
           }}
@@ -96,7 +98,7 @@ export const FrameworkDisplay = ({ setFramework }: { setFramework: (framework: s
           </Group>
         </a>
         <a
-          href="https://docs.novu.co/notification-center/client/headless/get-started"
+          href={`https://docs.novu.co/notification-center/client/headless/get-started${UTM_CAMPAIGN_QUERY_PARAM}`}
           onClick={() => {
             setFramework('');
           }}

apps/web/src/pages/integrations/components/NovuInAppForm.tsx

@@ -3,11 +3,11 @@ import styled from '@emotion/styled/macro';
 import { Title, Text, Grid, Stack, useMantineColorScheme } from '@mantine/core';
 import { useMutation } from '@tanstack/react-query';
 import { Controller, useForm } from 'react-hook-form';
-import { ICredentialsDto } from '@novu/shared';
+import { ICredentialsDto, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { Switch, Button, colors, CircleArrowRight } from '@novu/design-system';
 
 import { IIntegratedProvider } from '../types';
 import { updateIntegration } from '../../../api/integration';
-import { Switch, Button, colors, CircleArrowRight } from '@novu/design-system';
 import { When } from '../../../components/utils/When';
 import { errorMessage, successMessage } from '../../../utils/notifications';
 
@@ -129,7 +129,9 @@ export const NovuInAppForm = ({
           </Text>
           <CircleArrowRightStyled
             onClick={() => {
-              window.open('https://docs.novu.co/notification-center/client/iframe#enabling-hmac-encryption');
+              window.open(
+                `https://docs.novu.co/notification-center/client/iframe${UTM_CAMPAIGN_QUERY_PARAM}#enabling-hmac-encryption`
+              );
             }}
           />
         </WarningMessage>

apps/web/src/pages/integrations/components/NovuInAppFrameworks.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
-
 import { colors, Text, ReactLogo, AngularLogo, JavaScriptLogo, VueLogo, IframeLogo } from '@novu/design-system';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { FrameworkEnum } from '../../quick-start/consts';
 
 const NovuInAppFrameworksHolder = styled.div`
@@ -46,12 +47,12 @@ const frameworks = [
   {
     icon: JavaScriptLogo,
     name: 'Web Component',
-    href: 'https://docs.novu.co/notification-center/client/web-component',
+    href: `https://docs.novu.co/notification-center/client/web-component${UTM_CAMPAIGN_QUERY_PARAM}`,
   },
   {
     icon: JavaScriptLogo,
     name: 'Headless',
-    href: 'https://docs.novu.co/notification-center/client/headless/get-started',
+    href: `https://docs.novu.co/notification-center/client/headless/get-started${UTM_CAMPAIGN_QUERY_PARAM}`,
   },
   { icon: VueLogo, name: 'Vue', frameworkEnum: FrameworkEnum.VUE },
   { icon: IframeLogo, name: 'iFrame', frameworkEnum: FrameworkEnum.JS },

apps/web/src/pages/integrations/components/NovuProviderBase.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Stack, Text, useMantineColorScheme } from '@mantine/core';
-import { ChannelTypeEnum } from '@novu/shared';
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { colors, Close } from '@novu/design-system';
+
 import { When } from '../../../components/utils/When';
 import { CONTEXT_PATH } from '../../../config';
-import { colors, Close } from '@novu/design-system';
 import { useIntegrationLimit } from '../../../hooks';
 import { LimitBar } from './LimitBar';
 
@@ -53,7 +54,7 @@ export function NovuProviderBase({ onClose, senderInformation, channel }: NovuPr
           <InlineDiv>
             <span>Read more about Integrations in</span>
             <a
-              href="https://docs.novu.co/channels-and-providers/integration-store"
+              href={`https://docs.novu.co/channels-and-providers/integration-store${UTM_CAMPAIGN_QUERY_PARAM}`}
               target="_blank"
               rel="noreferrer"
               style={{ color: '#DD2476 ', textDecoration: 'underline' }}

apps/web/src/pages/quick-start/consts.tsx

@@ -1,9 +1,9 @@
 import React, { Dispatch } from 'react';
 import { Stack } from '@mantine/core';
 import { NavigateFunction } from 'react-router-dom';
-import { ChannelTypeEnum } from '@novu/shared';
-
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
 import { Bell, Chat, Mail, Mobile, Sms } from '@novu/design-system';
+
 import { ROUTES } from '../../constants/routes.enum';
 import { WIDGET_EMBED_PATH } from '../../config';
 
@@ -19,8 +19,8 @@ export const BACKEND_SOCKET_URL = '<BACKEND_SOCKET_URL>';
 export const setupProject = `cd notification-center-demo && npm run setup:onboarding -- ${APPLICATION_IDENTIFIER} ${API_KEY} ${BACKEND_API_URL} ${BACKEND_SOCKET_URL}`;
 export const npmRunCommand = 'npm run dev';
 export const frameworkSetupTitle = 'Choose your go-to framework';
-export const faqUrl = 'https://docs.novu.co/notification-center/introduction';
-export const notificationCenterDocsUrl = 'https://docs.novu.co/notification-center/introduction';
+export const faqUrl = `https://docs.novu.co/notification-center/introduction${UTM_CAMPAIGN_QUERY_PARAM}`;
+export const notificationCenterDocsUrl = `https://docs.novu.co/notification-center/introduction${UTM_CAMPAIGN_QUERY_PARAM}`;
 export const discordInviteUrl = 'https://discord.gg/novu';
 export const demoSetupSecondaryTitle = 'Follow the installation steps to connect your app';
 

apps/web/src/pages/quick-start/steps/GetStarted.tsx

@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
-import { ChannelTypeEnum } from '@novu/shared';
 import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { ArrowRight } from '@novu/design-system';
 
 import { useSegment } from '../../../components/providers/SegmentProvider';
-import { ArrowRight } from '@novu/design-system';
 import { IntegrationsListModal } from '../../integrations/IntegrationsListModal';
 import { ChannelsConfiguration } from '../components/ChannelsConfiguration';
 import { GetStartedLayout } from '../components/layout/GetStartedLayout';
@@ -73,7 +73,7 @@ function LearnMoreRef() {
 
   return (
     <a
-      href={'https://docs.novu.co/quickstarts/01-introduction'}
+      href={`https://docs.novu.co/quickstarts/01-introduction${UTM_CAMPAIGN_QUERY_PARAM}`}
       style={{ color: '#DD2476', textDecoration: 'underline', fontSize: '18px' }}
       onClick={() => handleOnClick}
       target="_blank"

apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx

@@ -1,17 +1,18 @@
+import { useCallback } from 'react';
 import { Stack } from '@mantine/core';
 import styled from '@emotion/styled';
 import { ReactFlowProvider } from 'react-flow-renderer';
 import { useNavigate, useParams } from 'react-router-dom';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { ArrowButton, colors, Title, Text, Button } from '@novu/design-system';
 
 import PageContainer from '../../components/layout/components/PageContainer';
-import { ArrowButton, colors, Title, Text, Button } from '@novu/design-system';
 import { parseUrl } from '../../utils/routeUtils';
 import { ROUTES } from '../../constants/routes.enum';
 import { DigestDemoFlow } from '../../components';
 import { useSegment } from '../../components/providers/SegmentProvider';
 import { DigestPlaygroundAnalyticsEnum } from './constants';
 import { useTourStorage } from './hooks/useTourStorage';
-import { useCallback } from 'react';
 
 const Heading = styled(Title)`
   color: ${colors.B40};
@@ -81,7 +82,7 @@ export const TemplatesDigestPlaygroundPage = () => {
           <LinkStyled
             target="_blank"
             rel="noopener noreferrer"
-            href="https://docs.novu.co/workflows/digest"
+            href={`https://docs.novu.co/workflows/digest${UTM_CAMPAIGN_QUERY_PARAM}`}
             onClick={handleLearnMoreClick}
           >
             Learn more in docs

libs/design-system/src/iconsV2/IconProvider.tsx

@@ -10,6 +10,7 @@ const iconClassName = css`
 
 export const IconProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const theme = useMantineTheme();
+
   return (
     <IconContext.Provider
       value={{

libs/shared/src/consts/providers/channels/chat.ts

@@ -2,24 +2,24 @@ import { IConfigCredentials, IProviderConfig } from '../provider.interface';
 import { grafanaOnCallConfig, slackConfig, getstreamConfig, rocketChatConfig } from '../credentials';
 
 import { ChatProviderIdEnum } from '../provider.enum';
-
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const chatProviders: IProviderConfig[] = [
   {
     id: ChatProviderIdEnum.Slack,
     displayName: 'Slack',
     channel: ChannelTypeEnum.CHAT,
     credentials: slackConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/slack',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/slack${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'slack.svg', dark: 'slack.svg' },
   },
   {
     id: ChatProviderIdEnum.Discord,
     displayName: 'Discord',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/discord',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/discord${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'discord.svg', dark: 'discord.svg' },
   },
   {
@@ -35,7 +35,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'MSTeams',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/ms-teams',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/ms-teams${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'msteams.svg', dark: 'msteams.svg' },
   },
   {
@@ -59,7 +59,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'Zulip',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/zulip',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/zulip${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'zulip.svg', dark: 'zulip.svg' },
   },
   {