Full example Fixed 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%;
         }
 
         #congreeSidebar {
             width: 350px;
             height: 100%;
             border-left: 2px solid grey;
             border-top: 0;
             border-bottom: 0;
             border-right: 0;
             position: absolute;
             top: 0;
             right: 0;
         }
 
         #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="congreeSidebar"></div>
 <div id="body-container">
     <h1>Some UI from the host application</h1>
     <textarea id="editor1">Das ist ein Txt mi Feler</textarea>
     <input type="text" id="editor2" value="Das snd Headphones."/>
     <textarea id="editor3">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-sidebar.js"></script>
 </body>
 </html>