Skip to content
Only
4
spots left this month — reserve yours today!
Home
Custom Tiny Homes
In-Stock
Contact
Financing
Build Your Model
More
Home
Custom Tiny Homes
In-Stock
Contact
Financing
Build Your Model
More
Account
Other sign in options
Sign in
Orders
Profile
Account
Other sign in options
Sign in
Orders
Profile
Total items in cart: 0
0
Your cart is empty
Have an account?
Log in
to check out faster.
Continue shopping
</div> </div> </main> <!-- BEGIN sections: footer-group --> <footer id="shopify-section-sections--23369077424485__footer_m9NzUG" class="shopify-section shopify-section-group-footer-group section-wrapper"> <div class="section-background color-scheme-1"></div> <div class="section section--page-width color-scheme-1" > <div class=" footer-content spacing-style " style=" --padding-block-start: max(20px, calc(var(--spacing-scale) * 30px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 30px)); --footer-gap: 20px; --grid-columns: 2; --last-row-count: 2; --tablet-last-row-count: 2; " > <div class=" group-block group-block--height-fit group-block--width-fill border-style spacing-style size-style " style=" --border-width: 1px; --border-style: none; --border-color: rgb(var(--color-border-rgb) / 1.0); --border-radius: 0px; --padding-block-start: 0px;--padding-block-end: 0px;--padding-inline-start: 0px;--padding-inline-end: 0px; --size-style-width: 100%;--size-style-height: fit;--size-style-width-mobile: 100%; --size-style-width-mobile-min: 5rem; " data-testid="group-block" ><div class="group-block__media-wrapper"> </div> <div class=" group-block-content layout-panel-flex layout-panel-flex--column mobile-column " style="--flex-direction: column; --flex-wrap: nowrap; --flex-wrap-mobile: wrap; --gap: 6px; --horizontal-alignment: flex-start; --vertical-alignment: center; --vertical-alignment-mobile: center; " > <div class=" spacing-style text-block text-block--AbUdwMVNSTFFBaXhOa__text_LWt8Pz h4 text-block--align-left " style=" --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px; --color: var(--color-foreground); --width: 100%; --max-width: var(--max-width--body-normal); --text-align: left; " > <h2>Join our email list</h2> </div> <rte-formatter class=" spacing-style text-block text-block--AVFZ3SFZ1bXJ0a0NtM__text_f9CFLH rte text-block--align-left rte " style=" --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px; --width: 100%; --max-width: var(--max-width--body-normal); --text-align: left; " > <p>Get exclusive deals and early access to new products.</p> </rte-formatter> </div> </div> <email-signup-block class="email-signup-block size-style spacing-style" style="--size-style-width: 100%;--size-style-height: ;--padding-block-start: 0px;--padding-block-end: 0px;--padding-inline-start: 0px;--padding-inline-end: 0px;" > <form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="email-signup__form spacing-style"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" /> <div class="email-signup__input-group " style="--border-width: 1px; --border-radius: 100px;" > <label for="EmailInput-AQWRDVzlGTTVZR0toT__email_signup_crihX7" class="visually-hidden" > Email </label> <input id="EmailInput-AQWRDVzlGTTVZR0toT__email_signup_crihX7" class="email-signup__input email-signup__input--all paragraph " type="email" name="contact[email]" autocorrect="off" autocapitalize="off" autocomplete="email" placeholder="Email address" required > <button class="email-signup__button email-signup__button--integrated email-signup__button--arrow paragraph button-unstyled button-unstyled--AQWRDVzlGTTVZR0toT__email_signup_crihX7 " aria-label="Sign up" > <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" class="email-signup__button-icon" > <path clip-rule="evenodd" d="m11.246 5.31759c.0322-.07821.0833-.14723.1486-.20093.0654-.0537.143-.09041.2259-.10686.083-.01645.1688-.01214.2497.01257.0808.0247.1544.06902.214.12902l4.104 4.104c.0478.04765.0857.10426.1115.16659.0259.06232.0392.12913.0392.19661 0 .06747-.0133.13429-.0392.19661-.0258.06233-.0637.11893-.1115.16659l-4.104 4.10401c-.0963.0963-.227.1504-.3632.1504s-.2669-.0541-.3632-.1504-.1504-.227-.1504-.3632.0541-.2669.1504-.3632l3.2288-3.2278h-11.0736c-.13606 0-.26654-.0541-.36275-.15027-.0962-.0962-.15025-.22669-.15025-.36274 0-.13606.05405-.26654.15025-.36275.09621-.0962.22669-.15025.36275-.15025h11.0736l-3.2288-3.2278c-.0721-.07178-.1212-.16335-.1411-.2631s-.0097-.20316.0293-.2971z" fill="currentColor" fill-rule="evenodd" /> </svg> </button> </div></form> <script src="//www.luxemicroestates.com/cdn/shop/t/4/assets/email-signup.js?v=11926998321451148611760998512" defer ></script> </email-signup-block> </div> </div> </footer><div id="shopify-section-sections--23369077424485__footer_utilities_jLGE8U" class="shopify-section shopify-section-group-footer-group footer-utilities"> <div class="section-background color-scheme-1"></div> <div class="section section--page-width color-scheme-1" > <div class="utilities spacing-style" style="--padding-block-start: 18px;--padding-block-end: max(20px, calc(var(--spacing-scale) * 41px)); --border-width: 0px; --gap: 18px;" data-testid="footer-utilities" > <div class=" footer-utilities__group-copyright custom-typography footer-utilities__text custom-font-size " style=" --color: ;--font-size: 0.75rem; --font-weight: ;--font-family: ; --text-transform: none; --text-wrap: ; --line-height: var(--line-height--body-); --letter-spacing: var(--letter-spacing--body-);" > <span class="footer-utilities__text"> © 2026 <a href="/" title="">Luxe Micro Estates</a></span> </div> <anchored-popover-component class="footer-utilities__policy-list footer-utilities__text" data-hover-triggered="true" > <button class="policy-list-trigger button-unstyled" popovertarget="terms-policies-popover" popovertargetaction="toggle" ref="trigger" style=" --color: ;--font-size: 0.75rem; --font-weight: ;--font-family: ; --text-transform: none; --text-wrap: ; --line-height: var(--line-height--body-); --letter-spacing: var(--letter-spacing--body-);" > Terms and Policies </button> <div class="terms-policies-popover color-scheme-1" id="terms-policies-popover" popover="auto" ref="popover" > <ul class=" policy_list list-unstyled custom-typography custom-font-size " ><li> <a href="/policies/privacy-policy" class="footer-utilities__text" >Privacy policy</a> </li><li> <a href="/policies/refund-policy" class="footer-utilities__text" >Refund policy</a> </li><li> <a href="/policies/shipping-policy" class="footer-utilities__text" >Shipping policy</a> </li><li> <a href="/policies/terms-of-service" class="footer-utilities__text" >Terms of service</a> </li><li> <a href="/policies/contact-information" class="footer-utilities__text" >Contact information</a> </li></ul> </div> </anchored-popover-component> <div class="social-icons__wrapper footer-utilities__icons" > <div class="social-icons__icon-wrapper" > <a href="https://www.facebook.com/profile.php?id=61574691180658&mibextid=wwXIfr&mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" aria-label="Facebook" > <span class="social-icons__icon-label">Facebook</span> <svg class="social-icons__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" > <path d="M18 10.049C18 5.603 14.419 2 10 2c-4.419 0-8 3.603-8 8.049C2 14.067 4.925 17.396 8.75 18v-5.624H6.719v-2.328h2.03V8.275c0-2.017 1.195-3.132 3.023-3.132.874 0 1.79.158 1.79.158v1.98h-1.009c-.994 0-1.303.621-1.303 1.258v1.51h2.219l-.355 2.326H11.25V18c3.825-.604 6.75-3.933 6.75-7.951Z" /></svg> </a> </div> <div class="social-icons__icon-wrapper" > <a href="https://www.instagram.com/luxe_micro_estates?igsh=NTc4MTIwNjQ2YQ%3D%3D&utm_source=qr" target="_blank" rel="noopener noreferrer" aria-label="Instagram" > <span class="social-icons__icon-label">Instagram</span> <svg class="social-icons__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" > <path fill-rule="evenodd" d="M13.23 3.492c-.84-.037-1.096-.046-3.23-.046-2.144 0-2.39.01-3.238.055-.776.027-1.195.164-1.487.273a2.43 2.43 0 0 0-.912.593 2.486 2.486 0 0 0-.602.922c-.11.282-.238.702-.274 1.486-.046.84-.046 1.095-.046 3.23 0 2.134.01 2.39.046 3.229.004.51.097 1.016.274 1.495.145.365.319.639.602.913.282.282.538.456.92.602.474.176.974.268 1.479.273.848.046 1.103.046 3.238.046 2.134 0 2.39-.01 3.23-.046.784-.036 1.203-.164 1.486-.273.374-.146.648-.329.921-.602.283-.283.447-.548.602-.922.177-.476.27-.979.274-1.486.037-.84.046-1.095.046-3.23 0-2.134-.01-2.39-.055-3.229-.027-.784-.164-1.204-.274-1.495a2.43 2.43 0 0 0-.593-.913 2.604 2.604 0 0 0-.92-.602c-.284-.11-.703-.237-1.488-.273ZM6.697 2.05c.857-.036 1.131-.045 3.302-.045 1.1-.014 2.202.001 3.302.045.664.014 1.321.14 1.943.374a3.968 3.968 0 0 1 1.414.922c.41.397.728.88.93 1.414.23.622.354 1.279.365 1.942C18 7.56 18 7.824 18 10.005c0 2.17-.01 2.444-.046 3.292-.036.858-.173 1.442-.374 1.943-.2.53-.474.976-.92 1.423a3.896 3.896 0 0 1-1.415.922c-.51.191-1.095.337-1.943.374-.857.036-1.122.045-3.302.045-2.171 0-2.445-.009-3.302-.055-.849-.027-1.432-.164-1.943-.364a4.152 4.152 0 0 1-1.414-.922 4.128 4.128 0 0 1-.93-1.423c-.183-.51-.329-1.085-.365-1.943C2.009 12.45 2 12.167 2 10.004c0-2.161 0-2.435.055-3.302.027-.848.164-1.432.365-1.942a4.44 4.44 0 0 1 .92-1.414 4.18 4.18 0 0 1 1.415-.93c.51-.183 1.094-.33 1.943-.366Zm.427 4.806a4.105 4.105 0 1 1 5.805 5.805 4.105 4.105 0 0 1-5.805-5.805Zm1.882 5.371a2.668 2.668 0 1 0 2.042-4.93 2.668 2.668 0 0 0-2.042 4.93Zm5.922-5.942a.958.958 0 1 1-1.355-1.355.958.958 0 0 1 1.355 1.355Z" clip-rule="evenodd" /></svg> </a> </div> <div class="social-icons__icon-wrapper" > <a href="https://youtube.com/@luxemicroestates?si=PKbOSx1La4Ey1plp" target="_blank" rel="noopener noreferrer" aria-label="Youtube" > <span class="social-icons__icon-label">Youtube</span> <svg class="social-icons__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" > <path d="M18.16 5.87c.34 1.309.34 4.08.34 4.08s0 2.771-.34 4.08a2.125 2.125 0 0 1-1.53 1.53c-1.309.34-6.63.34-6.63.34s-5.321 0-6.63-.34a2.125 2.125 0 0 1-1.53-1.53c-.34-1.309-.34-4.08-.34-4.08s0-2.771.34-4.08a2.173 2.173 0 0 1 1.53-1.53C4.679 4 10 4 10 4s5.321 0 6.63.34a2.173 2.173 0 0 1 1.53 1.53ZM8.3 12.5l4.42-2.55L8.3 7.4v5.1Z" /></svg> </a> </div> <div class="social-icons__icon-wrapper" > <a href="https://linktr.ee/LuxeMicroEstates" target="_blank" rel="noopener noreferrer" aria-label="Linktr" > <span class="social-icons__icon-label">Linktr</span> </a> </div> </div> </div> </div> </div> <!-- END sections: footer-group --> <script src="//www.luxemicroestates.com/cdn/shop/t/4/assets/dialog.js?v=122984339961420548111760998512" type="module" ></script> <dialog-component id="search-modal" class="search-modal" > <dialog ref="dialog" on:click="/closeDialogOnClickOutside" on:keydown="/closeDialogOnEscapePress" class="search-modal__content dialog-modal" scroll-lock aria-labelledby="search-modal-heading" > <h2 id="search-modal-heading" class="visually-hidden" > Search </h2> <script src="//www.luxemicroestates.com/cdn/shop/t/4/assets/predictive-search.js?v=53445493388242646041760998512" type="module" fetchpriority="low" ></script> <predictive-search-component class="predictive-search color-scheme-1" style="--product-corner-radius: 0px; --card-corner-radius: 4px;" data-section-id="predictive-search" data-testid="search-component--modal" role="search" aria-label="Search" > <form action="/search" method="get" role="search" class="predictive-search-form" ref="form" on:keydown="/onSearchKeyDown" > <div class="predictive-search-form__header" > <div class="predictive-search-form__header-inner"> <label for="cmdk-input" class="visually-hidden" >Search</label> <input class="search-input" id="cmdk-input" type="search" name="q" role="combobox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocomplete="off" placeholder="Search" ref="searchInput" on:input="/search" on:keydown="/onSearchKeyDown" > <input name="options[prefix]" type="hidden" value="last" > <span class="svg-wrapper predictive-search__icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg> </span> <button type="button" class="button-unstyled predictive-search__reset-button" ref="resetButton" hidden on:click="/resetSearch" > Clear </button> </div> <button type="button" class="button predictive-search__close-modal-button" aria-label="Close dialog" on:click="dialog-component/closeDialog" ref="closeModalButton" > <span class="svg-wrapper"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </button> </div> <div class="predictive-search-form__content-wrapper"> <div class="predictive-search-form__content" tabindex="-1" ref="predictiveSearchResults" on:click="/handleModalClick" > <div id="predictive-search-results" class="predictive-search-dropdown" role="listbox" aria-expanded="true" style="--color-shadow: rgb(var(--color-foreground-rgb) / 0.1);" > </div> </div> <div class="predictive-search-form__footer"> <button class="button button-primary predictive-search__search-button" ref="viewAllButton" > View all </button> </div> </div> </form> </predictive-search-component> </dialog> </dialog-component> <quick-add-dialog id="quick-add-dialog"> <dialog class="quick-add-modal dialog-modal color-scheme-1" ref="dialog" scroll-lock > <button ref="closeButton" on:click="/closeDialog" class="button button-unstyled close-button quick-add-modal__close" aria-label="Close dialog" ><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 12" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 12L2 2" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div id="quick-add-modal-content" class="quick-add-modal__content" ></div> </dialog> </quick-add-dialog> <!-- ============================================================ LUXE MICRO ESTATES — SALES AI AGENT Shopify Embed Snippet ============================================================ HOW TO INSTALL (see DEPLOYMENT-GUIDE.md for screenshots): 1. In your Cloudflare Worker dashboard, copy your Worker URL. It looks like: https://luxe-sales-agent.YOUR-NAME.workers.dev 2. In the code below, find this line: const WORKER_URL = "https://luxe-sales-agent.luxemicroestates.workers.dev"; Replace PASTE_YOUR_WORKER_URL_HERE with your actual URL. 3. In Shopify Admin → Online Store → Themes → click the "..." menu on your live theme → Edit Code. 4. Open the file "theme.liquid" (under Layout). 5. Find the closing </body> tag near the bottom of the file. Paste this ENTIRE snippet (everything below) right above that </body> tag. 6. Click Save. The chat bubble will appear in the bottom-right corner of every page on your store. ============================================================ --> <!-- LUXE SALES AGENT — START --> <style> @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&display=swap'); #luxe-agent-root, #luxe-agent-root * { box-sizing: border-box; font-family: 'Inter', sans-serif; } /* Floating launcher button (bottom right) */ #luxe-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 999998; background: #1a1a17; color: #f5f1ea; border: none; border-radius: 50%; width: 60px; height: 60px; cursor: pointer; box-shadow: 0 8px 24px rgba(26, 26, 23, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; } #luxe-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26, 26, 23, 0.32); } #luxe-launcher.luxe-hidden { display: none; } /* Launcher pulse badge */ #luxe-launcher-pulse { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; background: #2d4a2b; border-radius: 50%; border: 2px solid #1a1a17; animation: luxePulse 2s infinite; } @keyframes luxePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.15); } } /* Chat panel container */ #luxe-panel { position: fixed; bottom: 100px; right: 24px; z-index: 999999; width: 400px; max-width: calc(100vw - 32px); height: 640px; max-height: calc(100vh - 130px); background: #f5f1ea; border: 1px solid #d4ccbe; box-shadow: 0 20px 60px -10px rgba(26, 26, 23, 0.35); display: none; flex-direction: column; overflow: hidden; animation: luxeSlideUp 0.3s ease-out; } #luxe-panel.luxe-open { display: flex; } @keyframes luxeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Header */ .luxe-header { padding: 16px 18px; border-bottom: 1px solid #d4ccbe; display: flex; align-items: center; justify-content: space-between; background: #f5f1ea; } .luxe-brand { display: flex; align-items: center; gap: 12px; } .luxe-mark { width: 34px; height: 34px; background: #1a1a17; color: #f5f1ea; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; } .luxe-name { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; color: #1a1a17; line-height: 1.1; } .luxe-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: #3a3a35; margin-top: 3px; font-weight: 500; } .luxe-close { background: transparent; border: 1px solid #d4ccbe; color: #3a3a35; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: all 0.2s; } .luxe-close:hover { background: #1a1a17; color: #f5f1ea; border-color: #1a1a17; } /* Chat area */ .luxe-chat { flex: 1; overflow-y: auto; padding: 20px; background: #f5f1ea; } .luxe-chat::-webkit-scrollbar { width: 5px; } .luxe-chat::-webkit-scrollbar-thumb { background: #d4ccbe; border-radius: 3px; } /* Welcome screen */ .luxe-welcome-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #2d4a2b; font-weight: 600; margin-bottom: 14px; } .luxe-welcome-title { font-family: 'Fraunces', serif; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: #1a1a17; margin: 0 0 14px; } .luxe-welcome-title em { font-style: italic; font-weight: 300; color: #2d4a2b; } .luxe-welcome-body { font-size: 13px; line-height: 1.55; color: #3a3a35; margin-bottom: 18px; } .luxe-contact-strip { background: #ffffff; border: 1px solid #d4ccbe; border-left: 3px solid #2d4a2b; padding: 12px 14px; margin-bottom: 18px; } .luxe-contact-strip a { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; color: #1a1a17; text-decoration: none; display: block; margin-bottom: 6px; } .luxe-contact-strip a:last-child { margin-bottom: 0; font-size: 13px; word-break: break-all; } .luxe-contact-strip a:hover { color: #2d4a2b; } .luxe-contact-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: #2d4a2b; font-weight: 600; margin-bottom: 8px; } .luxe-starter-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: #3a3a35; font-weight: 600; margin-bottom: 10px; } .luxe-starters { display: flex; flex-direction: column; gap: 6px; } .luxe-starter { background: #ffffff; border: 1px solid #d4ccbe; padding: 10px 12px; cursor: pointer; text-align: left; font-size: 13px; color: #1a1a17; transition: all 0.2s; font-family: 'Inter', sans-serif; } .luxe-starter:hover { border-color: #1a1a17; background: #1a1a17; color: #f5f1ea; } /* Messages */ .luxe-msg { margin-bottom: 16px; } .luxe-msg-role { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: #3a3a35; font-weight: 600; margin-bottom: 5px; } .luxe-msg.luxe-user .luxe-msg-role { color: #1a1a17; } .luxe-msg.luxe-assistant .luxe-msg-role { color: #2d4a2b; } .luxe-bubble { padding: 12px 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .luxe-msg.luxe-user .luxe-bubble { background: #1a1a17; color: #f5f1ea; max-width: 88%; } .luxe-msg.luxe-assistant .luxe-bubble { background: #ffffff; color: #1a1a17; border: 1px solid #d4ccbe; border-left: 3px solid #2d4a2b; } .luxe-bubble a { color: #2d4a2b; text-decoration: none; border-bottom: 1px solid #2d4a2b; word-break: break-all; font-weight: 500; } .luxe-bubble a:hover { opacity: 0.7; } /* Typing indicator */ .luxe-typing { display: flex; gap: 4px; padding: 12px 14px; background: #ffffff; border: 1px solid #d4ccbe; border-left: 3px solid #2d4a2b; width: fit-content; } .luxe-dot { width: 6px; height: 6px; background: #2d4a2b; border-radius: 50%; animation: luxeTyping 1.2s infinite ease-in-out; } .luxe-dot:nth-child(2) { animation-delay: 0.15s; } .luxe-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes luxeTyping { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } } /* Input */ .luxe-input-zone { padding: 12px; border-top: 1px solid #d4ccbe; background: #f5f1ea; } .luxe-input-row { display: flex; gap: 8px; background: #ffffff; border: 1px solid #d4ccbe; padding: 8px 8px 8px 12px; } .luxe-input-row:focus-within { border-color: #1a1a17; } .luxe-input-row textarea { flex: 1; border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; color: #1a1a17; resize: none; max-height: 100px; padding: 4px 0; } .luxe-input-row textarea::placeholder { color: #9b948a; } .luxe-send { background: #1a1a17; color: #f5f1ea; border: none; padding: 8px 14px; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; transition: background 0.2s; } .luxe-send:hover:not(:disabled) { background: #1f3520; } .luxe-send:disabled { opacity: 0.4; cursor: not-allowed; } .luxe-footer { text-align: center; font-size: 10px; color: #3a3a35; margin-top: 8px; letter-spacing: 0.04em; } .luxe-footer a { color: #1a1a17; text-decoration: none; font-weight: 500; border-bottom: 1px solid #d4ccbe; } .luxe-error { background: #fde8e0; border: 1px solid #9a4a2a; border-left: 3px solid #9a4a2a; padding: 10px 12px; font-size: 12px; color: #9a4a2a; margin-top: 10px; } /* Mobile responsive */ @media (max-width: 480px) { #luxe-panel { width: 100%; height: 100%; max-height: 100%; bottom: 0; right: 0; border: none; } #luxe-launcher { bottom: 16px; right: 16px; } } </style> <div id="luxe-agent-root"> <button id="luxe-launcher" aria-label="Open chat"> <span id="luxe-launcher-pulse"></span> <span>L</span> </button> <div id="luxe-panel" role="dialog" aria-label="Luxe Sales Chat"> <div class="luxe-header"> <div class="luxe-brand"> <div class="luxe-mark">L</div> <div> <div class="luxe-name">Luxe Micro Estates</div> <div class="luxe-sub">Sales Concierge</div> </div> </div> <button class="luxe-close" id="luxe-close-btn" aria-label="Close chat">✕</button> </div> <div class="luxe-chat" id="luxe-chat"></div> <div class="luxe-input-zone"> <div class="luxe-input-row"> <textarea id="luxe-input" placeholder="Ask about models, pricing, financing…" rows="1"></textarea> <button class="luxe-send" id="luxe-send-btn">Send</button> </div> <div class="luxe-footer"> <a href="tel:+16197524098">(619) 752-4098</a> · <a href="mailto:sales@LuxeMicroEstates.com">sales@LuxeMicroEstates.com</a> </div> </div> </div> </div> <script> (function() { // ====== CONFIGURATION ====== // REPLACE the line below with YOUR Cloudflare Worker URL. // Example: const WORKER_URL = "https://luxe-sales-agent.luxemicroestates.workers.dev"; const WORKER_URL = "https://luxe-sales-agent.luxemicroestates.workers.dev"; // =========================== const STARTERS = [ "I want to book a tour", "What models do you offer?", "How much do the homes cost?", "How do I place a deposit?", "Do I need permits?", ]; const launcher = document.getElementById("luxe-launcher"); const panel = document.getElementById("luxe-panel"); const closeBtn = document.getElementById("luxe-close-btn"); const chat = document.getElementById("luxe-chat"); const input = document.getElementById("luxe-input"); const sendBtn = document.getElementById("luxe-send-btn"); const pulse = document.getElementById("luxe-launcher-pulse"); let messages = []; let loading = false; function renderWelcome() { chat.innerHTML = ` <div class="luxe-welcome-eyebrow">— Steel-frame homes, refined</div> <h2 class="luxe-welcome-title">Let's find your home — <em>and get you on the calendar</em>.</h2> <p class="luxe-welcome-body">Ask anything about our six models, upgrades, financing, or delivery. When you're ready, I'll help you book a tour at our Mentone, CA model home.</p> <div class="luxe-contact-strip"> <div class="luxe-contact-label">Speak with an expert</div> <a href="tel:+16197524098">(619) 752-4098</a> <a href="mailto:sales@LuxeMicroEstates.com">sales@LuxeMicroEstates.com</a> </div> <div class="luxe-starter-label">Suggested questions</div> <div class="luxe-starters"> ${STARTERS.map(s => `<button class="luxe-starter" data-q="${escapeHtml(s)}">${escapeHtml(s)}</button>`).join("")} </div> `; chat.querySelectorAll(".luxe-starter").forEach(btn => { btn.addEventListener("click", () => sendMessage(btn.dataset.q)); }); } function escapeHtml(text) { const div = document.createElement("div"); div.textContent = text; return div.innerHTML; } function linkify(text) { const escaped = escapeHtml(text); const urlRegex = /(https?:\/\/[^\s<]+)/g; return escaped.replace(urlRegex, (url) => { const trailingMatch = url.match(/[.,;:!?)\]]+$/); const trailing = trailingMatch ? trailingMatch[0] : ""; const cleanUrl = trailing ? url.slice(0, -trailing.length) : url; return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${trailing}`; }); } function renderMessages() { chat.innerHTML = ""; messages.forEach(m => { const div = document.createElement("div"); div.className = "luxe-msg luxe-" + m.role; const roleLabel = m.role === "user" ? "You" : "✦ Luxe Concierge"; div.innerHTML = ` <div class="luxe-msg-role">${roleLabel}</div> <div class="luxe-bubble">${m.role === "assistant" ? linkify(m.content) : escapeHtml(m.content)}</div> `; chat.appendChild(div); }); if (loading) { const typing = document.createElement("div"); typing.className = "luxe-msg luxe-assistant"; typing.innerHTML = ` <div class="luxe-msg-role">✦ Luxe Concierge</div> <div class="luxe-typing"><div class="luxe-dot"></div><div class="luxe-dot"></div><div class="luxe-dot"></div></div> `; chat.appendChild(typing); } chat.scrollTop = chat.scrollHeight; } function showError(msg) { const err = document.createElement("div"); err.className = "luxe-error"; err.textContent = msg; chat.appendChild(err); chat.scrollTop = chat.scrollHeight; } async function sendMessage(text) { const userText = (text || input.value).trim(); if (!userText || loading) return; if (WORKER_URL === "PASTE_YOUR_WORKER_URL_HERE") { messages.push({ role: "user", content: userText }); renderMessages(); showError("Configuration error: WORKER_URL not set. Open the theme code and replace PASTE_YOUR_WORKER_URL_HERE with your Cloudflare Worker URL."); return; } messages.push({ role: "user", content: userText }); input.value = ""; input.style.height = "auto"; loading = true; renderMessages(); try { const response = await fetch(WORKER_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages }), }); const data = await response.json(); loading = false; if (!response.ok) { renderMessages(); showError(data.error || "Something went wrong. Please call (619) 752-4098."); return; } messages.push({ role: "assistant", content: data.reply }); renderMessages(); } catch (err) { loading = false; renderMessages(); showError("Connection problem. Please call (619) 752-4098 or email sales@LuxeMicroEstates.com."); } input.focus(); } // Event handlers launcher.addEventListener("click", () => { panel.classList.add("luxe-open"); launcher.classList.add("luxe-hidden"); if (pulse) pulse.style.display = "none"; if (messages.length === 0) renderWelcome(); setTimeout(() => input.focus(), 300); }); closeBtn.addEventListener("click", () => { panel.classList.remove("luxe-open"); launcher.classList.remove("luxe-hidden"); }); sendBtn.addEventListener("click", () => sendMessage()); input.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); input.addEventListener("input", () => { input.style.height = "auto"; input.style.height = Math.min(input.scrollHeight, 100) + "px"; }); })(); </script> <!-- LUXE SALES AGENT — END --> </body> </html>
