117 lines
3.8 KiB
Cheetah
117 lines
3.8 KiB
Cheetah
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Test Envoi WhatsApp</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; padding: 2rem; }
|
||
|
|
fieldset { margin-bottom: 2rem; padding: 1rem; border: 1px solid #ccc; }
|
||
|
|
legend { font-weight: bold; }
|
||
|
|
label { display: block; margin-top: 0.5rem; }
|
||
|
|
textarea { width: 100%; height: 4rem; }
|
||
|
|
input[type="text"] { width: 100%; }
|
||
|
|
button { margin-top: 1rem; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Tests d'envoi WhatsApp (JWT requis)</h1>
|
||
|
|
|
||
|
|
<!-- Bloc 1 : message texte simple -->
|
||
|
|
<fieldset>
|
||
|
|
<legend>1. Message texte simple</legend>
|
||
|
|
<label>Numéro (E.164) :</label>
|
||
|
|
<input type="text" id="to1" value="33600000000">
|
||
|
|
<label>Message :</label>
|
||
|
|
<textarea id="text1">Bonjour depuis le test simple !</textarea>
|
||
|
|
<button onclick="sendText()">Envoyer</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<!-- Bloc 2 : message texte + média -->
|
||
|
|
<fieldset>
|
||
|
|
<legend>2. Message image + texte</legend>
|
||
|
|
<label>Numéro :</label>
|
||
|
|
<input type="text" id="to2" value="33600000000">
|
||
|
|
<label>ID média :</label>
|
||
|
|
<input type="text" id="media2" placeholder="media_id">
|
||
|
|
<label>Légende :</label>
|
||
|
|
<input type="text" id="caption2" value="Voici une image !">
|
||
|
|
<button onclick="sendImage()">Envoyer</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<!-- Bloc 3 : message interactif -->
|
||
|
|
<fieldset>
|
||
|
|
<legend>3. Message interactif (image + bouton URL)</legend>
|
||
|
|
<label>Numéro :</label>
|
||
|
|
<input type="text" id="to3" value="33600000000">
|
||
|
|
<label>Texte :</label>
|
||
|
|
<input type="text" id="text3" value="Cliquez ci-dessous pour en savoir plus">
|
||
|
|
<label>Image (ID média) :</label>
|
||
|
|
<input type="text" id="img3" placeholder="media_id">
|
||
|
|
<label>Titre :</label>
|
||
|
|
<input type="text" id="title3" value="Promo spéciale">
|
||
|
|
<label>URL 1 :</label>
|
||
|
|
<input type="text" id="url1" value="https://example.com">
|
||
|
|
<label>URL 2 :</label>
|
||
|
|
<input type="text" id="url2" value="https://google.com">
|
||
|
|
<button onclick="sendInteractive()">Envoyer</button>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<h2>Réponse :</h2>
|
||
|
|
<pre id="response" style="background:#f4f4f4; border:1px solid #ccc; padding:1rem;"></pre>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function send(payload) {
|
||
|
|
const res = await fetch('/api/message/send', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify(payload)
|
||
|
|
});
|
||
|
|
const txt = await res.text();
|
||
|
|
document.getElementById('response').textContent = txt;
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendText() {
|
||
|
|
const to = document.getElementById('to1').value;
|
||
|
|
const text = document.getElementById('text1').value;
|
||
|
|
send({ to, type: 'text', text: { body: text } });
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendImage() {
|
||
|
|
const to = document.getElementById('to2').value;
|
||
|
|
const mediaID = document.getElementById('media2').value;
|
||
|
|
const caption = document.getElementById('caption2').value;
|
||
|
|
send({ to, type: 'image', image: { id: mediaID, caption: caption } });
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendInteractive() {
|
||
|
|
const to = document.getElementById('to3').value;
|
||
|
|
const body = document.getElementById('text3').value;
|
||
|
|
const imageID = document.getElementById('img3').value;
|
||
|
|
const title = document.getElementById('title3').value;
|
||
|
|
const url1 = document.getElementById('url1').value;
|
||
|
|
const url2 = document.getElementById('url2').value;
|
||
|
|
|
||
|
|
const payload = {
|
||
|
|
to,
|
||
|
|
type: 'interactive',
|
||
|
|
interactive: {
|
||
|
|
type: 'button',
|
||
|
|
body: { text: body },
|
||
|
|
header: { type: 'image', image: { id: imageID } },
|
||
|
|
footer: { text: title },
|
||
|
|
action: {
|
||
|
|
buttons: [
|
||
|
|
{ type: 'url', url: url1, text: 'Visiter 1' },
|
||
|
|
{ type: 'url', url: url2, text: 'Visiter 2' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
send(payload);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|