@meetelise/chat 1.20.29 → 1.20.31

package/src/WebComponent/Launcher.ts

@@ -12,6 +12,17 @@ import { installCallUsWindow } from "./actions/call-us-window";
 import { getRegisteredPhoneNumbers } from "../getRegisteredPhoneNumbers";
 import { TourScheduler } from "./Scheduler/tour-scheduler";
 import { LabeledOption, UnitV2 } from "../fetchBuildingInfo";
+import {
+  FilledChatIcon,
+  FilledEmailIcon,
+  FilledPhoneIcon,
+  FilledTourIcon,
+  OutlinedChatIcon,
+  OutlinedEmailIcon,
+  OutlinedPhoneIcon,
+  OutlinedTextIcon,
+  OutlinedTourIcon,
+} from "../svgIcons";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
@@ -47,6 +58,8 @@ export class Launcher extends LitElement {
   @property({ attribute: true })
   sgtUrl = "";
   @property({ attribute: true })
+  buildingABTestType = "";
+  @property({ attribute: true })
   escortedToursLink = "";
   @property({ attribute: true })
   virtualToursLink = "";
@@ -143,11 +156,9 @@ export class Launcher extends LitElement {
     sstWindowRef.onCloseClicked = this.onCloseSSTWindow;
   };
 
-  onClickEmailOption = (e?: MouseEvent): void => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
+  onClickEmailOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
 
     this.isEmailWindowOpen = true;
   };
@@ -183,11 +194,9 @@ export class Launcher extends LitElement {
     return html` <div class="launcher__call-to-action-option">${text}</div> `;
   };
 
-  onClickSSTOption = (e?: MouseEvent): void => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
+  onClickSSTOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
     this.isSSTWindowOpen = true;
   };
 
@@ -275,6 +284,101 @@ export class Launcher extends LitElement {
       </div>
     `;
   };
+  renderPillVertical = (
+    content: TemplateResult,
+    onClick: (e: MouseEvent) => void
+  ): TemplateResult => {
+    return html`
+      <div class="launcher__mini-option-wrapper-vertical">
+        <div @click=${onClick} class="inner-pill-wrapper">${content}</div>
+      </div>
+    `;
+  };
+
+  renderActionPills = (): TemplateResult => {
+    if (this.buildingABTestType === "close") {
+      return html` <div class="vertical-pill-list">
+        ${this.hasEmailEnabled && !this.isCallToActionWindowOpen()
+          ? this.renderPillVertical(
+              html`
+                <div class="vertical-pill-icon">${FilledEmailIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Email</span> an agent
+                </div>
+              `,
+              this.onClickEmailOption
+            )
+          : ""}
+        ${this.hasChatEnabled && !this.isCallToActionWindowOpen()
+          ? this.renderPillVertical(
+              html`
+                <div class="vertical-pill-icon">${FilledChatIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Ask</span> a question
+                </div>
+              `,
+              this.onChatTapped
+            )
+          : ""}
+        ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
+          ? this.renderPillVertical(
+              html`
+                <div class="vertical-pill-icon">${FilledTourIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Book</span> a tour
+                </div>
+              `,
+              this.onClickSSTOption
+            )
+          : ""}
+        ${this.phoneNumber &&
+        this.hasCallUsEnabled &&
+        !this.isCallToActionWindowOpen()
+          ? this.renderPillVertical(
+              html`
+                <div class="vertical-pill-icon">${FilledPhoneIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Call</span> or
+                  <span class="vertical-pill-bold">Text</span> us
+                </div>
+              `,
+              this.onClickPhoneOption
+            )
+          : ""}
+      </div>`;
+    }
+    return html`
+      ${this.hasChatEnabled && !this.isCallToActionWindowOpen()
+        ? this.renderMiniOption(OutlinedChatIcon, this.onChatTapped)
+        : ""}
+      ${this.hasEmailEnabled && !this.isCallToActionWindowOpen()
+        ? this.renderMiniOption(
+            OutlinedEmailIcon,
+            this.onClickEmailOption,
+            true
+          )
+        : ""}
+      ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
+        ? this.renderMiniOption(OutlinedTourIcon, this.onClickSSTOption, true)
+        : ""}
+      ${this.phoneNumber &&
+      this.hasCallUsEnabled &&
+      !this.isCallToActionWindowOpen()
+        ? this.renderMiniOption(
+            OutlinedPhoneIcon,
+            this.onClickPhoneOption,
+            true
+          )
+        : ""}
+      ${this.hasTextUsEnabled && !this.isCallToActionWindowOpen()
+        ? this.renderMiniOption(
+            OutlinedTextIcon,
+            this.onClickTextUsOption,
+            true
+          )
+        : ""}
+    `;
+  };
 
   renderMiniLauncher = (): TemplateResult => {
     return html`
