A form that will collect the email addresses of users who have signed up for availability notifications is a very important element when implementing this scenario. Preparation of such a form and its implementation on product pages is on your side.
Below you will find a sample script for such a form, although it can be completely different, tailored to your preferences, and expectations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
}
.container {
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.form_container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
}
.form_container input,
button {
font-family: inherit;
margin: 5px 0px;
}
</style>
</head>
<body>
<div class="container">
<h1>Wishlist form</h1>
<div class="form_container">
<input type="email" name="email" id="input-email" placeholder="Email" />
<input type="text" name="app_id" id="app_id" placeholder="App_id" />
<input type="text" id="prod-id" placeholder="Product ID" />
<input type="text" name="url" id="product-url" placeholder="URL" />
<input
type="text"
name="title"
id="product-title"
placeholder="Product Title"
/>
<input
type="text"
name="image"
id="product-image"
placeholder="Product Image"
/>
<input
type="text"
name="cat-id"
id="cat-id"
placeholder="Category Id"
/>
<input
type="text"
name="cat-name"
id="cat-name"
placeholder="Category Name"
/>
</div>
<div class="form_buttons">
<button id="topic_observe">TOPIC OBSERVE</button>
<button id="topic_publish">TOPIC PUBLISH</button>
</div>
</div>
<script>
// example - "MK641992022"
document.querySelector("#topic_observe").addEventListener("click", () => {
var productId = document.querySelector("#prod-id").value;
var appId = document.querySelector("#app_id").value;
var email = document.querySelector("#input-email").value; // get this value from email input
$.post("https://api.edrone.me/topic_observe", {
app_id: appId,
email: email,
topic_id: productId, //unique per topic
topic_campaign_id: 0, // 0 - default email design
}).done(function (data) {
alert("Topic Observe sent check Mission Control");
});
});
document.querySelector("#topic_publish").addEventListener("click", () => {
var productId = document.querySelector("#prod-id").value;
var appId = document.querySelector("#app_id").value;
var url = document.querySelector("#product-url").value;
var title = document.querySelector("#product-title").value;
var img = document.querySelector("#product-image").value;
var catID = document.querySelector("#cat-id").value;
var catTitle = document.querySelector("#cat-name").value;
$.post("https://api.edrone.me/topic_publish", {
app_id: appId,
topic_id: productId,
product_urls: url,
product_skus: productId,
product_titles: title,
product_images: img,
product_category_ids: catID,
product_category_names: catTitle,
}).done(function (data) {
// handle this part based on your needs
alert("Topic Publish sent check Mission Control");
});
});
</script>
</body>
</html>
Need more help?
If you have any further questions about the Wishlist scenario, please do not hesitate to contact us at hello@edrone.me