diff --git a/cdn/document-reader-legacy-layout-style.html b/cdn/document-reader-legacy-layout-style.html
new file mode 100644
index 0000000..25263a3
--- /dev/null
+++ b/cdn/document-reader-legacy-layout-style.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My app</title>
+    <style>
+        #container {
+
+        }
+
+        button {
+            padding: 10px 30px;
+            color: white;
+            font-size: 16px;
+            border-radius: 2px;
+            background-color: #bd7dff;
+            border: 1px solid #bd7dff;
+            cursor: pointer;
+            display: block;
+            margin: 0 auto;
+        }
+        document-reader, camera-snapshot {
+            width: 640px;
+            height: 320px;
+            margin: 0 auto;
+        }
+    </style>
+</head>
+<body>
+<div id="container">
+    <button id="button">Open component</button>
+</div>
+<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
+<script>
+    const { defineComponents, DocumentReaderService } = window.Regula;
+
+    const container = document.querySelector('#container');
+    const button = document.querySelector('#button');
+
+    window.RegulaDocumentSDK = new DocumentReaderService();
+    window.RegulaDocumentSDK.recognizerProcessParam = {
+        processParam: {
+            scenario: 'MrzAndLocate',
+            multipageProcessing: true,
+        },
+    };
+    window.RegulaDocumentSDK.imageProcessParam = {
+        processParam: {
+            scenario: 'MrzAndLocate',
+        },
+    };
+
+    defineComponents().then(() => window.RegulaDocumentSDK.initialize());
+    // To use the document-reader component on test environments, you have to set the base64 license
+    // defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'YOUR_BASE64_LICENSE_KEY' }));
+
+    function createDocumentReader() {
+        const documentReaderElement = document.createElement('document-reader');
+
+        documentReaderElement.settings = {
+            startScreen: true,
+            changeCameraButton: true,
+        };
+
+        return documentReaderElement;
+    }
+
+    function documentReaderListener(data) {
+        if (data.detail.action === 'PROCESS_FINISHED') {
+            const status = data.detail.data?.status;
+            const isFinishStatus = status === 1 || status === 2;
+
+            if (!isFinishStatus || !data.detail.data?.response) return;
+            console.log(data.detail.data.response);
+        }
+        if (data.detail?.action === 'CLOSE') {
+            const reader = document.querySelector('document-reader');
+
+            if (reader) {
+                reader.remove();
+            }
+
+            button.style.display = 'block';
+        }
+    }
+
+    function buttonListener(event) {
+        container.append(createDocumentReader());
+        event.target.style.display = 'none';
+    }
+
+    container.addEventListener('document-reader', documentReaderListener);
+    button.addEventListener('click', buttonListener);
+</script>
+</body>
+</html>
