diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
index 01d3e7ad2..828051f57 100644
--- a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
 
 const AssistDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.</div>
@@ -18,13 +19,13 @@ const AssistDoc = (props) => {
 
       <div className="font-bold my-2">Usage</div>
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import Tracker from '@openreplay/tracker';
 import trackerAssist from '@openreplay/tracker-assist';
 const tracker = new Tracker({
-  projectKey: PROJECT_KEY,
+  projectKey: '${projectKey}',
 });
 tracker.start();
 tracker.use(trackerAssist(options)); // check the list of available options below`}
@@ -35,7 +36,7 @@ tracker.use(trackerAssist(options)); // check the list of available options belo
         {`import OpenReplay from '@openreplay/tracker/cjs';
 import trackerFetch from '@openreplay/tracker-assist/cjs';
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 const trackerAssist = tracker.use(trackerAssist(options)); // check the list of available options below
 //...
diff --git a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js b/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
index d8238c21f..8ba8e590d 100644
--- a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
+++ b/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
 
 const FetchDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>This plugin allows you to capture fetch payloads and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@@ -18,14 +19,14 @@ const FetchDoc = (props) => {
 
       <div className="font-bold my-2">Usage</div>
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import tracker from '@openreplay/tracker';
 import trackerFetch from '@openreplay/tracker-fetch';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -40,7 +41,7 @@ fetch('https://api.openreplay.com/').then(response => console.log(response.json(
 import trackerFetch from '@openreplay/tracker-fetch/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {
diff --git a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
index b1b648f99..7a964de3a 100644
--- a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
+++ b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
@@ -3,6 +3,7 @@ import DocLink from 'Shared/DocLink/DocLink';
 import ToggleContent from 'Shared/ToggleContent';
 
 const GraphQLDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <p>This plugin allows you to capture GraphQL requests and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</p>
@@ -19,14 +20,14 @@ const GraphQLDoc = (props) => {
       <div className="py-3" />
 
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import OpenReplay from '@openreplay/tracker';
 import trackerGraphQL from '@openreplay/tracker-graphql';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY,
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -39,7 +40,7 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`}
 import trackerGraphQL from '@openreplay/tracker-graphql/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {
diff --git a/frontend/app/components/Client/Integrations/Integrations.js b/frontend/app/components/Client/Integrations/Integrations.js
index 05036788e..f34050055 100644
--- a/frontend/app/components/Client/Integrations/Integrations.js
+++ b/frontend/app/components/Client/Integrations/Integrations.js
@@ -75,7 +75,7 @@ const TITLE = {
 	[ ASSIST ] : 'Assist',
 }
 
-const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER]
+const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST]
 
 const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic', 'bugsnag', 'cloudwatch', 'elasticsearch', 'sumologic', 'issues' ];
 
@@ -87,12 +87,14 @@ const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic'
 			state.getIn([ name, 'list' ]).size > 0;
 		props.loading = props.loading || state.getIn([ name, 'fetchRequest', 'loading']);
 	})
+  const site = state.getIn([ 'site', 'instance' ]);
 	return {
 		...props,
 		issues: state.getIn([ 'issues', 'list']).first() || {},
 		slackChannelListExists: state.getIn([ 'slack', 'list' ]).size > 0,
 		tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
-		jwt: state.get('jwt')
+		jwt: state.get('jwt'),
+    projectKey: site ? site.projectKey : ''
 	};
 }, {
 	fetchList,
@@ -142,7 +144,9 @@ export default class Integrations extends React.PureComponent {
 		}
 	}
 
-	renderModalContent() { 
+	renderModalContent() {
+    const { projectKey } = this.props;
+
     switch (this.state.modalContent) {
       case SENTRY:
         return <SentryForm onClose={ this.closeModal } />;
@@ -172,21 +176,21 @@ export default class Integrations extends React.PureComponent {
 			case JIRA:
 				return <JiraForm onClose={ this.closeModal } />;
 			case REDUX:
-				return <ReduxDoc onClose={ this.closeModal } />
+				return <ReduxDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case VUE:
-				return <VueDoc onClose={ this.closeModal } />
+				return <VueDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case GRAPHQL:
-				return <GraphQLDoc onClose={ this.closeModal } />
+				return <GraphQLDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case NGRX:
-				return <NgRxDoc onClose={ this.closeModal } />
+				return <NgRxDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case FETCH:
-				return <FetchDoc onClose={ this.closeModal } />
+				return <FetchDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case MOBX:
-				return <MobxDoc onClose={ this.closeModal } />
+				return <MobxDoc onClose={ this.closeModal } projectKey={projectKey} />
 			case PROFILER:
-				return <ProfilerDoc onClose={ this.closeModal } />
+				return <ProfilerDoc onClose={ this.closeModal } projectKey={projectKey} />
       case ASSIST:
-        return <AssistDoc onClose={ this.closeModal } />
+        return <AssistDoc onClose={ this.closeModal } projectKey={projectKey} />
       default:
         return null;
     }
diff --git a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
index 7c4b3233b..79166da56 100644
--- a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
+++ b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
 
 const MobxDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>This plugin allows you to capture MobX events and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@@ -18,14 +19,14 @@ const MobxDoc = (props) => {
 
       <div className="font-bold my-2">Usage</div>
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import OpenReplay from '@openreplay/tracker';
 import trackerMobX from '@openreplay/tracker-mobx';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.use(trackerMobX(<options>)); // check list of available options below
 tracker.start();`}
@@ -37,7 +38,7 @@ tracker.start();`}
 import trackerMobX from '@openreplay/tracker-mobx/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.use(trackerMobX(<options>)); // check list of available options below
 //...
diff --git a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
index 092e93a7d..9aa441c7e 100644
--- a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
+++ b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
 
 const NgRxDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>This plugin allows you to capture NgRx actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@@ -18,7 +19,7 @@ const NgRxDoc = (props) => {
 
       <div className="font-bold my-2">Usage</div>
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import { StoreModule } from '@ngrx/store';
@@ -27,7 +28,7 @@ import OpenReplay from '@openreplay/tracker';
 import trackerNgRx from '@openreplay/tracker-ngrx';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -47,7 +48,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
 import trackerNgRx from '@openreplay/tracker-ngrx/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {
diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
index e61f968b9..f00b98815 100644
--- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
+++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
 
 const ProfilerDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>The profiler plugin allows you to measure your JS functions' performance and capture both arguments and result for each function call.</div>
@@ -18,14 +19,14 @@ const ProfilerDoc = (props) => {
 
       <div className="font-bold my-2">Usage</div>
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import OpenReplay from '@openreplay/tracker';
 import trackerProfiler from '@openreplay/tracker-profiler';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -42,7 +43,7 @@ const fn = profiler('call_name')(() => {
 import trackerProfiler from '@openreplay/tracker-profiler/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {
diff --git a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
index acc083a97..c4fa51240 100644
--- a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
+++ b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from '../../../shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
 
 const ReduxDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>This plugin allows you to capture Redux actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@@ -17,7 +18,7 @@ const ReduxDoc = (props) => {
       <p>Initialize the tracker then put the generated middleware into your Redux chain.</p>
       <div className="py-3" />
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import { applyMiddleware, createStore } from 'redux';
@@ -25,7 +26,7 @@ import OpenReplay from '@openreplay/tracker';
 import trackerRedux from '@openreplay/tracker-redux';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -42,7 +43,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
 import trackerRedux from '@openreplay/tracker-redux/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {
diff --git a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
index 14a7e435a..b6682411c 100644
--- a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
+++ b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
@@ -3,6 +3,7 @@ import ToggleContent from '../../../shared/ToggleContent';
 import DocLink from 'Shared/DocLink/DocLink';
 
 const VueDoc = (props) => {
+  const { projectKey } = props;
   return (
     <div className="p-4">
       <div>This plugin allows you to capture VueX mutations/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@@ -18,7 +19,7 @@ const VueDoc = (props) => {
 
       
       <ToggleContent
-        label="Is SSR?"
+        label="Server-Side-Rendered (SSR)?"
         first={
           <Highlight className="js">
         {`import Vuex from 'vuex'
@@ -26,7 +27,7 @@ import OpenReplay from '@openreplay/tracker';
 import trackerVuex from '@openreplay/tracker-vuex';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 tracker.start();
 //...
@@ -43,7 +44,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
 import trackerVuex from '@openreplay/tracker-vuex/cjs';
 //...
 const tracker = new OpenReplay({
-  projectKey: PROJECT_KEY
+  projectKey: '${projectKey}'
 });
 //...
 function SomeFunctionalComponent() {