diff --git a/l10n/messages.pot b/l10n/messages.pot
index e124504676..70a6639a33 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -124,6 +124,9 @@ msgstr ""
 msgid "Emoji picker"
 msgstr ""
 
+msgid "Enable interactive view"
+msgstr ""
+
 msgid "Enter link"
 msgstr ""
 
diff --git a/src/components/NcRichText/NcReferenceList.vue b/src/components/NcRichText/NcReferenceList.vue
index 48a73f1f00..1f59b950cb 100644
--- a/src/components/NcRichText/NcReferenceList.vue
+++ b/src/components/NcRichText/NcReferenceList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="isVisible" class="widgets--list" :class="{'icon-loading': loading }">
 		<div v-for="reference in displayedReferences" :key="reference?.openGraphObject?.id">
-			<NcReferenceWidget :reference="reference" />
+			<NcReferenceWidget :reference="reference" :interactive="interactive" :interactive-opt-in="interactiveOptIn" />
 		</div>
 	</div>
 </template>
@@ -35,6 +35,10 @@ export default {
 			default: false,
 		},
 		interactive: {
+			type: Boolean,
+			default: true,
+		},
+		interactiveOptIn: {
 			type: Boolean,
 			default: false,
 		},
@@ -65,12 +69,7 @@ export default {
 			return this.values[0] ?? null
 		},
 		displayedReferences() {
-			return this.values.slice(0, this.limit).map(reference => {
-				return {
-					...reference,
-					interactive: this.interactive,
-				}
-			})
+			return this.values.slice(0, this.limit)
 		},
 		fallbackReference() {
 			return {
@@ -129,6 +128,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.widget--list {
+	width: var(--widget-full-width, 100%);
+}
+
 .widgets--list.icon-loading {
 	min-height: 44px;
 }
diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
index c2a63b009b..6f7687b9d6 100644
--- a/src/components/NcRichText/NcReferenceWidget.vue
+++ b/src/components/NcRichText/NcReferenceWidget.vue
@@ -1,8 +1,9 @@
 <template>
-	<div>
-		<div v-if="reference && hasCustomWidget" class="widget-custom">
-			<div ref="customWidget" />
-		</div>
+	<div ref="widgetRoot" :class="{'toggle-interactive': hasInteractiveView && !isInteractive }">
+		<div v-if="reference && hasCustomWidget"
+			ref="customWidget"
+			class="widget-custom"
+			:class="{ 'full-width': hasFullWidth }" />
 
 		<component :is="referenceWidgetLinkComponent"
 			v-else-if="!noAccess && reference && reference.openGraphObject && !hasCustomWidget"
@@ -11,37 +12,105 @@
 			class="widget-default">
 			<img v-if="reference.openGraphObject.thumb" class="widget-default--image" :src="reference.openGraphObject.thumb">
 			<div class="widget-default--details">
-				<p class="widget-default--name">{{ reference.openGraphObject.name }}</p>
-				<p class="widget-default--description" :style="descriptionStyle">{{ reference.openGraphObject.description }}</p>
-				<p class="widget-default--link">{{ compactLink }}</p>
+				<p class="widget-default--name">
+					{{ reference.openGraphObject.name }}
+				</p>
+				<p class="widget-default--description" :style="descriptionStyle">
+					{{ reference.openGraphObject.description }}
+				</p>
+				<p class="widget-default--link">
+					{{ compactLink }}
+				</p>
 			</div>
 		</component>
+		<NcButton v-if="interactiveOptIn && hasInteractiveView && !isInteractive" class="toggle-interactive--button" @click="enableInteractive">
+			{{ t('Enable interactive view') }}
+		</NcButton>
 	</div>
 </template>
 <script>
-import { useResizeObserver } from '@vueuse/core'
+import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
+import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 
+import { t } from '../../l10n.js'
 import { getRoute } from './autolink.ts'
-import { renderWidget, isWidgetRegistered, destroyWidget } from './../../functions/reference/widgets.js'
+import { renderWidget, isWidgetRegistered, destroyWidget, hasInteractiveView, hasFullWidth } from './../../functions/reference/widgets.ts'
+
+import NcButton from '../../components/NcButton/NcButton.vue'
+
+const IDLE_TIMEOUT = 3 * 60 * 1000 // 3 minutes outside of viewport before widget is removed from the DOM
 
 export default {
 	name: 'NcReferenceWidget',
+	components: {
+		NcButton,
+	},
 	props: {
 		reference: {
 			type: Object,
 			required: true,
 		},
+		interactive: {
+			type: Boolean,
+			default: true,
+		},
+		interactiveOptIn: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		const compact = ref(3)
+		const isVisible = ref(false)
+		// This is the widget root node
+		const widgetRoot = ref()
+
+		useIntersectionObserver(widgetRoot, (entries) => {
+			isVisible.value = entries[0]?.isIntersecting ?? false
+		})
+
+		useResizeObserver(widgetRoot, (entries) => {
+			if (entries[0].contentRect.width < 450) {
+				compact.value = 0
+			} else if (entries[0].contentRect.width < 550) {
+				compact.value = 1
+			} else if (entries[0].contentRect.width < 650) {
+				compact.value = 2
+			} else {
+				compact.value = 3
+			}
+		})
+
+		return {
+			compact,
+			isVisible,
+			widgetRoot,
+		}
 	},
+
 	data() {
 		return {
-			compact: 3,
+			showInteractive: false,
+			rendered: false,
+			idleTimeout: null,
 		}
 	},
+
 	computed: {
+		isInteractive() {
+			return (!this.interactiveOptIn && this.interactive) || this.showInteractive
+		},
+		hasFullWidth() {
+			return hasFullWidth(this.reference.richObjectType)
+		},
 		hasCustomWidget() {
 			return isWidgetRegistered(this.reference.richObjectType)
 		},
+		hasInteractiveView() {
+			return isWidgetRegistered(this.reference.richObjectType) && hasInteractiveView(this.reference.richObjectType)
+		},
 		noAccess() {
 			return this.reference && !this.reference.accessible
 		},
@@ -84,25 +153,41 @@ export default {
 				: { href: this.reference.openGraphObject.link, target: '_blank' }
 		},
 	},
-	mounted() {
-		this.renderWidget()
-		useResizeObserver(this.$el, entries => {
-			if (entries[0].contentRect.width < 450) {
-				this.compact = 0
-			} else if (entries[0].contentRect.width < 550) {
-				this.compact = 1
-			} else if (entries[0].contentRect.width < 650) {
-				this.compact = 2
-			} else {
-				this.compact = 3
-			}
+	watch: {
+		isVisible: {
+			handler(val) {
+				if (!val) {
+					this.idleTimeout = setTimeout(() => {
+						// If the widget is still outside of viewport after timeout, destroy it
+						if (!this.isVisible) {
+							this.destroyWidget()
+						}
+					}, IDLE_TIMEOUT)
+					return
+				}
 
-		})
+				if (this.idleTimeout) {
+					clearTimeout(this.idleTimeout)
+					this.idleTimeout = null
+				}
+
+				if (!this.rendered) {
+					this.renderWidget()
+				}
+			},
+			immediate: true,
+		},
 	},
 	beforeUnmount() {
-		destroyWidget(this.reference.richObjectType, this.$el)
+		this.destroyWidget()
 	},
 	methods: {
+		t,
+
+		enableInteractive() {
+			this.showInteractive = true
+			this.renderWidget()
+		},
 		renderWidget() {
 			if (this.$refs.customWidget) {
 				this.$refs.customWidget.innerHTML = ''
@@ -110,11 +195,24 @@ export default {
 			if (this?.reference?.richObjectType === 'open-graph') {
 				return
 			}
+			// create a separate element so we can rerender on the ref again
+			const widget = document.createElement('div')
+			this.$refs.customWidget.appendChild(widget)
 			this.$nextTick(() => {
 				// Waiting for the ref to become available
-				renderWidget(this.$refs.customWidget, this.reference)
+				renderWidget(widget, {
+					...this.reference,
+					interactive: this.isInteractive,
+				})
+				this.rendered = true
 			})
 		},
+		destroyWidget() {
+			if (this.rendered) {
+				destroyWidget(this.reference.richObjectType, this.$el)
+				this.rendered = false
+			}
+		},
 	},
 }
 </script>
@@ -134,6 +232,12 @@ export default {
 
 .widget-custom {
 	@include widget;
+
+	&.full-width {
+		width: var(--widget-full-width, 100%) !important;
+		left: calc( (var(--widget-full-width, 100%) - 100%) / 2 * -1);
+		position: relative;
+	}
 }
 
 .widget-access {
@@ -204,4 +308,22 @@ export default {
 		white-space: nowrap;
 	}
 }
+
+.toggle-interactive {
+	position: relative;
+	.toggle-interactive--button {
+		position: absolute;
+		top: 50%;
+		z-index: 10000;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+		opacity: 0;
+	}
+
+	&:focus-within, &:hover {
+		.toggle-interactive--button {
+			opacity: 1;
+		}
+	}
+}
 </style>
diff --git a/src/components/NcRichText/index.js b/src/components/NcRichText/index.js
index 4d9580c093..56b11ea8c9 100644
--- a/src/components/NcRichText/index.js
+++ b/src/components/NcRichText/index.js
@@ -22,7 +22,7 @@
 
 import NcRichText from './NcRichText.vue'
 
-import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.js'
+import { registerWidget, renderWidget, isWidgetRegistered } from './../../functions/reference/widgets.ts'
 import NcReferenceList from './NcReferenceList.vue'
 import NcReferenceWidget from './NcReferenceWidget.vue'
 import NcReferencePicker from './NcReferencePicker/NcReferencePicker.vue'
diff --git a/src/functions/reference/index.js b/src/functions/reference/index.js
index 7d6e54beb2..24077ae1e5 100644
--- a/src/functions/reference/index.js
+++ b/src/functions/reference/index.js
@@ -1,4 +1,4 @@
-import { registerWidget, renderWidget, isWidgetRegistered } from './widgets.js'
+import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.ts'
 import { getLinkWithPicker } from './referencePickerModal.js'
 import {
 	getProvider,
@@ -18,6 +18,7 @@ export {
 	registerWidget,
 	renderWidget,
 	isWidgetRegistered,
+	hasInteractiveView,
 
 	NcCustomPickerRenderResult,
 	registerCustomPickerElement,
diff --git a/src/functions/reference/widgets.js b/src/functions/reference/widgets.js
deleted file mode 100644
index 5b304f271c..0000000000
--- a/src/functions/reference/widgets.js
+++ /dev/null
@@ -1,54 +0,0 @@
-if (!window._vue_richtext_widgets) {
-	window._vue_richtext_widgets = {}
-}
-
-const isWidgetRegistered = (id) => {
-	return !!window._vue_richtext_widgets[id]
-}
-
-const registerWidget = (id, callback, onDestroy = (el) => {}) => {
-	if (window._vue_richtext_widgets[id]) {
-		console.error('Widget for id ' + id + ' already registered')
-		return
-	}
-
-	window._vue_richtext_widgets[id] = {
-		id,
-		callback,
-		onDestroy,
-	}
-}
-
-const renderWidget = (el, { richObjectType, richObject, accessible, interactive }) => {
-	if (richObjectType === 'open-graph') {
-		return
-	}
-
-	if (!window._vue_richtext_widgets[richObjectType]) {
-		console.error('Widget for rich object type ' + richObjectType + ' not registered')
-		return
-	}
-
-	window._vue_richtext_widgets[richObjectType].callback(el, { richObjectType, richObject, accessible, interactive })
-}
-
-const destroyWidget = (richObjectType, el) => {
-	if (richObjectType === 'open-graph') {
-		return
-	}
-
-	if (!window._vue_richtext_widgets[richObjectType]) {
-		return
-	}
-
-	window._vue_richtext_widgets[richObjectType].onDestroy(el)
-}
-
-window._registerWidget = registerWidget
-
-export {
-	registerWidget,
-	renderWidget,
-	destroyWidget,
-	isWidgetRegistered,
-}
diff --git a/src/functions/reference/widgets.ts b/src/functions/reference/widgets.ts
new file mode 100644
index 0000000000..85095eb9dd
--- /dev/null
+++ b/src/functions/reference/widgets.ts
@@ -0,0 +1,103 @@
+interface WidgetRenderProperties {
+	richObjectType: string;
+	richObject: object;
+	accessible: boolean;
+	interactive: boolean;
+}
+
+type widgetRenderCallback = (el: HTMLElement, properties: WidgetRenderProperties) => void;
+type widgetDestroyCallback = (el: HTMLElement) => void;
+
+interface WidgetProps {
+	id: string;
+	hasInteractiveView: boolean;
+	fullWidth: boolean;
+	callback: widgetRenderCallback;
+	onDestroy: widgetDestroyCallback;
+}
+
+interface WidgetPropsOptional {
+	hasInteractiveView?: boolean;
+	fullWidth?: boolean;
+}
+
+declare global {
+	interface Window {
+		_vue_richtext_widgets: Record<string, WidgetProps>;
+		_registerWidget: (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => void;
+	}
+}
+
+if (!window._vue_richtext_widgets) {
+	window._vue_richtext_widgets = {}
+}
+
+const isWidgetRegistered = (id: string) => {
+	return !!window._vue_richtext_widgets[id]
+}
+
+const hasInteractiveView = (id: string) => {
+	return !!window._vue_richtext_widgets[id]?.hasInteractiveView
+}
+
+export const hasFullWidth = (id: string) => {
+	return !!window._vue_richtext_widgets[id]?.fullWidth ?? false
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const registerWidget = (id: string, callback: widgetRenderCallback, onDestroy = (el: HTMLElement) => {}, props: WidgetPropsOptional) => {
+	const propsWithDefaults = {
+		hasInteractiveView: true,
+		fullWidth: false,
+		...props,
+	}
+
+	if (window._vue_richtext_widgets[id]) {
+		console.error('Widget for id ' + id + ' already registered')
+		return
+	}
+
+	window._vue_richtext_widgets[id] = {
+		id,
+		callback,
+		onDestroy,
+		...propsWithDefaults,
+	}
+}
+
+const renderWidget = (el: HTMLElement, { richObjectType, richObject, accessible, interactive }) => {
+	if (richObjectType === 'open-graph') {
+		return
+	}
+
+	if (!window._vue_richtext_widgets[richObjectType]) {
+		console.error('Widget for rich object type ' + richObjectType + ' not registered')
+		return
+	}
+
+	window._vue_richtext_widgets[richObjectType].callback(el, { richObjectType, richObject, accessible, interactive })
+}
+
+const destroyWidget = (richObjectType: string, el: HTMLElement) => {
+	if (richObjectType === 'open-graph') {
+		return
+	}
+
+	if (!window._vue_richtext_widgets[richObjectType]) {
+		return
+	}
+
+	window._vue_richtext_widgets[richObjectType].onDestroy(el)
+}
+
+window._registerWidget = (id: string, callback: widgetRenderCallback, onDestroy: widgetDestroyCallback, props: WidgetPropsOptional) => {
+	registerWidget(id, callback, onDestroy, props)
+}
+
+export {
+	registerWidget,
+	renderWidget,
+	destroyWidget,
+	isWidgetRegistered,
+	hasInteractiveView,
+}
diff --git a/src/functions/registerReference/index.js b/src/functions/registerReference/index.js
index 2d6f64f850..ec3ad70905 100644
--- a/src/functions/registerReference/index.js
+++ b/src/functions/registerReference/index.js
@@ -3,7 +3,7 @@ export {
 	renderWidget,
 	destroyWidget,
 	isWidgetRegistered,
-} from './../reference/widgets.js'
+} from './../reference/widgets.ts'
 export {
 	NcCustomPickerRenderResult,
 	registerCustomPickerElement,