Full example Dynamic mode

Owned by Claudius Hörth
Feb. 08, 2024
3 min read
<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>3rd Party App</title>
     <style>
         html {
             box-sizing: border-box;
         }
 
         *, *:before, *:after {
             box-sizing: inherit;
         }
 
         * {
             margin: 0;
             padding: 0;
         }
 
         body {
             font: 14px/1.1 Helvetica, Sans-Serif;
             position: absolute;
             left: 0;
             right: 0;
             top: 0;
             bottom: 0;
             height: 100%;
             width: 100%;
         }
 
         #body-container {
             width: calc(100% - 350px);
         }
 
         #editor1 {
             width: 90%;
             height: 500px;
             margin-bottom: 15px
         }
 
         #editor2 {
             width: 90%;
             margin-bottom: 15px
         }
 
         #editor3 {
             width: 90%;
             height: 500px;
             margin-bottom: 15px
         }
     </style>
 </head>
 <body onload="Congree.loadSidebar()">
 <div id="body-container">
     <h1>Some UI from the host application</h1>
     <textarea id="editor1" onfocus="show()" onblur="hide()">Das ist ein Txt mi Feler</textarea>
     <input type="text" id="editor2" value="Das snd Headphones." onfocus="show()" onblur="hide()"/>
     <textarea id="editor3" onfocus="show()" onblur="hide()">Hier sind mine Kopfhrer.</textarea>
 </div>
 <script type="text/javascript" src="https://[hostname]/CongreeWebInterface/cwi-integration.js"></script>
 <script type="text/javascript" src="https://[hostname]/CongreeWebInterface/cwi-integration.loader.sample-overlay.js"></script>
 <script type="text/javascript">
     function show() {
         Congree.SidebarOverlay.show();
     }
     function hide() {
         Congree.SidebarOverlay.hide();
     }
 </script>
 </body>
 </html>