@meetelise/chat 1.12.12 → 1.12.15

package/src/MEChat.ts

@@ -1,3 +1,4 @@
+import { StyleInfo } from "lit/directives/style-map";
 import { ThemeIdString } from "./themes";
 import "./WebComponent/me-chat";
 import { MEChat as MEChatLitElement } from "./WebComponent/me-chat";
@@ -32,6 +33,9 @@ export default class MEChat {
     if (opts.mini !== undefined) {
       meChat.useMiniWidget = opts.mini;
     }
+    if (opts.launcherStyles) {
+      meChat.launcherStyles = opts.launcherStyles;
+    }
     document.body.appendChild(meChat);
     MEChat.meChat = meChat;
   }
@@ -50,6 +54,7 @@ export interface Options {
   themeId?: ThemeIdString;
   avatarSrc?: string;
   mini?: boolean;
+  launcherStyles?: StyleInfo;
 }
 
 /** You can't install a font from CSS in a shadow DOM, so we use JS to do it here in the regular DOM. */

package/src/WebComponent/Launcher.ts

@@ -8,7 +8,7 @@ import { glowBarMp4, glowBarWebm } from "../assetUrls";
 import { launcherStyles } from "./launcherStyles";
 import { EmailUsWindow, installEmailUsWindow } from "./actions/email-us-window";
 import { installTextUsWindow, TextUsWindow } from "./actions/text-us-window";
-import { styleMap } from "lit/directives/style-map.js";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { classMap } from "lit/directives/class-map.js";
 import { installCallUsWindow } from "./actions/call-us-window";
 import { getRegisteredPhoneNumbers } from "../getRegisteredPhoneNumbers";
@@ -54,6 +54,8 @@ export class Launcher extends LitElement {
   onChatTapped: () => void = () => {
     return;
   };
+  @property()
+  launcherStyles: StyleInfo = {};
 
   @state()
   isEmailWindowOpen = false;
@@ -244,7 +246,10 @@ export class Launcher extends LitElement {
 
   renderMiniLauncher = (): TemplateResult => {
     return html`
-      <div class="launcher__mini-launcher-wrapper">
+      <div
+        class="launcher__mini-launcher-wrapper"
+        style=${styleMap(this.launcherStyles)}
+      >
         ${this.isEmailWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <email-us-window

package/src/WebComponent/actions/InputStyles.ts

@@ -4,10 +4,9 @@ export const InputStyles = css`
   .webchat-input {
     border: 1px solid #83818e;
     outline: none;
-    font-size: 14px;
     color: #202020;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 22px;
     font-family: "Poppins";
     padding-left: 12px;
@@ -25,6 +24,6 @@ export const InputStyles = css`
   .webchat-input::placeholder {
     color: #202020;
     font-family: "Poppins";
-    font-size: 14px;
+    font-size: 16px;
   }
 `;

package/src/WebComponent/me-chat.ts

@@ -15,6 +15,7 @@ import { installLauncher } from "./Launcher";
 
 import "./MEChat.css";
 import { getRawAvailabilities } from "../getAvailabilities";
+import { StyleInfo } from "lit/directives/style-map";
 
 export interface Options {
   building: string;
@@ -62,6 +63,8 @@ export class MEChat extends LitElement {
   private avatarSrc?: string | null;
   @property({ type: Boolean })
   useMiniWidget = true;
+  @property()
+  launcherStyles: StyleInfo = {};
 
   @state()
   private popup: Talk.Popup | null = null;
@@ -100,6 +103,11 @@ export class MEChat extends LitElement {
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
     this.theme = getTheme(this.themeId ?? this.building.themeId);
+    this.analytics = new Analytics(
+      this.orgSlug,
+      this.buildingSlug,
+      this.chatId
+    );
   };
 
   private initializeLaunchJS = async () => {
@@ -150,7 +158,6 @@ export class MEChat extends LitElement {
       !this.analytics ||
       !this.analytics.chatId ||
       !this.building ||
-      !this.theme ||
       !this.popup ||
       !MEChat.session
     ) {
@@ -277,6 +284,7 @@ export class MEChat extends LitElement {
           .buildingId=${this.building?.id ?? 0}
           .layoutOptions=${this.building?.layoutOptions ?? []}
           .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
+          .launcherStyles=${this.launcherStyles}
           phoneNumber="${this.building?.phoneNumber ?? ""}"
           textColor="${this.theme.chatHeader.textColor}"
           backgroundColor="${this.theme.chatPaneBackgroundColor}"