@@ -331,107 +435,7 @@ export class Launcher extends LitElement {
               </div>
             `
           : ""}
-        ${this.hasChatEnabled && !this.isCallToActionWindowOpen()
-          ? this.renderMiniOption(
-              html`<svg
-                width="29"
-                height="28"
-                viewBox="0 0 29 28"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                style="transform: translate(2px, -1px);"
-              >
-                <path
-                  d="M21.0385 9.79957H7.03915C6.66786 9.79957 6.31178 9.94706 6.04924 10.2096C5.7867 10.4721 5.63921 10.8282 5.63921 11.1995C5.63921 11.5708 5.7867 11.9269 6.04924 12.1894C6.31178 12.4519 6.66786 12.5994 7.03915 12.5994H21.0385C21.4098 12.5994 21.7659 12.4519 22.0284 12.1894C22.291 11.9269 22.4385 11.5708 22.4385 11.1995C22.4385 10.8282 22.291 10.4721 22.0284 10.2096C21.7659 9.94706 21.4098 9.79957 21.0385 9.79957ZM15.4388 15.3993H7.03915C6.66786 15.3993 6.31178 15.5468 6.04924 15.8094C5.7867 16.0719 5.63921 16.428 5.63921 16.7993C5.63921 17.1705 5.7867 17.5266 6.04924 17.7892C6.31178 18.0517 6.66786 18.1992 7.03915 18.1992H15.4388C15.8101 18.1992 16.1661 18.0517 16.4287 17.7892C16.6912 17.5266 16.8387 17.1705 16.8387 16.7993C16.8387 16.428 16.6912 16.0719 16.4287 15.8094C16.1661 15.5468 15.8101 15.3993 15.4388 15.3993ZM14.0388 0C12.2004 0 10.38 0.362105 8.68151 1.06564C6.98302 1.76917 5.43975 2.80036 4.13978 4.10032C1.51439 6.72572 0.0394592 10.2865 0.0394592 13.9994C0.0272207 17.232 1.14652 20.3671 3.20332 22.861L0.403443 25.6609C0.209191 25.8577 0.077602 26.1077 0.0252806 26.3793C-0.0270409 26.6509 0.00224956 26.9319 0.109456 27.1868C0.225732 27.4387 0.414228 27.6503 0.651018 27.7949C0.887807 27.9395 1.16221 28.0104 1.4394 27.9988H14.0388C17.7517 27.9988 21.3125 26.5238 23.9379 23.8984C26.5633 21.273 28.0382 17.7122 28.0382 13.9994C28.0382 10.2865 26.5633 6.72572 23.9379 4.10032C21.3125 1.47493 17.7517 0 14.0388 0V0ZM14.0388 25.1989H4.81325L6.11519 23.8969C6.37593 23.6346 6.52228 23.2798 6.52228 22.91C6.52228 22.5401 6.37593 22.1853 6.11519 21.923C4.28209 20.092 3.14057 17.682 2.8851 15.1036C2.62964 12.5253 3.27604 9.93817 4.71417 7.78299C6.1523 5.6278 8.2932 4.03792 10.7721 3.28422C13.251 2.53051 15.9146 2.65961 18.309 3.64952C20.7033 4.63943 22.6805 6.4289 23.9034 8.71306C25.1264 10.9972 25.5195 13.6348 25.0159 16.1763C24.5123 18.7178 23.1431 21.0061 21.1415 22.6513C19.1399 24.2965 16.6298 25.1968 14.0388 25.1989V25.1989Z"
-                  fill="#1E1E1E"
-                />
-              </svg>`,
-              this.onChatTapped
-            )
-          : ""}
-        ${this.hasEmailEnabled && !this.isCallToActionWindowOpen()
-          ? this.renderMiniOption(
-              html`
-                <svg
-                  width="19"
-                  height="15"
-                  viewBox="0 0 19 15"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M15.9375 0H2.8125C2.06658 0 1.35121 0.296316 0.823762 0.823762C0.296316 1.35121 0 2.06658 0 2.8125V12.1875C0 12.9334 0.296316 13.6488 0.823762 14.1762C1.35121 14.7037 2.06658 15 2.8125 15H15.9375C16.6834 15 17.3988 14.7037 17.9262 14.1762C18.4537 13.6488 18.75 12.9334 18.75 12.1875V2.8125C18.75 2.06658 18.4537 1.35121 17.9262 0.823762C17.3988 0.296316 16.6834 0 15.9375 0ZM15.5531 1.875L10.0406 7.3875C9.95347 7.47537 9.84978 7.54511 9.73554 7.59271C9.6213 7.64031 9.49876 7.66481 9.375 7.66481C9.25124 7.66481 9.1287 7.64031 9.01446 7.59271C8.90022 7.54511 8.79653 7.47537 8.70938 7.3875L3.19687 1.875H15.5531ZM16.875 12.1875C16.875 12.4361 16.7762 12.6746 16.6004 12.8504C16.4246 13.0262 16.1861 13.125 15.9375 13.125H2.8125C2.56386 13.125 2.3254 13.0262 2.14959 12.8504C1.97377 12.6746 1.875 12.4361 1.875 12.1875V3.19687L7.3875 8.70938C7.91484 9.23606 8.62969 9.5319 9.375 9.5319C10.1203 9.5319 10.8352 9.23606 11.3625 8.70938L16.875 3.19687V12.1875Z"
-                    fill="#1E1E1E"
-                  />
-                </svg>
-              `,
-              this.onClickEmailOption,
-              true
-            )
-          : ""}
-        ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
-          ? this.renderMiniOption(
-              html`
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M15.3 1.8H13.5V0.9C13.5 0.661305 13.4052 0.432387 13.2364 0.263604C13.0676 0.0948211 12.8387 0 12.6 0C12.3613 0 12.1324 0.0948211 11.9636 0.263604C11.7948 0.432387 11.7 0.661305 11.7 0.9V1.8H6.3V0.9C6.3 0.661305 6.20518 0.432387 6.0364 0.263604C5.86761 0.0948211 5.63869 0 5.4 0C5.1613 0 4.93239 0.0948211 4.7636 0.263604C4.59482 0.432387 4.5 0.661305 4.5 0.9V1.8H2.7C1.98392 1.8 1.29716 2.08446 0.790812 2.59081C0.284464 3.09716 0 3.78392 0 4.5V15.3C0 16.0161 0.284464 16.7028 0.790812 17.2092C1.29716 17.7155 1.98392 18 2.7 18H15.3C16.0161 18 16.7028 17.7155 17.2092 17.2092C17.7155 16.7028 18 16.0161 18 15.3V4.5C18 3.78392 17.7155 3.09716 17.2092 2.59081C16.7028 2.08446 16.0161 1.8 15.3 1.8ZM16.2 15.3C16.2 15.5387 16.1052 15.7676 15.9364 15.9364C15.7676 16.1052 15.5387 16.2 15.3 16.2H2.7C2.46131 16.2 2.23239 16.1052 2.0636 15.9364C1.89482 15.7676 1.8 15.5387 1.8 15.3V9H16.2V15.3ZM16.2 7.2H1.8V4.5C1.8 4.2613 1.89482 4.03239 2.0636 3.8636C2.23239 3.69482 2.46131 3.6 2.7 3.6H4.5V4.5C4.5 4.73869 4.59482 4.96761 4.7636 5.1364C4.93239 5.30518 5.1613 5.4 5.4 5.4C5.63869 5.4 5.86761 5.30518 6.0364 5.1364C6.20518 4.96761 6.3 4.73869 6.3 4.5V3.6H11.7V4.5C11.7 4.73869 11.7948 4.96761 11.9636 5.1364C12.1324 5.30518 12.3613 5.4 12.6 5.4C12.8387 5.4 13.0676 5.30518 13.2364 5.1364C13.4052 4.96761 13.5 4.73869 13.5 4.5V3.6H15.3C15.5387 3.6 15.7676 3.69482 15.9364 3.8636C16.1052 4.03239 16.2 4.2613 16.2 4.5V7.2Z"
-                    fill="#1E1E1E"
-                  />
-                </svg>
-              `,
-              this.onClickSSTOption,
-              true
-            )
-          : ""}
-        ${this.phoneNumber &&
-        this.hasCallUsEnabled &&
-        !this.isCallToActionWindowOpen()
-          ? this.renderMiniOption(
-              html`
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M15.7007 9.85696C15.5028 9.85696 15.296 9.794 15.0981 9.74904C14.6975 9.66074 14.3037 9.54352 13.92 9.3983C13.5028 9.24652 13.0442 9.2544 12.6324 9.42043C12.2207 9.58645 11.8849 9.8989 11.6897 10.2976L11.4918 10.7023C10.6159 10.215 9.81094 9.60985 9.09958 8.90366C8.3934 8.19231 7.7882 7.38739 7.30092 6.51144L7.67864 6.25963C8.07737 6.0644 8.38981 5.7286 8.55584 5.31685C8.72187 4.90511 8.72975 4.4465 8.57797 4.02929C8.43518 3.64476 8.31801 3.25119 8.22723 2.85117C8.18227 2.65331 8.14629 2.44647 8.11931 2.23962C8.0101 1.60615 7.6783 1.03249 7.18367 0.621939C6.68903 0.211391 6.06407 -0.00905972 5.42132 0.00028536H2.72333C2.33574 -0.00335382 1.95192 0.0765607 1.598 0.234589C1.24408 0.392616 0.928359 0.625047 0.672338 0.916058C0.416316 1.20707 0.226004 1.54983 0.114355 1.921C0.00270581 2.29217 -0.0276575 2.68304 0.0253316 3.067C0.50444 6.83465 2.22512 10.3353 4.91558 13.016C7.60604 15.6967 11.1129 17.4046 14.8823 17.87H15.224C15.8872 17.871 16.5275 17.6277 17.0227 17.1865C17.3072 16.932 17.5345 16.6201 17.6895 16.2713C17.8445 15.9225 17.9238 15.5447 17.922 15.163V12.465C17.911 11.8403 17.6835 11.2388 17.2784 10.7632C16.8733 10.2875 16.3157 9.96724 15.7007 9.85696ZM16.1503 15.2529C16.1502 15.3806 16.1228 15.5068 16.0701 15.6231C16.0174 15.7394 15.9405 15.8432 15.8446 15.9274C15.7441 16.0142 15.6266 16.079 15.4996 16.1177C15.3726 16.1565 15.2389 16.1682 15.1071 16.1523C11.739 15.7204 8.61056 14.1796 6.21517 11.7728C3.81979 9.36601 2.29381 6.23026 1.87795 2.86016C1.86364 2.72842 1.87618 2.59515 1.91483 2.4684C1.95347 2.34165 2.01741 2.22405 2.10279 2.12271C2.18706 2.02678 2.2908 1.94989 2.4071 1.89717C2.5234 1.84445 2.64959 1.8171 2.77729 1.81693H5.47528C5.68441 1.81228 5.88863 1.88068 6.05278 2.01035C6.21692 2.14003 6.33073 2.32287 6.37461 2.52741C6.41058 2.77322 6.45555 3.01604 6.50951 3.25586C6.6134 3.72994 6.75166 4.19583 6.9232 4.64983L5.66414 5.23439C5.55649 5.28379 5.45965 5.35396 5.37919 5.44088C5.29873 5.5278 5.23624 5.62975 5.19529 5.74089C5.15434 5.85203 5.13576 5.97016 5.14059 6.08851C5.14543 6.20685 5.17359 6.32307 5.22347 6.4305C6.51778 9.20292 8.74637 11.4315 11.5188 12.7258C11.7377 12.8158 11.9833 12.8158 12.2023 12.7258C12.3144 12.6857 12.4175 12.6237 12.5055 12.5434C12.5935 12.4631 12.6647 12.3662 12.7149 12.2582L13.2725 10.9991C13.7374 11.1654 14.2119 11.3035 14.6934 11.4128C14.9332 11.4668 15.1761 11.5117 15.4219 11.5477C15.6264 11.5916 15.8093 11.7054 15.9389 11.8695C16.0686 12.0337 16.137 12.2379 16.1324 12.447L16.1503 15.2529Z"
-                    fill="#1E1E1E"
-                  />
-                </svg>
-              `,
-              this.onClickPhoneOption,
-              true
-            )
-          : ""}
-        ${this.hasTextUsEnabled && !this.isCallToActionWindowOpen()
-          ? this.renderMiniOption(
-              html`
-                <svg
-                  width="19"
-                  height="18"
-                  viewBox="0 0 19 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  style="transform: translateX(2px);"
-                >
-                  <path
-                    d="M5.42513 8.09964C5.24713 8.09964 5.07313 8.15242 4.92514 8.25131C4.77714 8.3502 4.66179 8.49076 4.59367 8.6552C4.52556 8.81965 4.50773 9.0006 4.54246 9.17517C4.57719 9.34975 4.6629 9.51011 4.78876 9.63597C4.91462 9.76183 5.07498 9.84754 5.24955 9.88227C5.42413 9.91699 5.60508 9.89917 5.76953 9.83106C5.93397 9.76294 6.07453 9.64759 6.17342 9.49959C6.27231 9.35159 6.32509 9.1776 6.32509 8.9996C6.32509 8.76092 6.23027 8.53201 6.0615 8.36323C5.89272 8.19446 5.66381 8.09964 5.42513 8.09964ZM9.02497 8.09964C8.84697 8.09964 8.67297 8.15242 8.52498 8.25131C8.37698 8.3502 8.26163 8.49076 8.19351 8.6552C8.1254 8.81965 8.10758 9.0006 8.1423 9.17517C8.17703 9.34975 8.26274 9.51011 8.3886 9.63597C8.51446 9.76183 8.67482 9.84754 8.84939 9.88227C9.02397 9.91699 9.20492 9.89917 9.36937 9.83106C9.53382 9.76294 9.67437 9.64759 9.77326 9.49959C9.87215 9.35159 9.92493 9.1776 9.92493 8.9996C9.92493 8.76092 9.83011 8.53201 9.66134 8.36323C9.49256 8.19446 9.26365 8.09964 9.02497 8.09964ZM12.6248 8.09964C12.4468 8.09964 12.2728 8.15242 12.1248 8.25131C11.9768 8.3502 11.8615 8.49076 11.7934 8.6552C11.7252 8.81965 11.7074 9.0006 11.7421 9.17517C11.7769 9.34975 11.8626 9.51011 11.9884 9.63597C12.1143 9.76183 12.2747 9.84754 12.4492 9.88227C12.6238 9.91699 12.8048 9.89917 12.9692 9.83106C13.1337 9.76294 13.2742 9.64759 13.3731 9.49959C13.472 9.35159 13.5248 9.1776 13.5248 8.9996C13.5248 8.76092 13.43 8.53201 13.2612 8.36323C13.0924 8.19446 12.8635 8.09964 12.6248 8.09964ZM9.02497 0C7.84312 0 6.67285 0.232782 5.58097 0.685054C4.48909 1.13733 3.49698 1.80023 2.66129 2.63592C0.973536 4.32368 0.0253666 6.61276 0.0253666 8.9996C0.017499 11.0777 0.737048 13.0931 2.05928 14.6963L0.259356 16.4963C0.13448 16.6228 0.049887 16.7835 0.0162518 16.9581C-0.0173834 17.1327 0.00144614 17.3133 0.0703646 17.4772C0.145113 17.6392 0.26629 17.7752 0.418511 17.8682C0.570733 17.9611 0.747135 18.0067 0.925327 17.9992H9.02497C11.4118 17.9992 13.7009 17.051 15.3886 15.3633C17.0764 13.6755 18.0246 11.3864 18.0246 8.9996C18.0246 6.61276 17.0764 4.32368 15.3886 2.63592C13.7009 0.94817 11.4118 0 9.02497 0ZM9.02497 16.1993H3.09423L3.93119 15.3623C4.01623 15.279 4.08388 15.1796 4.13022 15.0699C4.17657 14.9602 4.20069 14.8424 4.20118 14.7233C4.1978 14.486 4.10076 14.2595 3.93119 14.0934C2.75277 12.9163 2.01894 11.367 1.85471 9.70948C1.69048 8.05199 2.10602 6.38882 3.03054 5.00335C3.95505 3.61787 5.33134 2.59581 6.92492 2.11128C8.51851 1.62676 10.2308 1.70975 11.77 2.34612C13.3093 2.98249 14.5803 4.13286 15.3665 5.60125C16.1527 7.06964 16.4054 8.7652 16.0817 10.399C15.7579 12.0329 14.8777 13.5039 13.591 14.5616C12.3042 15.6192 10.6906 16.198 9.02497 16.1993Z"
-                    fill="#1E1E1E"
-                  />
-                </svg>
-              `,
-              this.onClickTextUsOption,
-              true
-            )
-          : ""}
+        ${this.renderActionPills()}
       </div>
     `;
   };
