Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> | |
| <meta content="utf-8" http-equiv="encoding"> | |
| <style> | |
| .button { | |
| border: none; | |
| color: white; | |
| padding: 16px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| transition-duration: 0.4s; | |
| cursor: pointer; | |
| } | |
| .buttonGreen { | |
| background-color: white; | |
| color: black; | |
| border: 2px solid #4CAF50; | |
| } | |
| .buttonGreen:hover { | |
| background-color: #4CAF50; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>WhatsApp client browser example</h1> | |
| <form> | |
| <label for="idInstance">Id Instance:</label><br> | |
| <input required type="text" id="idInstance" name="idInstance"><br> | |
| <label for="apiTokenIsntance">API Token:</label><br> | |
| <input required type="text" id="apiTokenIsntance" name="apiTokenIsntance"><br> | |
| </form> | |
| <p style="color:blue" id="statusText"></p> | |
| <p style="color:blue" id="resultText"></p> | |
| <p>Press button to get qr code</p> | |
| <div style="display:grid; width: 20%"> | |
| <button id="getQrBtn" class="button buttonGreen">Get QR</button> | |
| <button style="display: none" hidden id="logoutQrBtn" class="button buttonGreen">Logout</button> | |
| <img hidden id="img-qr-code" alt="QR-Code" class="sb-qr-wizard-qr-code" aria-hidden="false" src="data:image/png;base64,%QR_DATA%" style=""> | |
| </div> | |
| <script type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script> | |
| <script> | |
| var intervalId = null | |
| const qrCodeElement = document.getElementById("img-qr-code") | |
| const qrTempalte = qrCodeElement.getAttribute('src'); | |
| document.getElementById("getQrBtn").addEventListener("click", function () { | |
| try { | |
| isAuthed(); | |
| clearInterval(intervalId) | |
| updateQRCode() | |
| intervalId = setInterval(updateQRCode, 5000); | |
| } catch (reason) { | |
| console.error(reason); | |
| document.getElementById("resultText").innerHTML = reason + ". See logs for details"; | |
| } | |
| }); | |
| document.getElementById("logoutQrBtn").addEventListener("click", function () { | |
| try { | |
| const restAPI = whatsAppClient.restAPI(({ | |
| idInstance: document.getElementById("idInstance").value, | |
| apiTokenInstance: document.getElementById("apiTokenIsntance").value | |
| })) | |
| restAPI.instance.logout() | |
| .then((data) => { | |
| document.getElementById("resultText").innerHTML = "isLogout=" + data.isLogout | |
| isAuthed(); | |
| }).catch((reason) => { | |
| console.error(reason); | |
| document.getElementById("resultText").innerHTML = reason + ". See logs for details"; | |
| }); | |
| } catch (reason) { | |
| console.error(reason); | |
| document.getElementById("resultText").innerHTML = reason + ". See logs for details"; | |
| } | |
| }); | |
| function updateQRCode() { | |
| const restAPI = whatsAppClient.restAPI(({ | |
| idInstance: document.getElementById("idInstance").value, | |
| apiTokenInstance: document.getElementById("apiTokenIsntance").value | |
| })) | |
| restAPI.instance.qr() | |
| .then((data) => { | |
| console.log(data); | |
| document.getElementById("resultText").innerHTML = ""; | |
| if (data.type === 'qrCode') { | |
| qrCodeElement.hidden = false; | |
| qrCodeElement.setAttribute('src', qrTempalte.replace("%QR_DATA%", data.message)) | |
| } else { | |
| qrCodeElement.hidden = true; | |
| clearInterval(intervalId) | |
| isAuthed(); | |
| document.getElementById("resultText").innerHTML = data.message | |
| } | |
| }).catch((reason) => { | |
| console.error(reason); | |
| document.getElementById("resultText").innerHTML = reason + ". See logs for details"; | |
| }); | |
| } | |
| function isAuthed() { | |
| const restAPI = whatsAppClient.restAPI(({ | |
| idInstance: document.getElementById("idInstance").value, | |
| apiTokenInstance: document.getElementById("apiTokenIsntance").value | |
| })) | |
| restAPI.instance.getStateInstance().then(data => { | |
| document.getElementById("statusText").innerHTML = data.stateInstance; | |
| if (data.stateInstance === 'authorized') { | |
| document.getElementById("getQrBtn").style.display = "none" | |
| document.getElementById("logoutQrBtn").style.display = "block" | |
| } else { | |
| document.getElementById("getQrBtn").style.display = "block" | |
| document.getElementById("logoutQrBtn").style.display = "none" | |
| } | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |