Spaces:
Sleeping
Sleeping
File size: 5,533 Bytes
58f870a 326b9e2 58f870a 326b9e2 58f870a 326b9e2 58f870a 291e8c2 6c01ee1 326b9e2 9c12554 0292fb1 326b9e2 0292fb1 291e8c2 326b9e2 58f870a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!DOCTYPE html>
<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> |