@@ -440,7 +444,7 @@ export class Launcher extends LitElement {
     installEmailUsWindow();
     installTextUsWindow();
     installCallUsWindow();
-    if (this.isMini) {
+    if (this.isMini || this.buildingABTestType === "close") {
       return this.renderMiniLauncher();
     }
 

package/src/WebComponent/actions/text-us-window.ts

@@ -195,10 +195,9 @@ export class TextUsWindow extends LitElement {
           ></action-confirm-button>
           <div class="text-us-window__vertical-spacer"></div>
           <div class="text-us-window__subtext">
-            By entering your number and checking the box, you consent to be
-            contacted by our AI Leasing Assistant. Your consent to this process
-            is not a requirement for leasing at our property. Message and data
-            rates may apply.
+            By entering your number, you consent to be contacted by our AI
+            Leasing Assistant. Your consent to this process is not a requirement
+            for leasing at our property. Message and data rates may apply.
           </div>
         </div>
       </details-window>

package/src/WebComponent/launcherStyles.ts

@@ -303,6 +303,46 @@ export const launcherStyles = css`
     }
   }
 
+  .vertical-pill-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .inner-pill-wrapper {
+    background: #353535;
+    border-width: 4px 0px 4px 4px;
+    border-style: solid;
+    border-color: #ffffff;
+    box-shadow: 0px 34px 34px 14px rgba(0, 0, 0, 0.35);
+    border-radius: 10px 0px 0px 10px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 7px;
+
+    font-family: "Helvetica Neue";
+    font-style: normal;
+    font-size: 15px;
+    line-height: 18px;
+
+    /* White/Dark */
+
+    color: #ffffff;
+    padding: 12px;
+  }
+  .inner-pill-wrapper:hover {
+    cursor: pointer;
+    background: #2b2b2b;
+  }
+  .vertical-pill-bold {
+    font-weight: 700;
+  }
+  .vertical-pill-icon {
+    text-align: center;
+    width: 28px;
+  }
+
   @media screen and (max-height: 750px) {
     .launcher__window-wrapper {
       bottom: 0;

package/src/WebComponent/me-chat.ts

@@ -1,4 +1,4 @@
-import { css, html, svg, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
@@ -9,17 +9,19 @@ import Analytics from "../analytics";
 import { createChatID, getChatID } from "../chatID";
 import createConversation from "../createConversation";
 import fetchBuildingInfo, { Building } from "../fetchBuildingInfo";
+import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import { getTheme, Theme, ThemeIdString } from "../themes";
 import { isMobile } from "../utils";
 import { installLauncher } from "./Launcher";
+import { FilledTourIcon, FilledEmailIcon, ChevronIcon } from "../svgIcons";
+import parseISO from "date-fns/parseISO";
+import isPast from "date-fns/isPast";
 
 import "./MEChat.css";
 import { getRawAvailabilities } from "../getAvailabilities";
 import { StyleInfo } from "lit/directives/style-map";
 import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
-import parseISO from "date-fns/parseISO";
-import isPast from "date-fns/isPast";
 
 export interface Options {
   building: string;
@@ -44,18 +46,20 @@ export class MEChat extends LitElement {
       width: 100%;
       height: 100px;
     }
-    .contactTabPopup {
+    #contactTabPopup {
       position: fixed;
-      bottom: 720px;
-      right: 0px;
       width: 300px;
       padding-left: 20px;
       padding-right: 20px;
+      padding-bottom: 24px;
       z-index: 5;
-
       background: #353535;
       border-radius: 10px 0px 0px 0px;
-
+    }
+    .hideTab {
+      display: none;
+    }
+    .showTab {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -66,12 +70,10 @@ export class MEChat extends LitElement {
       font-weight: 600;
       font-size: 14px;
       line-height: 22px;
-
       color: #ffffff;
       border: none;
       background: none;
       padding: 0;
-
       display: flex;
       align-items: center;
       gap: 5px;
@@ -124,9 +126,17 @@ export class MEChat extends LitElement {
   @state()
   private building: Building | null = null;
   @state()
+  private buildingABTestType: string | null = null;
+  @state()
   private hasMounted = false;
   @state()
   private hideLauncher = false;
+  @state()
+  private isLoading = true;
+  @state()
+  private talkjsPopupElement: Element | null = null;
+  @state()
+  private myContactHeader: Element | null = null;
 
   private yardiDNIScriptInterval: NodeJS.Timer | null = null;
   launcherRef: Ref<Launcher> = createRef();
@@ -135,6 +145,7 @@ export class MEChat extends LitElement {
     await this.setBuildingDerivedInfo();
     await this.initializeLaunchJS();
     this.attachOnClickToLauncher();
+    this.isLoading = false;
   };
 
   setBuildingDerivedInfo = async (): Promise<void> => {
@@ -142,6 +153,9 @@ export class MEChat extends LitElement {
       return;
     }
     this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    const buildingABTest = await fetchBuildingABTestType(this.buildingSlug);
+
+    this.buildingABTestType = buildingABTest?.abTestType ?? "";
     getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
@@ -151,6 +165,7 @@ export class MEChat extends LitElement {
       this.buildingSlug,
       this.chatId
     );
+    this.analytics.ping("webchat_heartbeat");
   };
 
   private initializeLaunchJS = async () => {
@@ -257,6 +272,7 @@ export class MEChat extends LitElement {
       this.hideLauncher = false;
     });
     const talkjsPopupElement = document.querySelector(".__talkjs_popup");
+    this.talkjsPopupElement = talkjsPopupElement;
     if (!talkjsPopupElement) throw new Error("Failed to find chat window");
     talkjsPopupElement.classList.add("meetelise-chat", "pane");
     if (!this.isMobile) {
@@ -268,7 +284,12 @@ export class MEChat extends LitElement {
     const shouldAutoOpen =
       !autoOpenedTimestamp ||
       (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
+    if (
+      building.autoOpenChatWidget &&
+      shouldAutoOpen &&
+      !isMobile() &&
+      this.buildingABTestType !== "close"
+    ) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -322,39 +343,67 @@ export class MEChat extends LitElement {
     this.initializeInstanceVariables();
   };
 
-  handleContactClicked = (): void => {
+  handleContactClicked = (e: MouseEvent): void => {
     this.popup?.hide();
     this.hideLauncher = false;
 
-    this.launcherRef.value?.onClickEmailOption();
+    this.launcherRef.value?.onClickEmailOption(e);
   };
 
-  handleTourClicked = (): void => {
+  handleTourClicked = (e: MouseEvent): void => {
     this.popup?.hide();
     this.hideLauncher = false;
 
-    this.launcherRef.value?.onClickSSTOption();
+    this.launcherRef.value?.onClickSSTOption(e);
+  };
+
+  // Talkjs is very limiting with changing it's design and working around it.
+  //  For the top header contact, we change its pos based on the current x and y
+  //  of the talkjs popup - so we must adjust its coords on resize and mount
+  adjustTopHeaderContactCoords = (): void => {
+    if (this.talkjsPopupElement) {
+      const currentHeaderCoords = getOffset(this.talkjsPopupElement);
+      const headerRef = this.shadowRoot?.getElementById("contactTabPopup");
+      if (!headerRef) return;
+      headerRef.style.left = `${currentHeaderCoords.left + 20}px`;
+      headerRef.style.top = `${currentHeaderCoords.top - 50}px`;
+    }
   };
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.adjustTopHeaderContactCoords);
+  }
+  disconnectedCallback(): void {
+    window.removeEventListener("resize", this.adjustTopHeaderContactCoords);
+    super.disconnectedCallback();
+  }
+  updated(): void {
+    this.adjustTopHeaderContactCoords();
+  }
+
   render(): TemplateResult {
     installLauncher();
-
     return html`
       <div>
-        ${this.hideLauncher
-          ? html` <div class="contactTabPopup">
-              <button class="actionTabBttn" @click=${this.handleContactClicked}>
-                ${TopEmailIcon}
-                <p><span class="heavyLabel">Email</span> an agent</p>
-                ${TopChevronIcon}
-              </button>
-              <button class="actionTabBttn" @click=${this.handleTourClicked}>
-                ${TopTourIcon}
-                <p><span class="heavyLabel">Book</span> a tour</p>
-                ${TopChevronIcon}
-              </button>
-            </div>`
-          : ""}
+        <div
+          id="contactTabPopup"
+          class=${classMap({
+            ["showTab"]: this.hideLauncher,
+            ["hideTab"]: !this.hideLauncher || this.isLoading,
+          })}
+        >
+          <button class="actionTabBttn" @click=${this.handleContactClicked}>
+            ${FilledEmailIcon}
+            <p><span class="heavyLabel">Email</span> an agent</p>
+            ${ChevronIcon}
+          </button>
+          <button class="actionTabBttn" @click=${this.handleTourClicked}>
+            ${FilledTourIcon}
+            <p><span class="heavyLabel">Book</span> a tour</p>
+            ${ChevronIcon}
+          </button>
+        </div>
         <div
           class=${classMap({
             launcherContainer: true,
@@ -363,6 +412,7 @@ export class MEChat extends LitElement {
             ["meetelise-chat"]: true,
             launcher: true,
             shouldBeVisible: true,
+            ["hideTab"]: this.isLoading,
           })}
         >
           ${this.building
@@ -384,6 +434,7 @@ export class MEChat extends LitElement {
                 orgSlug="${this.orgSlug}"
                 buildingSlug="${this.buildingSlug}"
                 sgtUrl="${this.building?.sgtUrl ?? ""}"
+                buildingABTestType="${this.buildingABTestType ?? ""}"
                 escortedToursLink="${this.building?.escortedToursLink ?? ""}"
                 virtualToursLink="${this.building?.virtualToursLink ?? ""}"
                 ?hidden=${this.hideLauncher}
@@ -422,6 +473,7 @@ export class MEChat extends LitElement {
       }
 
       this.popup.show();
+      this.adjustTopHeaderContactCoords();
       this.analytics?.ping("open");
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -439,25 +491,10 @@ declare global {
   }
 }
 
-const TopTourIcon = svg`<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.5286 6.72109H0.00730896C0.065762 4.35374 2.00202 2.45401 4.38399 2.45401H4.93198V3.91534C4.93198 4.22222 5.18041 4.46333 5.47998 4.46333C5.77955 4.46333 6.02798 4.22222 6.02798 3.91534V2.45401H11.508V3.91534C11.508 4.22222 11.7564 4.46333 12.056 4.46333C12.3555 4.46333 12.604 4.22222 12.604 3.91534V2.45401H13.1519C15.5339 2.45401 17.4702 4.35374 17.5286 6.72109V6.72109Z" fill="#B6C2FE"/>
-<path d="M17.5359 7.45181V15.606C17.5359 18.0318 15.5704 19.99 13.1519 19.99H4.38398C1.96548 19.99 0 18.0318 0 15.606V7.45181H17.5359Z" fill="white"/>
-<path d="M5.47998 1V2.46133" stroke="#B6C2FE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.0559 1V2.46133" stroke="#B6C2FE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
-<path d="M0 6.72115H0.00730262C-4.01349e-06 6.75768 0 6.80152 0 6.83805V6.72115Z" fill="white"/>
-<path d="M17.5359 6.72115V6.83805C17.5359 6.80152 17.5359 6.75768 17.5286 6.72115H17.5359Z" fill="white"/>
-<path d="M5.30463 13.2459L7.33587 15.2772C7.62083 15.5621 8.08115 15.5621 8.36611 15.2772L12.224 11.4193" stroke="#404040" stroke-miterlimit="10" stroke-linecap="round"/>
-</svg>
-`;
-
-const TopEmailIcon = svg`<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.4 0H4.8C2.14903 0 0 2.14903 0 4.8V11.2C0 13.851 2.14903 16 4.8 16H14.4C17.051 16 19.2 13.851 19.2 11.2V4.8C19.2 2.14903 17.051 0 14.4 0Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.79997 0H14.4C16.006 0 17.4278 0.788745 18.2991 2H0.900805C1.77215 0.788745 3.19395 0 4.79997 0Z" fill="#B6C2FE"/>
-<path d="M5.33594 5.08789L8.78398 7.9999C9.27198 8.4159 9.91992 8.4159 10.4159 7.9999L13.864 5.08789" stroke="#404040" stroke-miterlimit="10" stroke-linecap="round"/>
-</svg>
-`;
-
-const TopChevronIcon = svg`<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 7L4 4L1 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+function getOffset(el: Element) {
+  const rect = el.getBoundingClientRect();
+  return {
+    left: rect.left + window.scrollX,
+    top: rect.top + window.scrollY,
+  };
+}

package/src/fetchBuildingABTestType.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+export interface BuildingABType {
+  abTestType: string;
+}
+export default async function fetchBuildingABTestType(
+  buildingSlug: string
+): Promise<BuildingABType | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const abTestTypeResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/ab-test-type`
+    );
+    return abTestTypeResponse.data;
+  } catch (_) {
+    return null;
+  }
+}