{"id":8749,"date":"2026-03-15T08:06:35","date_gmt":"2026-03-15T07:06:35","guid":{"rendered":"https:\/\/adio.chat\/?page_id=8749"},"modified":"2026-04-06T15:03:29","modified_gmt":"2026-04-06T13:03:29","slug":"install","status":"publish","type":"page","link":"https:\/\/staging.adio.chat\/en\/install\/","title":{"rendered":"Install"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nInstall ADIO.chat<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --purple: #8B1F7A;\n --purple-light: #f9f0f7;\n --purple-mid: #c96bb8;\n --dark: #1a1030;\n --text: #2d2040;\n --muted: #7a6d88;\n --border: #e8ddf0;\n --white: #ffffff;\n --step-bg: #fdf7fc;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--white);\n color: var(--text);\n min-height: 100vh;\n }\n\n .hero {\n background: var(--dark);\n padding: 1.75rem 1.5rem 1.5rem;\n text-align: center;\n }\n\n .logo-area {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin-bottom: 1.5rem;\n }\n\n\n .hero h1 {\n font-family: 'DM Serif Display', serif;\n font-size: clamp(1.6rem, 5vw, 2.2rem);\n color: var(--white);\n font-weight: 400;\n line-height: 1.25;\n margin-bottom: 0.75rem;\n }\n\n .hero p {\n color: rgba(255,255,255,0.65);\n font-size: 1rem;\n line-height: 1.6;\n max-width: 480px;\n margin: 0 auto;\n }\n\n .tabs-wrap {\n max-width: 580px;\n margin: 0 auto;\n padding: 2rem 1.5rem 0;\n }\n\n .tabs {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border: 1.5px solid var(--border);\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .tab {\n padding: 0.9rem 1rem;\n text-align: center;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n background: var(--white);\n color: var(--muted);\n border: none;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n\n .tab:first-child {\n border-right: 1.5px solid var(--border);\n }\n\n .tab.active {\n background: var(--purple);\n color: var(--white);\n }\n\n .tab svg {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n }\n\n .panel { display: none; }\n .panel.active { display: block; }\n\n .notice {\n background: #fff8e6;\n border: 1.5px solid #f0d88a;\n border-radius: 10px;\n padding: 0.85rem 1rem;\n font-size: 0.88rem;\n color: #7a5c00;\n line-height: 1.5;\n margin-bottom: 1.75rem;\n display: flex;\n gap: 8px;\n align-items: flex-start;\n }\n\n .notice svg {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .steps {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-bottom: 3rem;\n }\n\n .step {\n display: flex;\n gap: 1rem;\n align-items: flex-start;\n background: var(--step-bg);\n border: 1.5px solid var(--border);\n border-radius: 14px;\n padding: 1rem 1.1rem;\n }\n\n .step-num {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: var(--purple);\n color: var(--white);\n font-size: 0.85rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .step-body {\n flex: 1;\n }\n\n .step-title {\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--text);\n margin-bottom: 0.25rem;\n line-height: 1.3;\n }\n\n .step-desc {\n font-size: 0.88rem;\n color: var(--muted);\n line-height: 1.55;\n }\n\n .step-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: 8px;\n padding: 4px 8px;\n margin-top: 0.5rem;\n gap: 5px;\n font-size: 0.82rem;\n color: var(--text);\n font-weight: 500;\n }\n\n .step-icon svg {\n width: 14px;\n height: 14px;\n color: var(--purple);\n }\n\n .detected-banner {\n background: var(--purple-light);\n border: 1.5px solid var(--purple-mid);\n border-radius: 10px;\n padding: 0.75rem 1rem;\n font-size: 0.88rem;\n color: var(--purple);\n font-weight: 500;\n text-align: center;\n margin-bottom: 1.5rem;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero\">\n <div class=\"logo-area\">\n <img decoding=\"async\" src=\"https:\/\/staging.adio.chat\/wp-content\/uploads\/2026\/03\/adio-chat-logo-white.png\" style=\"height:68px; width:auto;\">\n <\/div>\n <h1>Install the ADIO app<\/h1>\n <p>Add ADIO.chat to your home screen for the full app experience \u2014 no App Store required.<\/p>\n<\/div>\n\n<div class=\"tabs-wrap\">\n\n <div id=\"detected-msg\" class=\"detected-banner\" style=\"display:none;\"><\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" id=\"tab-ios\" onclick=\"showTab('ios')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"\/><\/svg>\n iPhone \/ iPad\n <\/button>\n <button class=\"tab\" id=\"tab-android\" onclick=\"showTab('android')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.523 15.341A5.23 5.23 0 0 0 19.5 11.25a5.23 5.23 0 0 0-1.977-4.091l1.059-1.832a.375.375 0 1 0-.65-.376l-1.08 1.868A7.91 7.91 0 0 0 12 6a7.91 7.91 0 0 0-4.852 1.819L6.068 4.951a.375.375 0 1 0-.65.376l1.059 1.832A5.23 5.23 0 0 0 4.5 11.25a5.23 5.23 0 0 0 1.977 4.091C4.91 16.196 3.75 17.858 3.75 19.5h16.5c0-1.642-1.16-3.304-2.727-4.159zM9 13.5a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5zm6 0a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5z\"\/><\/svg>\n Android\n <\/button>\n <\/div>\n\n <!-- iOS Panel -->\n <div class=\"panel active\" id=\"panel-ios\">\n <div class=\"notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\/><\/svg>\n <span>This only works in <strong>Safari<\/strong>. If you're in Chrome or another browser, copy the address and open it in Safari first.<\/span>\n <\/div>\n\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Open ADIO.chat in Safari<\/div>\n <div class=\"step-desc\">Make sure you're using Safari \u2014 it's the only browser on iPhone that supports adding web apps to your home screen.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Tap the Share button<\/div>\n <div class=\"step-desc\">At the bottom of the screen, tap the Share button \u2014 it looks like a box with an arrow pointing upward.<\/div>\n <div class=\"step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"\/><polyline points=\"16 6 12 2 8 6\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"\/><\/svg>\n Share\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Tap \"Add to Home Screen\"<\/div>\n <div class=\"step-desc\">Scroll down the share sheet until you see \"Add to Home Screen\" and tap it.<\/div>\n <div class=\"step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"16\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><\/svg>\n Add to Home Screen\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">4<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Tap \"Add\" to confirm<\/div>\n <div class=\"step-desc\">A preview will appear showing the app name and icon. Tap <strong>Add<\/strong> in the top right corner \u2014 and you're done. The ADIO icon will appear on your home screen.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Android Panel -->\n <div class=\"panel\" id=\"panel-android\">\n <div class=\"notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\/><\/svg>\n <span>Works best in <strong>Chrome<\/strong>. You may see an automatic install prompt \u2014 if so, just tap it!<\/span>\n <\/div>\n\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-num\">1<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Open ADIO.chat in Chrome<\/div>\n <div class=\"step-desc\">Navigate to adio.chat in Chrome. You may see an \"Add to Home Screen\" banner appear automatically at the bottom \u2014 if so, tap it and you're done!<\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">2<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">If no banner appears, tap the menu<\/div>\n <div class=\"step-desc\">Tap the three-dot menu icon in the top right corner of Chrome.<\/div>\n <div class=\"step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"12\" cy=\"5\" r=\"1.5\"\/><circle cx=\"12\" cy=\"12\" r=\"1.5\"\/><circle cx=\"12\" cy=\"19\" r=\"1.5\"\/><\/svg>\n Menu\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">3<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Tap \"Add to Home screen\"<\/div>\n <div class=\"step-desc\">Scroll through the menu and tap <strong>Add to Home screen<\/strong>. On some Android versions this may appear as <strong>Install app<\/strong>.<\/div>\n <div class=\"step-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"16\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><\/svg>\n Add to Home screen\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step\">\n <div class=\"step-num\">4<\/div>\n <div class=\"step-body\">\n <div class=\"step-title\">Tap \"Add\" to confirm<\/div>\n <div class=\"step-desc\">A prompt will appear \u2014 tap <strong>Add<\/strong> to confirm. The ADIO icon will appear on your home screen just like a native app.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n function showTab(which) {\n document.getElementById('panel-ios').classList.toggle('active', which === 'ios');\n document.getElementById('panel-android').classList.toggle('active', which === 'android');\n document.getElementById('tab-ios').classList.toggle('active', which === 'ios');\n document.getElementById('tab-android').classList.toggle('active', which === 'android');\n }\n\n \/\/ Auto-detect device and show relevant tab + banner\n const ua = navigator.userAgent;\n const isIOS = \/iPhone|iPad|iPod\/i.test(ua);\n const isAndroid = \/Android\/i.test(ua);\n const detected = document.getElementById('detected-msg');\n\n if (isIOS) {\n showTab('ios');\n detected.style.display = 'block';\n detected.textContent = '\ud83d\udc4b Looks like you\\'re on an iPhone or iPad \u2014 we\\'ve shown you the right steps below.';\n } else if (isAndroid) {\n showTab('android');\n detected.style.display = 'block';\n detected.textContent = '\ud83d\udc4b Looks like you\\'re on Android \u2014 we\\'ve shown you the right steps below.';\n }\n<\/script>\n\n<\/body>\n<\/html>\n<div style=\"text-align:center; padding: 40px 20px;\">\n <a href=\"https:\/\/staging.adio.chat\/wp-login.php\" style=\"display:inline-block; margin: 10px; padding: 14px 32px; background-color: #951B81; color: white; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 16px;\">Login<\/a>\n <button onclick=\"history.back()\" style=\"display:inline-block; margin: 10px; padding: 14px 32px; background-color: transparent; color: #951B81; border: 2px solid #951B81; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer;\">Back<\/button>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Install ADIO.chat Install the ADIO app Add ADIO.chat to your home screen for the full app experience \u2014 no App Store required. iPhone \/ iPad…<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-8749","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/pages\/8749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/comments?post=8749"}],"version-history":[{"count":0,"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/pages\/8749\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.adio.chat\/en\/wp-json\/wp\/v2\/media?parent=8749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}