@tiledesk/tiledesk-whatsapp-connector 0.1.7 → 0.1.9

package/index.js

@@ -12,7 +12,7 @@ const bodyParser = require("body-parser");
 const appRoot = require('app-root-path');
 const handlebars = require('handlebars');
 const fs = require('fs');
-//const Path = require('path');
+const path = require('path');
 //const FormData = require('form-data');
 
 // tiledesk clients
@@ -28,6 +28,7 @@ const kvbase_collection = 'kvstore';
 
 router.use(bodyParser.json());
 router.use(bodyParser.urlencoded({ extended: true }));
+router.use(express.static(path.join(__dirname, 'template')));
 
 //const TOKEN = process.env.WHATSAPP_TOKEN;        // From FB DevX getting started page
 //const VERIFY_TOKEN = process.env.VERIFY_TOKEN;   // Arbitrary, used with webhook configuration in FB DevX

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-whatsapp-connector",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Tiledesk Whatsapp connector",
   "main": "index.js",
   "scripts": {

package/template/configure.html

@@ -23,6 +23,8 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
         integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
         </script>
+  
+    <link rel="stylesheet" href="./css/style.css">
 
 </head>
 
@@ -42,8 +44,8 @@
     
           <div>
             
-            <h1 style="margin-top: 0px; margin-bottom: 2px; min-width: 500px;">WhatsApp Business (Test)</h1>
-            <h7 style="color: rgb(140, 140, 140);">by Tiledesk (v. 0.1.7)</h7>
+            <h1 style="margin-top: 0px; margin-bottom: 2px; min-width: 500px;">WhatsApp Business</h1>
+            <h7 style="color: rgb(140, 140, 140);">by Tiledesk (v. 0.1.9)</h7>
 
             {{#if wab_token}}
               <div style="margin-top: 20px;">
@@ -80,12 +82,13 @@
         </div>
 
         <div style="margin-top: 10px;">
-          <a href="https://gethelp.tiledesk.com/" target="_blank">View documentation</a>
+          <a href="https://gethelp.tiledesk.com/categories/whatsapp-business/" target="_blank">View documentation</a>
         </div>
-        
+      
 
         <hr>
 
+        
         <div>
           <h4>Your Configuration</h4>
       
@@ -93,9 +96,14 @@
             <form action="./update" method="post">
 
               <div class="form-group" style="width: 490px;">
-                    <label style="margin-bottom: 0px;" for="proxy_url">Webhook Endpoint
-                    <a href="https://gethelp.tiledesk.com/" target="_blank"><span style="margin-left: 10px;"><i class="fa fa-question-circle" style="color: #337ab7;"></i></span></a></label>
-                    <p style="margin-bottom: 5px; font-size: 12px; color: #a7a7a7;">Copy this URL in the Facebook Developer Dashboad. See documentation for more info.</p>
+                    <label for="proxy_url">Webhook Endpoint
+                        <span style="margin-left: 10px;">
+                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
+                            <span class="custom-tooltiptext">This is the endpoint to be reached by WhatsApp. Copy it to the Facebook Developer console in "Callback URL" in Whatsapp Configuration. See documention for more info.</span>
+                          </i>
+                        </span>
+                    </label>
+                    <!--<p style="margin-bottom: 5px; font-size: 12px; color: #a7a7a7;">Copy this URL in the Facebook Developer Dashboad. See documentation for more info.</p> -->
                     <div style="display: flex; flex-direction: row; justify-content: space-between">
                         <div style="width: 400px;">
                             <input type="text" readonly class="form-control" name="proxy_url" id="proxy_url"
@@ -116,13 +124,26 @@
                 </div>
 
                 <div class="form-group" style="width: 400px;">
-                    <label for="wab_token">Whatsapp Token</label>
+                    <label for="wab_token">Whatsapp Token
+                    <span style="margin-left: 10px;">
+                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
+                            <span class="custom-tooltiptext">Paste it the permanent WhatsApp Business token. See documention for more info.</span>
+                          </i>
+                        </span>
+                    </label>
                     <input type="text" class="form-control" name="wab_token" value="{{ wab_token }}"
                         placeholder="Enter the Whatsapp Token">
                 </div>
 
                 <div class="form-group" style="width: 400px;">
-                    <label for="verify_token">Verify Token</label>
+                    <label for="verify_token">Verify Token
+                    <span style="margin-left: 10px;">
+                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
+                            <span class="custom-tooltiptext">This is a verification token of your choice. Copy it to the Facebook Developer console in "Verify Token" in Whatsapp Configuration.
+                              See documention for more info.</span>
+                          </i>
+                        </span>
+                    </label>
                     <input type="password" class="form-control" name="verify_token" value="{{ verify_token }}"
                         placeholder="Enter your Verify Token">
                 </div>

package/template/css/style.css

@@ -0,0 +1,46 @@
+/* Tooltip container */
+.custom-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.custom-tooltip .custom-tooltiptext {
+  visibility: hidden;
+  width: 260px;
+  background-color: #6e6f70;
+  font-size: 13px;
+  color: #fff;
+  text-align: center;
+  padding: 8px 8px;
+  border-radius: 6px;
+
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -130px;
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.custom-tooltip .custom-tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.custom-tooltip:hover .custom-tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}