Skip to main content

Docs Home > Newsletter Subscription Management System

Newsletter Subscription Management System

This page provides documentation for the Newsletter Subscription Management System. Below, you will find an example of how to create a subscription form using HTML and JavaScript. The form allows users to enter their email address and subscribe to the newsletter. When the form is submitted, a POST request is sent to the BunnyCRM API to add the email to the subscription list.

Requirements for Implementing a Subscription Form​

Subscription Form Implementation​

The HTML section includes a simple form with an email input field and a submit button. The JavaScript section handles the form submission, sending the email to the API endpoint using an XMLHttpRequest. If the subscription is successful, an alert is displayed to the user.

The sample response shows the structure of a successful subscription response from the API, including a unique message ID, the URI of the subscription endpoint, and the status code.

HTML Code​

<div>
    <h5 class="mb-3">Subscribe to Newsletter</h5>

    <form id="newsletterForm" method="post"> 
        <input type="email" name="email" class="form-control" placeholder="Your email address" required> 
        <button type="submit" class="btn btn-primary w-100">Subscribe</button>
    </form>
</div>

JavaScript Code​

<script>
    document.getElementById('newsletterForm').addEventListener('submit', function (event) {
        console.log('Form submitted');
        event.preventDefault();

        var email = document.querySelector('input[name="email"]').value;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://crmapi01.bunnycrm.com/v1/newsletter/subscribe', true);
        xhr.setRequestHeader('Authorization', 'Basic YOUR_API_KEY_HERE');
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert('Subscription successful!');
            }
        };

        var data = JSON.stringify({ email: email });
        xhr.send(data);
    });
</script>

Provide the value for YOUR_API_KEY_HERE in above code.

This JavaScript code adds an event listener to a form with the ID newsletterForm. When the form is submitted, it prevents the default form submission behavior, retrieves the email input value, and sends it via a POST request to a specified URL using XMLHttpRequest. It includes basic authentication and sets the content type to JSON. If the request is successful, it alerts the user that the subscription was successful.

Sample Response​

{
    "message": {
        "id": "20241131-73034686-00009"
    },
    "uri": "/v1/newsletter/subscribe",
    "status": 201
}

Unsubscription Form Implementation​

The unsubscription form can be developed similarly to the subscription form. The main difference is that the unsubscription request needs to be sent to a different endpoint. Below, you will find an example of how to create an unsubscription form using HTML and JavaScript. The form allows users to enter their email address and unsubscribe from the newsletter. When the form is submitted, a POST request is sent to the BunnyCRM API to remove the email from the subscription list.

HTML Code for Unsubscription Form​

<div>
    <h5 class="mb-3">Unsubscribe from Newsletter</h5>

    <form id="unsubscribeForm" method="post"> 
        <input type="email" name="email" class="form-control" placeholder="Your email address" required> 
        <button type="submit" class="btn btn-danger w-100">Unsubscribe</button>
    </form>
</div>

JavaScript Code for Unsubscription Form​

<script>
    document.getElementById('unsubscribeForm').addEventListener('submit', function (event) {
        console.log('Form submitted');
        event.preventDefault();

        var email = document.querySelector('input[name="email"]').value;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://crmapi01.bunnycrm.com/v1/newsletter/unsub', true);
        xhr.setRequestHeader('Authorization', 'Basic BASIC_AUTH_TOKEN_HERE');
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert('Unsubscription successful!');
            }
        };

        var data = JSON.stringify({ email: email });
        xhr.send(data);
    });
</script>

Provide the value for YOUR_API_KEY_HERE in above code.

This JavaScript code adds an event listener to a form with the ID unsubscribeForm. When the form is submitted, it prevents the default form submission behavior, retrieves the email input value, and sends it via a POST request to the unsubscription endpoint using XMLHttpRequest. It includes basic authentication and sets the content type to JSON. If the request is successful, it alerts the user that the unsubscription was successful.

Sample Response for Unsubscription​

{
    "message": "Successfully removed email address",
    "uri": "/v1/newsletter/unsub",
    "status": 200
}

Questions / Feedback?​

Got any questions or feedback? Tell us here