feat: add chat icon

Dynamsoft · Nov 20, 2024 · 4682c23 · 4682c23
1 parent a9c08a4
commit 4682c23
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/css/index.css b/css/index.css
@@ -215,8 +215,8 @@ img {
 }
 
 .scanner-container .header .music-container {
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -239,8 +239,8 @@ img {
 }
 
 .scanner-container .header .upload-img-btn {
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -528,6 +528,20 @@ img {
   }
 }
 
+/* LIVE CHAT */
+.scanner-container .header .live-chat {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  cursor: pointer;
+}
+
+.scanner-container .header .live-chat:hover {
+  opacity: 0.8;
+}
+
 @media screen and (max-width: 800px) {
   html,
   body,
@@ -553,6 +567,15 @@ img {
     font-size: 20px;
     padding: 1.5rem;
   }
+
+  /* LIVE CHAT CSS */
+  .live-chat {
+    display: flex !important;
+  }
+
+  #comm100-float-button-20242b05-3781-4d86-9b7f-fab63ddcdde3-2 {
+    display: none !important;
+  }
 }
 
 @media screen and (max-width: 800px) and (orientation: landscape) {

diff --git a/index.html b/index.html
@@ -82,6 +82,41 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
           <img class="music" src="./assets/music-selected.svg" alt="music" title="Turn sound off" />
           <img class="no-music" src="./assets/music-unselected.svg" alt="no-music" title="Turn sound on" />
         </div>
+        <div class="live-chat">
+          <svg
+            data-v-2a1e9ed8=""
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="live-chat-icon"
+            onclick="Comm100API.do('livechat.button.click')"
+          >
+            <g data-v-2a1e9ed8="" transform="translate(-319 -816.551)">
+              <g data-v-2a1e9ed8="">
+                <g data-v-2a1e9ed8="" id="conversation-chat-2">
+                  <path
+                    data-v-2a1e9ed8=""
+                    d="M333.5,817.051h-10a4,4,0,0,0-4,4v5a4,4,0,0,0,4,4h1v4l4.5-4h4.5a4,4,0,0,0,4-4v-5A4,4,0,0,0,333.5,817.051Z"
+                    fill="none"
+                    stroke="#aaa"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1"
+                  ></path>
+                  <path
+                    data-v-2a1e9ed8=""
+                    d="M330.5,833.051v1.5a2.5,2.5,0,0,0,2.5,2.5h2.5l3,3v-3H340a2.5,2.5,0,0,0,2.5-2.5v-3a2.5,2.5,0,0,0-2.5-2.5h-.5"
+                    fill="none"
+                    stroke="#aaa"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </div>
         <div class="information-btn" title="More Information">
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/js/init.js b/js/init.js
@@ -7,9 +7,7 @@ const pDataLoad = createPendingPromise();
 /** LICENSE ALERT - README
  * To use the library, you need to first specify a license key using the API "initLicense" as shown below.
  */
-Dynamsoft.License.LicenseManager.initLicense(
-  "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLTEwMzAwNjk2NyIsIm1haW5TZXJ2ZXJVUkwiOiJodHRwczovL21sdHMuZHluYW1zb2Z0LmNvbS8iLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMCIsInNlc3Npb25QYXNzd29yZCI6IkVUSHZVNlNPV3F3ZiIsInN0YW5kYnlTZXJ2ZXJVUkwiOiJodHRwczovL3NsdHMuZHluYW1zb2Z0LmNvbS8iLCJjaGVja0NvZGUiOjM5OTMzODU2Nn0="
-);
+Dynamsoft.License.LicenseManager.initLicense("");
 /**
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense/?product=mrz&utm_source=samples&package=js to get your own trial license good for 30 days.
  * For more information, see https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/user-guide/mrz-scanner.html#specify-the-license or contact [email protected].