{"page":{"_id":"699dcfc82b9c953b6cf31292","title":"LIVE CHAT","sections":{"byId":{"c451":{"_id":"c451","key":"section","name":"Section 1","attributes":{"style":{"position":"initial","marginTop":"0px","paddingTop":"0px","paddingBottom":"0px","paddingLeft":"0px","paddingRight":"0px","width":"100%","alignSelf":"center","backgroundImage":"","backgroundColor":"#FFFFFFFF","color":"#000000FF","desktop":{"paddingTop":"0px","paddingBottom":"0px"},"tablet":{"paddingTop":"0px","paddingBottom":"0px","marginTop":"0px"},"mobile":{"paddingTop":"0px","paddingBottom":"0px","marginTop":"0px"}},"width":"xl","background":true,"backgroundImageStyle":"None","backgroundVideo":false,"backgroundVideoUrl":"","shadowOverride":false,"borderOverride":false,"cornerOverride":false,"border":false,"corner":false,"shadow":false,"className":"","dirty":null},"components":{"byId":{"3tgC":{"_id":"3tgC","key":"other-html","name":"HTML","attributes":{"htmlstring":"<style>\n*{box-sizing:border-box;margin:0;padding:0;}\nbody{font-family:Arial;}\n\n#chat-container{\n width:100%;\n max-width:500px;\n margin:auto;\n border:1px solid #ddd;\n border-radius:15px;\n background:#e5ddd5;\n display:flex;\n flex-direction:column;\n height:90vh;\n overflow:hidden;\n}\n\n#chat-header{\n background:#075E54;\n color:white;\n padding:12px;\n text-align:center;\n font-weight:bold;\n}\n\n#chat-box{\n flex:1;\n overflow-y:auto;\n padding:10px;\n display:flex;\n flex-direction:column;\n}\n\n.chat-row{display:flex;margin-bottom:10px;}\n.user-bubble{justify-content:flex-start;}\n.admin-bubble{justify-content:flex-end;}\n\n.chat-bubble{\n max-width:75%;\n padding:10px;\n border-radius:12px;\n font-size:14px;\n word-wrap:break-word;\n position:relative;\n}\n\n.user-bubble .chat-bubble{background:white;}\n.admin-bubble .chat-bubble{background:#dcf8c6;}\n\n.chat-time{\n font-size:11px;\n color:gray;\n text-align:right;\n margin-top:5px;\n}\n\n#input-area{\n display:flex;\n gap:5px;\n padding:8px;\n background:white;\n}\n\n#input-area input{\n flex:1;\n padding:10px;\n border-radius:20px;\n border:1px solid #ccc;\n min-width:0;\n}\n\n#input-area button{\n padding:10px 15px;\n border:none;\n border-radius:20px;\n background:#25D366;\n color:white;\n cursor:pointer;\n}\n\n@media(max-width:480px){\n #chat-container{height:100vh;border-radius:0;}\n}\n</style>\n\n<div id=\"chat-container\">\n <div id=\"chat-header\">Live Chat Kampung Adat</div>\n <div id=\"chat-box\"></div>\n\n <div id=\"input-area\">\n <input type=\"text\" id=\"name\" placeholder=\"Nama\">\n <input type=\"text\" id=\"message\" placeholder=\"Tulis pesan...\">\n <button onclick=\"sendMessage()\">Kirim</button>\n </div>\n</div>\n\n<script src=\"https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js\"></script>\n<script src=\"https://www.gstatic.com/firebasejs/10.7.1/firebase-database-compat.js\"></script>\n\n<script>\nconst firebaseConfig = {\n apiKey: \"AIzaSyC0XuP6qh4EL1q70uSFSKfwqZfVMl1BGZ8\",\n authDomain: \"livechat-kampung-adat.firebaseapp.com\",\n databaseURL: \"https://livechat-kampung-adat-default-rtdb.firebaseio.com\",\n projectId: \"livechat-kampung-adat\",\n storageBucket: \"livechat-kampung-adat.firebasestorage.app\",\n messagingSenderId: \"846046117176\",\n appId: \"1:846046117176:web:36c425672871ae383655cd\"\n};\n\nfirebase.initializeApp(firebaseConfig);\nconst db = firebase.database();\n\nfunction formatTime(timestamp){\n const date = new Date(timestamp);\n return date.getHours().toString().padStart(2,'0') + \":\" +\n date.getMinutes().toString().padStart(2,'0');\n}\n\nfunction sendMessage(){\n var name = document.getElementById(\"name\").value;\n var message = document.getElementById(\"message\").value;\n if(name==\"\" || message==\"\") return;\n\n db.ref(\"livechat\").push({\n name:name,\n message:message,\n role:\"user\",\n time:Date.now()\n });\n\n document.getElementById(\"message\").value=\"\";\n}\n\ndb.ref(\"livechat\").on(\"child_added\", function(snapshot){\n var data = snapshot.val();\n var box = document.getElementById(\"chat-box\");\n\n var bubbleClass = data.role === \"admin\" ? \"admin-bubble\" : \"user-bubble\";\n var displayName = data.role === \"admin\" ? \"ADMIN\" : data.name;\n\n box.innerHTML += `\n <div class=\"chat-row ${bubbleClass}\">\n <div class=\"chat-bubble\">\n <b>${displayName}</b><br>\n ${data.message}\n <div class=\"chat-time\">${formatTime(data.time)}</div>\n </div>\n </div>\n `;\n\n box.scrollTop = box.scrollHeight;\n});\n</script>","portalselector":"html-head","inhead":false,"overrideStyle":{"shadow":{"default":{}}},"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}},"MChy":{"_id":"MChy","key":"content-line","name":"Line","attributes":{"design":"basic","style":{"border":"none","height":8,"background":"#c7c7c7ff","width":"100%","maxWidth":"100%","margin":"0","padding":"0"},"solidDotStyle":{"size":"10px","gap":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"20px","margin":"0","padding":"0","background":"radial-gradient(circle at 10px 10px, #FF5A5FFF 5px, transparent 6px)","backgroundSize":"20px 100%"}},"solidDashStyle":{"width":"10px","gapWidth":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"4px","margin":"0","padding":"0","background":"repeating-linear-gradient(to right, #FF5A5FFF 0, #FF5A5FFF 10px, transparent 10px, transparent 20px)"}},"stripeBarberStyle":{"colorA":"#E05241FF","colorB":"#4994ECFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #E05241FF 12px, transparent 12px, transparent 24px, #4994ECFF 24px, #4994ECFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"stripeRoadStyle":{"colorA":"#000000FF","colorB":"#F3C24FFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #000000FF 12px, transparent 12px, transparent 24px, #F3C24FFF 24px, #F3C24FFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"waveNatureStyle":{"colorA":"#67AD5CFF","colorB":"#F3C24FFF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"waveStringStyle":{"colorA":"#54B9D1FF","colorB":"#BD3232FF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"className":"","overrideStyle":{"shadow":{"default":{}}},"shadow":false,"shadowOverride":false,"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}},"JhKT":{"_id":"JhKT","key":"content-line","name":"Line","attributes":{"design":"basic","style":{"border":"none","height":8,"background":"#c7c7c7ff","width":"100%","maxWidth":"100%","margin":"0","padding":"0"},"solidDotStyle":{"size":"10px","gap":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"20px","margin":"0","padding":"0","background":"radial-gradient(circle at 10px 10px, #FF5A5FFF 5px, transparent 6px)","backgroundSize":"20px 100%"}},"solidDashStyle":{"width":"10px","gapWidth":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"4px","margin":"0","padding":"0","background":"repeating-linear-gradient(to right, #FF5A5FFF 0, #FF5A5FFF 10px, transparent 10px, transparent 20px)"}},"stripeBarberStyle":{"colorA":"#E05241FF","colorB":"#4994ECFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #E05241FF 12px, transparent 12px, transparent 24px, #4994ECFF 24px, #4994ECFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"stripeRoadStyle":{"colorA":"#000000FF","colorB":"#F3C24FFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #000000FF 12px, transparent 12px, transparent 24px, #F3C24FFF 24px, #F3C24FFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"waveNatureStyle":{"colorA":"#67AD5CFF","colorB":"#F3C24FFF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"waveStringStyle":{"colorA":"#54B9D1FF","colorB":"#BD3232FF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"className":"","overrideStyle":{"shadow":{"default":{}}},"shadow":false,"shadowOverride":false,"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}},"rNO6":{"_id":"rNO6","key":"other-html","name":"HTML","attributes":{"htmlstring":"<style>\nbody{\n margin:0;\n font-family: Arial, sans-serif;\n padding-bottom:100px;\n}\n\n.floating-menu{\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 75px;\n background: #8B4513;\n display: flex;\n justify-content: space-around;\n align-items: center;\n box-shadow: 0 -2px 10px rgba(0,0,0,0.3);\n z-index: 9999;\n}\n\n.floating-menu a{\n flex:1;\n text-align:center;\n text-decoration:none;\n color:white;\n font-size:12px;\n}\n\n/* ICON biasa */\n.floating-menu svg{\n width:22px;\n height:22px;\n display:block;\n margin:0 auto 3px;\n fill:white;\n}\n\n/* TOMBOL TENGAH BULAT FIX */\n.center-wrapper{\n flex:1;\n text-align:center;\n}\n\n.center-btn{\n position:relative;\n top:-30px;\n width:70px !important;\n aspect-ratio:1/1; /* ini bikin benar-benar bulat */\n background:#DAA520;\n border-radius:50% !important;\n display:flex !important;\n align-items:center !important;\n justify-content:center !important;\n margin:0 auto;\n box-shadow:0 5px 15px rgba(0,0,0,0.4);\n}\n\n.center-btn svg{\n width:30px;\n height:30px;\n margin:0;\n}\n</style>\n\n<div class=\"floating-menu\">\n\n <a href=https://kampungadatbajulan.my.id>\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z\"/>\n </svg>\n HOME\n </a>\n\n <!-- WRAPPER AGAR TIDAK LONJONG -->\n <div class=\"center-wrapper\">\n <a href=https://kampungadatbajulan.my.id/livechat class=\"center-btn\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M21 6h-18v12h4v4l4-4h10z\"/>\n </svg>\n </a>\n </div>\n\n <a href=https://kampungadatbajulan.my.id/bantuan>\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12 2a10 10 0 100 20 10 10 0 000-20z\"/>\n </svg>\n HELP\n </a>\n\n</div>","portalselector":"html-head","inhead":false,"overrideStyle":{"shadow":{"default":{}}},"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}},"GH3c":{"_id":"GH3c","key":"content-headline","name":"Headline","attributes":{"text":"<p>LIVE CHAT</p>","iconBefore":"","iconAfter":"","iconBeforeStash":"","iconAfterStash":"","buttonIconPosition":"before","boldColor":"#000000FF","linkColor":"#2E47BAFF","groupStyle":{"paddingTop":"10px","paddingBottom":"10px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px","mobile":{"paddingTop":"10px","paddingBottom":"10px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px","textAlign":"center","dynamicStyleKey":["textAlign"]},"tablet":{"paddingTop":"10px","paddingBottom":"10px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px"},"dynamicStyleKey":["mobile"]},"style":{"opacity":"100%","textShadow":"0px 8px 8px #00000000","background":"#CCCBCBFF","color":"#000000FF","mobile":{"textTransform":"none","textDecoration":"none","paddingLeft":"20px","paddingRight":"20px","dynamicStyleKey":["textTransform","textDecoration","paddingLeft","paddingRight"]},"dynamicStyleKey":["mobile"]},"overrideStyle":{"font":{"headline":{}},"mobile":{"font":{"headline":{"default":""}}}},"enableBackground":false,"headlineOverride":false,"paddingTopBottom":"same","backgroundType":"none","marginLeftRight":"same","textShadow":false,"enableIcon":false,"iconColor":"#000000FF","asChildren":{"groupStyle":{"paddingTop":"5px","paddingBottom":"5px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px","mobile":{"paddingTop":"5px","paddingBottom":"5px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px","textAlign":"center","dynamicStyleKey":["textAlign"]},"tablet":{"paddingTop":"5px","paddingBottom":"5px","paddingLeft":"0px","paddingRight":"0px","marginTop":"0px","marginBottom":"0px","marginLeft":"0px","marginRight":"0px"},"dynamicStyleKey":["mobile"]},"dynamicStyleKey":["groupStyle"]},"classNamemobile":"sg-headline-s","dynamicStyleKey":["classNamemobile","groupStyle","style","asChildren"],"isGenFromAi":false,"dirty":null,"customEditorStyles":{},"fonts":{},"headlineOverridemobile":false},"components":{"byId":{},"allIds":[]}},"Aop6":{"_id":"Aop6","key":"content-line","name":"Line","attributes":{"design":"basic","style":{"border":"none","height":8,"background":"#c7c7c7ff","width":"100%","maxWidth":"100%","margin":"0","padding":"0"},"solidDotStyle":{"size":"10px","gap":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"20px","margin":"0","padding":"0","background":"radial-gradient(circle at 10px 10px, #FF5A5FFF 5px, transparent 6px)","backgroundSize":"20px 100%"}},"solidDashStyle":{"width":"10px","gapWidth":"10px","color":"#FF5A5FFF","style":{"maxWidth":"100%","width":"100%","height":"4px","margin":"0","padding":"0","background":"repeating-linear-gradient(to right, #FF5A5FFF 0, #FF5A5FFF 10px, transparent 10px, transparent 20px)"}},"stripeBarberStyle":{"colorA":"#E05241FF","colorB":"#4994ECFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #E05241FF 12px, transparent 12px, transparent 24px, #4994ECFF 24px, #4994ECFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"stripeRoadStyle":{"colorA":"#000000FF","colorB":"#F3C24FFF","width1":"12px","width2":"12px","gapWidth":"12px","reverse":false,"floating":false,"style":{"height":"12px","background":"linear-gradient(to right, #000000FF 12px, transparent 12px, transparent 24px, #F3C24FFF 24px, #F3C24FFF 36px, transparent 36px, transparent 48px)","backgroundSize":"48px 100%","transform":"skewX(51deg)","transformOrigin":"bottom left"}},"waveNatureStyle":{"colorA":"#67AD5CFF","colorB":"#F3C24FFF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"waveStringStyle":{"colorA":"#54B9D1FF","colorB":"#BD3232FF","height":"48px","stroke":"4px","reverse":false,"shadow":false},"className":"","overrideStyle":{"shadow":{"default":{}}},"shadow":false,"shadowOverride":false,"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}}},"allIds":["MChy","GH3c","Aop6","3tgC","JhKT","rNO6"]}}},"allIds":["c451"]},"slug":"livechat","canvas":"2","state":"publish","userUuid":"6985fc276a94ed28e586ca6c","publishSlug":"livechat","slugName":"kampungadatbajulan","isOriginal":true,"isABTesting":false,"autoSave":false,"index":false,"settings":{"published_on":null,"keyword_phrase_options":[],"seo_title":["title","keyword","separator"],"search_engine_display":false,"search_engine_follow":false,"scripts":{"head":"","head_desktop":"","head_mobile":"","footer":"","footer_desktop":"","footer_mobile":""},"utm_trackings":{"utm_source":false,"utm_medium":false,"utm_campaign":false,"utm_term":false,"utm_content":false}},"permalink":"https://kampungadatbajulan.buat.page/livechat","pageContentId":"699dcfc82b9c953b6cf31294"}}