diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
index fe34af72e1e..b19aa2355f6 100644
--- a/dotcom-rendering/src/components/ArticleMeta.apps.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
@@ -37,6 +37,7 @@ type Props = {
 	isCommentable: boolean;
 	pageId?: string;
 	headline?: string;
+	isPreview?: boolean;
 };
 
 const metaGridContainer = css`
@@ -230,6 +231,7 @@ export const ArticleMetaApps = ({
 	isCommentable,
 	pageId,
 	headline,
+	isPreview,
 }: Props) => {
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
@@ -373,7 +375,7 @@ export const ArticleMetaApps = ({
 			</div>
 			{shouldShowListenToArticleButton && (
 				<Island priority="feature" defer={{ until: 'visible' }}>
-					<ListenToArticle articleId={pageId} />
+					<ListenToArticle articleId={pageId} isPreview={isPreview} />
 				</Island>
 			)}
 		</div>
diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
index 843dc5e4e06..481298b95d6 100644
--- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx
+++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
@@ -2,10 +2,12 @@ import { log } from '@guardian/libs';
 import { useEffect, useState } from 'react';
 import { getListenToArticleClient } from '../lib/bridgetApi';
 import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
+import { useConfig } from './ConfigContext';
 import { ListenToArticleButton } from './ListenToArticleButton';
 
 type Props = {
 	articleId: string;
+	isPreview?: boolean;
 };
 
 export const formatAudioDuration = (
@@ -24,12 +26,14 @@ export const formatAudioDuration = (
 	return formattedDuration;
 };
 
-export const ListenToArticle = ({ articleId }: Props) => {
+export const ListenToArticle = ({ articleId, isPreview = false }: Props) => {
+	const { isDev } = useConfig();
 	const [showButton, setShowButton] = useState<boolean>(false);
 	const [audioDurationSeconds, setAudioDurationSeconds] = useState<
 		number | undefined
 	>(undefined);
 
+	console.log('ListenToArticle isPreview=', isPreview);
 	const isBridgetCompatible = useIsBridgetCompatible('8.7.0');
 	useEffect(() => {
 		if (isBridgetCompatible) {
@@ -55,8 +59,12 @@ export const ListenToArticle = ({ articleId }: Props) => {
 
 					setShowButton(false);
 				});
+		} else if (isPreview || isDev) {
+			// To facilitate design and development in non-Bridget compatible environments,
+			// we want to show the button if we're in preview mode or development mode
+			setShowButton(true);
 		}
-	}, [articleId, isBridgetCompatible]);
+	}, [articleId, isPreview, isDev, isBridgetCompatible]);
 
 	const listenToArticleHandler = () => {
 		void getListenToArticleClient()
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index 17341643b98..36861158b2d 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -277,7 +277,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 	const isWeb = renderingTarget === 'Web';
 	const isApps = renderingTarget === 'Apps';
 	const {
-		config: { isPaidContent, host },
+		config: { isPaidContent, host, isPreview },
 	} = article;
 
 	const showBodyEndSlot =
@@ -460,6 +460,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 										>
 											<ListenToArticle
 												articleId={article.pageId}
+												isPreview={isPreview}
 											/>
 										</Island>
 									</div>
@@ -493,6 +494,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 													article.config.shortUrlId
 												}
 												pageId={article.config.pageId}
+												isPreview={isPreview}
 											></ArticleMetaApps>
 										</Hide>
 										<Hide when="below" breakpoint="leftCol">
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index dd427888131..56ab1c62592 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -233,7 +233,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 
 	const {
-		config: { isPaidContent, host, hasSurveyAd },
+		config: { isPaidContent, host, hasSurveyAd, isPreview },
 		editionId,
 	} = article;
 	const isWeb = renderingTarget === 'Web';
@@ -535,6 +535,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 										>
 											<ListenToArticle
 												articleId={article.pageId}
+												isPreview={isPreview}
 											/>
 										</Island>
 									</div>
@@ -588,6 +589,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 													article.config.shortUrlId
 												}
 												pageId={article.config.pageId}
+												isPreview={isPreview}
 											></ArticleMetaApps>
 										</Hide>
 										<Hide when="below" breakpoint="leftCol">
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index cc7895af63d..8d01b4f5fe6 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -205,7 +205,7 @@ interface AppsProps extends CommonProps {
 export const InteractiveLayout = (props: WebProps | AppsProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 	const {
-		config: { isPaidContent, host, hasSurveyAd },
+		config: { isPaidContent, host, hasSurveyAd, isPreview },
 		editionId,
 	} = article;
 
@@ -406,6 +406,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 													pageId={
 														article.config.pageId
 													}
+													isPreview={isPreview}
 												></ArticleMetaApps>
 											</Hide>
 											<Hide until="leftCol">
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index 8d0d1989dfa..4d0501b6685 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -224,7 +224,7 @@ interface AppsProps extends CommonProps {
 export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 	const {
-		config: { isPaidContent, host, hasSurveyAd },
+		config: { isPaidContent, host, hasSurveyAd, isPreview },
 		editionId,
 	} = article;
 	const isWeb = renderingTarget === 'Web';
@@ -427,6 +427,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 										>
 											<ListenToArticle
 												articleId={article.pageId}
+												isPreview={isPreview}
 											/>
 										</Island>
 									</div>
@@ -468,6 +469,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 													article.config.shortUrlId
 												}
 												pageId={article.config.pageId}
+												isPreview={isPreview}
 											></ArticleMetaApps>
 										</Hide>
 										<Hide until="leftCol">
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 1e629b60229..b85a922617e 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -339,7 +339,7 @@ interface AppProps extends Props {
 export const StandardLayout = (props: WebProps | AppProps) => {
 	const { article, format, renderingTarget, serverTime } = props;
 	const {
-		config: { isPaidContent, host, hasSurveyAd },
+		config: { isPaidContent, host, hasSurveyAd, isPreview },
 		editionId,
 	} = article;
 
@@ -587,6 +587,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 													article.config.shortUrlId
 												}
 												pageId={article.config.pageId}
+												isPreview={isPreview}
 											></ArticleMetaApps>
 										</div>
 									</Hide>
@@ -673,6 +674,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 											>
 												<ListenToArticle
 													articleId={article.pageId}
+													isPreview={isPreview}
 												/>
 											</Island>
 										</div>
diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx
index 478bf3ea8dc..0719a472ac9 100644
--- a/dotcom-rendering/src/server/render.article.apps.tsx
+++ b/dotcom-rendering/src/server/render.article.apps.tsx
@@ -35,6 +35,7 @@ export const renderArticle = (
 		darkModeAvailable: true,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: frontendData.editionId,
+		isDev: process.env.NODE_ENV === 'development',
 	};
 
 	const { html, extractedCss } = renderToStringWithEmotion(
diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts
index bc67281038c..6b580f51495 100644
--- a/dotcom-rendering/src/types/configContext.ts
+++ b/dotcom-rendering/src/types/configContext.ts
@@ -14,10 +14,12 @@ export type Config =
 			darkModeAvailable: boolean;
 			assetOrigin: AssetOrigin;
 			editionId: EditionId;
+			isDev?: boolean;
 	  }>
 	| Readonly<{
 			renderingTarget: Extract<RenderingTarget, 'Apps'>;
 			darkModeAvailable: boolean;
 			assetOrigin: AssetOrigin;
 			editionId: EditionId;
+			isDev?: boolean;
 	  }>;