We have received a few requests about the mailing list API. There has especially been interest in how to integrate the mailing list to an existing website without going through any Servage subscribe/unsubscribe pages. Therefore I have created a very simple sample AJAX integration example, and thought it would be interesting for some of your as well.
You need to include the jQuery library, and please be aware that the email validation is very basic, and please also note that most browsers will not allow the API call because it goes outside the scope of your domain/URL (i.e. it tries to connect to Servage’s domain, instead of yours). In such cases you need to setup a relay-script or similar, but that is not part of this simple tutorial.
<script type="text/javascript"> $(document).ready(function() { $('#newsletter form').submit(function(event) { // Preventing the default form submit and doing our API call instead event.preventDefault(); // Setting the URL for the API request var url = 'http://www.servage.net/apps/ml/?maillist=20262&api=true'; // Getting the email address var email = $('input[name=email]', $(this)).attr('value'); // Adding the email address to the request url = url + '&email=' + email; // Is this a "subscribe" or "unsubscribe"? (and adding to the request) $('input[name=option]', $(this)).each(function() { if ($(this).is('[type=radio]')) { if ($(this).is(':checked')) { url = url + '&' + $(this).attr('value') + '=true'; } } }); // Adding email to mailing list via API if (isValidEmail(email)) { $.ajax({ type: "GET", url: url, success: function(data, textStatus) { // Yes, it was added alert('Email address added to mailing list.'); }, complete: function (XMLHttpRequest, textStatus) { // Whoops, it couldn't be added if (textStatus != 'success') alert('The email address could not be added (connection error).'); } }); } else alert('Please enter a valid email address.'); }); }); function isValidEmail(email) { return (email.indexOf(".") > 2) && (email.indexOf("@") > 0); } </script> <div id="newsletter"> <form method="post" action="#"> <label for="email">Email address:</label> <input type="text" name="email" /> <label for="email">Subscribe</label> <input type="radio" name="option" value="subscribe" checked /> <label for="email">Unsubscribe</label> <input type="radio" name="option" value="unsubscribe" /> <input type="submit" name="submit" value="Submit" /> </form> </div>
No comments yet (leave a comment)