diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index b75f306a..60b3bec4 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -218,7 +218,7 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <external-resource-card :resources="resources" @references-loaded="onReferencesLoaded"></external-resource-card>
+      <external-resource-card :resources="resources" :useDOIFormatter="useDOIFormatter" @references-loaded="onReferencesLoaded"></external-resource-card>
     </div>
   </div>
 </template>
@@ -292,6 +292,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 3e01e9e4..9cd5436e 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -37,6 +37,7 @@
                 v-if="tab.id === activeTabId"
                 :envVars="envVars"
                 :ref="'connectivityTab_' + tab.id"
+                :useDOIFormatter="useDOIFormatter"
                 @show-connectivity="showConnectivity"
                 @connectivity-component-click="onConnectivityComponentClick"
               />
@@ -165,7 +166,16 @@ export default {
         x: 0,
         y: 0,
       },
-    }
+    },
+    /**
+     * The option to use DOI.org as citation formatter.
+     * If set to `false`, citation.js will be used.
+     * Default is `true`.
+     */
+    useDOIFormatter: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {