diff --git a/README.md b/README.md
index 4dcf940..1e1910e 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,12 @@ To include it in an existing application:
 
 Note: unlike with iframes there is no need to specify a height, the component will decide of its own size and "push" the content around accordingly.
 
+Iframe can still be set with defining `legacy-url` attribute, style can also be set with `legacy-style` attribute :
+  ```html
+  <geor-header legacy-url="myheader.com" legacy-style="width: 100%"></geor-header>
+  ```
+ 
+
 ## Development
 
 On every new commit on main the `header.js` file on the `dist` branch is updated automatically.
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 85d45d0..5cf5e6a 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -7,6 +7,9 @@ import UserIcon from './ui/UserIcon.vue'
 const props = defineProps<{
   lang?: string
   activeApp?: string
+  //legacy option : using old iframe option
+  legacyUrl?: string
+  legacyStyle?: string
 }>()
 
 const state = reactive({
@@ -31,7 +34,13 @@ onMounted(() => {
 })
 </script>
 <template>
-  <header class="host">
+  <div v-if="props.legacyUrl">
+    <iframe
+      v-bind:src="props.legacyUrl"
+      v-bind:style="props.legacyStyle"
+    ></iframe>
+  </div>
+  <header v-if="!props.legacyUrl" class="host">
     <div
       class="admin pr-8 items-center bg-primary/20 text-secondary/80 flex justify-end gap-5 text-sm font-sans"
       v-if="isAdmin"