Tutorial: Collecting emails on a landing page
This example is the first use case why I created this service. At one time I built a small demo site with a landing page and wanted to add a feature where people could submit an email to be notified when a site goes live.
I really did not want to spend time creating a dedicated storage facility (i.e. a database) for something that I might not need in few weeks. That landing page was merely a proof of concept. I needed a way to quickly store some data that would be there
if I needed it, and destroyed after some time has passed.
Let's start with a very basic input to collect email addresses of an interested parties
Then we implement
The result of the above call will contain your unique key hash, which we then can use to store additional values - or to retrieve the entire data set.
To retrieve all emails submitted to project "mysite" we make the call below:
Let's start with a very basic input to collect email addresses of an interested parties
Email: <input id="user-email" type="text"/> <button onlick="store_user_email()">submit</button>
... which in a browser might look something like this:
Email:
Then we implement
onClick() event to sumbit user query (yes, I'm using jquery here)
<script>
function store_user_email() {
let address = document.getElementById("user-email").value;
$.ajax({
type: "GET",
url: "http://prefs.us/write/?project=mysite&email="+address,
success: function (result) {
const obj = JSON.parse(result);
console.log(obj.hash);
//obj.hash is our key to use for all subsequent read/write calls
}
});
}
</script>
Now we have captured our visitor's email address. No need to set up additional databases, servers, etc. etc. whatever.
function store_user_email() {
let address = document.getElementById("user-email").value;
$.ajax({
type: "GET",
url: "http://prefs.us/write/?project=mysite&email="+address,
success: function (result) {
const obj = JSON.parse(result);
console.log(obj.hash);
//obj.hash is our key to use for all subsequent read/write calls
}
});
}
</script>
The result of the above call will contain your unique key hash, which we then can use to store additional values - or to retrieve the entire data set.
To retrieve all emails submitted to project "mysite" we make the call below:
https://prefs.us/read/?project=mysite&key=abcdefg12345...7890
Response:
{
"hash": "abcdefg12345...7890",
"values": [
{
"email": "janedoe@someplace.com",
"theme": "light"
}
]
}
"hash": "abcdefg12345...7890",
"values": [
{
"email": "janedoe@someplace.com",
"theme": "light"
}
]
}
Notes:
To add more addresses to that "collection" of email addresses, I simply use the same key when submitting additional addresses.
HTTP GET
https://prefs.us/write/?email=jane@someplace.com&theme=dark&key=abcdefg12345...7890
https://prefs.us/write/?email=jane@someplace.com&theme=dark&key=abcdefg12345...7890