diff --git a/public/intl/messages/en-US.json b/public/intl/messages/en-US.json
index 9a5ef402e..46ac8d6a0 100644
--- a/public/intl/messages/en-US.json
+++ b/public/intl/messages/en-US.json
@@ -255,6 +255,7 @@
"play": "Play",
"replay": "Replay",
"replay-id": "Replay ID",
+ "replay-code": "Session replay code",
"replay-enabled": "Replay enabled",
"replays": "Replays",
"reports": "Reports",
diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx
index 3c9d37564..d62a6d2ac 100644
--- a/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx
+++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx
@@ -7,6 +7,7 @@ import {
Select,
Slider,
Switch,
+ Text,
TextField,
} from '@umami/react-zen';
import { useState } from 'react';
@@ -14,6 +15,8 @@ import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages, useSubscription, useUpdateQuery, useWebsite } from '@/components/hooks';
import { Video } from '@/components/icons';
+const RECORDER_NAME = 'recorder.js';
+
interface ReplayConfig {
sampleRate?: number;
maskLevel?: string;
@@ -35,6 +38,14 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
const [maxDuration, setMaxDuration] = useState(String(config.maxDuration ?? 300000));
const [blockSelector, setBlockSelector] = useState(config.blockSelector ?? '');
+ const recorderUrl = cloudMode
+ ? `${process.env.cloudUrl}/${RECORDER_NAME}`
+ : `${window?.location?.origin || ''}${process.env.basePath || ''}/${RECORDER_NAME}`;
+
+ let recorderAttrs = `data-website-id="${websiteId}" data-sample-rate="${sampleRate}" data-mask-level="${maskLevel}" data-max-duration="${parseInt(maxDuration, 10) || 300000}"`;
+ if (blockSelector) recorderAttrs += ` data-block-selector="${blockSelector}"`;
+ const recorderCode = ``;
+
const handleToggle = async (value: boolean) => {
const previous = enabled;
setEnabled(value);
@@ -106,6 +117,9 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
{enabled && (
<>
+
+ {t(messages.trackingCode)}
+
n.trim())?.[0] || SCRIPT_NAME;
@@ -30,27 +28,13 @@ export function WebsiteTrackingCode({
const url = trackerScriptName?.startsWith('http') ? trackerScriptName : getUrl(trackerScriptName);
- let code = ``;
-
- if (website?.replayEnabled) {
- const recorderUrl = getUrl(RECORDER_NAME);
- const replayConfig = (website.replayConfig as any) || {};
- let recorderAttrs = `data-website-id="${websiteId}"`;
- if (replayConfig.sampleRate !== undefined)
- recorderAttrs += ` data-sample-rate="${replayConfig.sampleRate}"`;
- if (replayConfig.maskLevel) recorderAttrs += ` data-mask-level="${replayConfig.maskLevel}"`;
- if (replayConfig.maxDuration !== undefined)
- recorderAttrs += ` data-max-duration="${replayConfig.maxDuration}"`;
- if (replayConfig.blockSelector)
- recorderAttrs += ` data-block-selector="${replayConfig.blockSelector}"`;
- code += `\n`;
- }
+ const code = ``;
return (
{t(messages.trackingCode)}
-
+
);
}
diff --git a/src/app/global.css b/src/app/global.css
index 678c7e9ea..cbf11ae67 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -56,6 +56,11 @@ select:-webkit-autofill:focus {
transition: color 5000s ease-in-out 0s;
}
+/* Code snippet textareas */
+.code-textarea textarea {
+ min-height: 100px;
+}
+
/* rrweb-player overrides */
.rr-controller__btns {
gap: 8px;
diff --git a/src/components/messages.ts b/src/components/messages.ts
index e91390bf8..5046f1904 100644
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@@ -371,6 +371,7 @@ export const labels: Record = {
replay: 'label.replay',
replayId: 'label.replay-id',
replayEnabled: 'label.replay-enabled',
+ replayCode: 'label.replay-code',
sampleRate: 'label.sample-rate',
maskLevel: 'label.mask-level',
maxDuration: 'label.max-duration',