Skip to content

Instantly share code, notes, and snippets.

@crosalot

crosalot/apitel.sender.html

Created March 18, 2021 04:01
Show Gist options
  • Save crosalot/69c2cff30ec1f52bc5847825259a09ed to your computer and use it in GitHub Desktop.
Save crosalot/69c2cff30ec1f52bc5847825259a09ed to your computer and use it in GitHub Desktop.
Download ZIP
Send multiple SMS of APITEL by simple HTML form and javascript (no server side required)
Raw
apitel.sender.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>APITEL Sender</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">APITEL Sender</h1>
<form enctype="application/json" action="https://api.apitel.co/sms" method="POST" id="senderForm" target="resultFrame">
<div class="card mt-4 d-print-none">
<div class="card-header">
<h4>API Credentials</h4>
<div class="text-muted d-print-none">
Your information <a href="https://apitel.co/account" target="_blank">here</a>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<label for="apiKey" class="form-label">Key</label>
<input type="text" class="form-control" id="apiKey" name="apiKey">
</div>
<div class="mb-3">
<label for="apiSecret" class="form-label">Secret</label>
<input type="text" class="form-control" id="apiSecret" name="apiSecret">
</div>
<div class="mb-3">
<label for="from" class="form-label">Sender Name</label>
<input type="text" class="form-control" id="from" name="from">
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
<h4>SMS</h4>
</div>
<div class="card-body">
<div class="mb-3">
<label for="telephones" class="form-label">To(s)</label>
<div class="text-muted mb-2"><small>One line per telephone number</small></div>
<textarea class="form-control" id="telephones" rows="10"></textarea>
</div>
<div class="mb-3">
<label for="text" class="form-label">Message (text)</label>
<textarea class="form-control" id="text" name="text" rows="3"></textarea>
</div>
<input type="hidden" name="to" id="to" />
<div class="mb-2 mt-4 d-print-none">
<button class="btn btn-secondary" id="save">Save</button>
<button class="btn btn-primary" id="send">Send SMS</button>
</div>
</div>
</div>
</form>
<div class="card mt-4">
<div class="card-header">
<h4>Results</h4>
<div class="text-muted d-print-none">
Print or save PDF for your copy results click <a href="#" onclick="window.print();">here</a>
</div>
</div>
<div class="card-body">
<div class="" id="results">
After your submit click, results will be appear here
</div>
</div>
</div>
<script type="text/javascript">
(function() {
var apiKeyInput = document.getElementById('apiKey')
var apiSecretInput = document.getElementById('apiSecret')
var fromInput = document.getElementById('from')
var telephonesInput = document.getElementById('telephones')
var textInput = document.getElementById('text')
apiKeyInput.value = localStorage.getItem('apiKey')
apiSecretInput.value = localStorage.getItem('apiSecret')
fromInput.value = localStorage.getItem('from')
telephonesInput.value = localStorage.getItem('telephones')
textInput.value = localStorage.getItem('text')
var save = (callback) => {
var param = {}
param.apiKey = apiKeyInput.value
param.apiSecret = apiSecretInput.value
param.from = fromInput.value
param.text = textInput.value
var telephones = telephonesInput.value
localStorage.setItem('apiKey', param.apiKey)
localStorage.setItem('apiSecret', param.apiSecret)
localStorage.setItem('from', param.from)
localStorage.setItem('text', param.text)
localStorage.setItem('telephones', telephones)
callback && callback(param, telephones)
}
document.getElementById('save').onclick = (e) => {
e.preventDefault()
save()
}
document.getElementById('send').onclick = (e) => {
e.preventDefault()
const url = 'https://api.apitel.co/sms'
var senderForm = document.getElementById('senderForm')
var toInput = document.getElementById('to')
var resultsElement = document.getElementById('results')
resultsElement.innerHTML = ''
save((param, telephones) => {
telephones.split('\n').forEach((to, i) => {
to = to.trim()
if (!to) {
return
}
if (to.startsWith('0')) {
to = `+66${to.slice(1)}`
} else if (!to.startsWith('0') && !to.startsWith('+66')) {
to = `+66${to}`
}
var iframe = document.createElement('IFRAME')
iframe.name = `resultFrame${i}`
iframe.width = '100%'
iframe.height = '50px'
resultsElement.appendChild(iframe)
senderForm.target = iframe.name
toInput.value = to
senderForm.submit()
})
})
}
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment