@meetelise/chat - npm Package Compare versions

Comparing version 1.0.0-rc.20 to 1.0.0-rc.21

dist/src/MEChat.js

@@ -21,3 +21,3 @@ import fetchBuildingInfo from "./fetchBuildingInfo";
         this.building = fetchBuildingInfo(organization, building);
-        this.popup = Promise.all([this.building, initialize()]).then(([building]) => {
+        this.popup = Promise.all([this.building, initialize()]).then(async ([building]) => {
             const resolvedTheme = (this.theme = resolveTheme(building, theme));
@@ -33,3 +33,9 @@ installTalkJSStyles(resolvedTheme);
             }
-            return p.mount({ show: false }).then(() => p);
+            await p.mount({ show: false });
+            const popupEl = document.querySelector(".__talkjs_popup");
+            if (!popupEl)
+                throw new Error("Failed to find chat window");
+            popupEl.classList.add("meetelise-chat");
+            popupEl.classList.add("pane");
+            return p;
         });
@@ -40,2 +46,4 @@ this.launcher = this.popup.then(() => {
                 throw new Error("MeetElise Chat: Could not locate launcher.");
+            a.classList.add("meetelise-chat");
+            a.classList.add("launcher");
             return a;
@@ -42,0 +50,0 @@ });

dist/src/resolveTheme.js

 export default function resolveTheme(building, theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     return {
@@ -7,12 +7,12 @@ avatarInitials: (_b = (_a = theme.avatarInitials) !== null && _a !== void 0 ? _a : building.avatarInitials) !== null && _b !== void 0 ? _b : building.userFirstName[0],
         bannerColor: (_e = (_d = theme.bannerColor) !== null && _d !== void 0 ? _d : building.bannerColor) !== null && _e !== void 0 ? _e : "#e7ecee",
-        bannerTextColor: "rgba(0, 0, 0, 0.88)",
-        chatSubtitle: (_f = theme.chatSubtitle) !== null && _f !== void 0 ? _f : building.chatSubtitle,
-        chatTitle: (_h = (_g = theme.chatTitle) !== null && _g !== void 0 ? _g : building.chatTitle) !== null && _h !== void 0 ? _h : building.userFirstName,
-        launchButtonColor: (_k = (_j = theme.launchButtonColor) !== null && _j !== void 0 ? _j : building.launchButtonColor) !== null && _k !== void 0 ? _k : "#0785f2",
-        launchButtonIconColor: (_m = (_l = theme.launchButtonIconColor) !== null && _l !== void 0 ? _l : building.launchButtonIconColor) !== null && _m !== void 0 ? _m : "#ffffff",
-        launchButtonSize: (_p = (_o = theme.launchButtonSize) !== null && _o !== void 0 ? _o : building.launchButtonSize) !== null && _p !== void 0 ? _p : "60px",
-        messageColor: (_r = (_q = theme.messageColor) !== null && _q !== void 0 ? _q : building.messageColor) !== null && _r !== void 0 ? _r : "#0785f2",
-        messageTextColor: "#fff", // TODO REX-353 compute based on contrast
+        bannerTextColor: (_f = theme.bannerTextColor) !== null && _f !== void 0 ? _f : "#000",
+        chatSubtitle: (_g = theme.chatSubtitle) !== null && _g !== void 0 ? _g : building.chatSubtitle,
+        chatTitle: (_j = (_h = theme.chatTitle) !== null && _h !== void 0 ? _h : building.chatTitle) !== null && _j !== void 0 ? _j : building.userFirstName,
+        launchButtonColor: (_l = (_k = theme.launchButtonColor) !== null && _k !== void 0 ? _k : building.launchButtonColor) !== null && _l !== void 0 ? _l : "#0785f2",
+        launchButtonIconColor: (_o = (_m = theme.launchButtonIconColor) !== null && _m !== void 0 ? _m : building.launchButtonIconColor) !== null && _o !== void 0 ? _o : "#ffffff",
+        launchButtonSize: (_q = (_p = theme.launchButtonSize) !== null && _p !== void 0 ? _p : building.launchButtonSize) !== null && _q !== void 0 ? _q : "60px",
+        messageColor: (_s = (_r = theme.messageColor) !== null && _r !== void 0 ? _r : building.messageColor) !== null && _s !== void 0 ? _s : "#0785f2",
+        messageTextColor: (_t = theme.messageTextColor) !== null && _t !== void 0 ? _t : "#fff",
     };
 }
 //# sourceMappingURL=resolveTheme.js.map

package.json

 {
   "name": "@meetelise/chat",
-  "version": "1.0.0-rc.20",
+  "version": "1.0.0-rc.21",
   "description": "",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -1,29 +0,32 @@
-# chat-ui
+# MeetElise Webchat
 
-### Helpful commands
+### Installation
 
+To install MeetElise webchat on your site, add the following code:
+
+```html
+<script type="module">
+  import Chat from "https://cdn.skypack.dev/@meetelise/chat";
+  Chat.start({
+    organization: "{your org here}",
+    building: "{your building here}",
+  });
+</script>
 ```
-npm publish
-npm start
-npm run build
-```
 
-### Bookmarklet
+### Custom Styles
 
-To preview the production chat widget on an ad-hoc website, you can use a bookmarklet. Create a bookmark in your browser, but instead of pasting in an http(s) URL, paste in the following code:
+To customize the brand colors, title, and subtitle of your chat widget, configure your webchat through the MeetElise portal. To _reposition_ your chat widget on the page, add the following code to your web page.
 
-```js
-javascript: ((d) => {
-  const s = d.createElement("script");
-  s.type = "module";
-  let p = prompt(
-    "Enter an org/building URL pair",
-    "test-company/e2e-yardi-test-building"
-  );
-  if (!p) return;
-  s.src = `https://unpkg.com/@meetelise/chat#${p}`;
-  d.body.appendChild(s);
-})(document);
+```html
+<style>
+  .meetelise-chat.launcher {
+    bottom: 50px; /* change these values to suit your needs */
+    right: 40px;
+  }
+  .meetelise-chat.pane {
+    bottom: 70px;
+    right: 40px;
+  }
+</style>
 ```
-
-This bookmarklet will not work on some pages due to Content Security Policy (CSP) settings, but it will work on <https://get.meetelise.com/demo>.

src/MEChat.ts

@@ -107,3 +107,3 @@ import Talk from "talkjs";
     this.popup = Promise.all([this.building, initialize()]).then(
-      ([building]) => {
+      async ([building]) => {
         const resolvedTheme = (this.theme = resolveTheme(building, theme));
@@ -121,3 +121,8 @@ installTalkJSStyles(resolvedTheme);
         }
-        return p.mount({ show: false }).then(() => p);
+        await p.mount({ show: false });
+        const popupEl = document.querySelector(".__talkjs_popup");
+        if (!popupEl) throw new Error("Failed to find chat window");
+        popupEl.classList.add("meetelise-chat");
+        popupEl.classList.add("pane");
+        return p;
       }
@@ -131,2 +136,4 @@ );
       if (!a) throw new Error("MeetElise Chat: Could not locate launcher.");
+      a.classList.add("meetelise-chat");
+      a.classList.add("launcher");
       return a;
@@ -133,0 +140,0 @@ });

src/resolveTheme.ts

@@ -28,3 +28,3 @@ import { Building } from "./fetchBuildingInfo";
     bannerColor: theme.bannerColor ?? building.bannerColor ?? "#e7ecee",
-    bannerTextColor: "rgba(0, 0, 0, 0.88)", // TODO REX-353 compute based on contrast
+    bannerTextColor: theme.bannerTextColor ?? "#000",
     chatSubtitle: theme.chatSubtitle ?? building.chatSubtitle,
@@ -41,4 +41,4 @@ chatTitle: theme.chatTitle ?? building.chatTitle ?? building.userFirstName,
     messageColor: theme.messageColor ?? building.messageColor ?? "#0785f2",
-    messageTextColor: "#fff", // TODO REX-353 compute based on contrast
+    messageTextColor: theme.messageTextColor ?? "#fff",
   };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62817

increased by4.36%

Number of package files

51

increased by2%

Lines of code

1097

increased by1.39%

Number of lines in readme file

33

increased by10%

No dependency changes