![\"Mailgun](\"https:\/\/i.imgur.com\/7IYAFRf.png\")
If you want to send emails from your own custom domain, you’ll need a paid Mailgun plan. The free plan only supports the sandbox domain and limits sending to five authorized recipients.<\/a><\/p><\/div>\r\n <\/div>\r\n\n Next, you need to generate an API key from the\u00a0API Security<\/strong>\u00a0page. You can find this option in the drop-down menu under your name in the top-right corner of the Mailgun dashboard: You’ll use this API key in your Flask application to send abandoned cart notifications via the Mailgun API. To set up a new project, open a terminal inside your preferred project directory and run the following commands to fetch the required code \u2013 both the UI and backend \u2013 onto your machine:<\/p>\n\n Next, inside the\u00a0 Before you proceed, it’s recommended that you create and activate a new\u00a0virtual environment<\/a>\u00a0to isolate your project and avoid dependency conflicts. The screenshot below shows a simple ecommerce UI for simulating abandoned cart scenarios. At the top, the header displays the title, along with a user profile (showing the name and email) and a shopping cart icon indicating the number of items in the cart. There are four product cards showcasing images, names, prices, and descriptions, and users can select quantities before adding items with the\u00a0Add to Cart<\/strong>\u00a0button. At the bottom left, a settings panel lets you configure the abandoned cart timeout (in seconds) and reset the cart if needed. In real life, timeout would be in hours, and it should be tracked by the backend. You can find the code for this shopping cart interface in\u00a0 Note: If you’re using Mailgun’s free plan, make sure that USER_EMAIL is one of the verified addresses in your Mailgun account. You can leave the remaining two parameters unchanged.<\/p><\/div>\r\n <\/div>\r\n\n Abandoned cart reminder emails must not only be informative but also visually appealing. A well-designed HTML email with images presents the cart details clearly and increases the chances of the user returning to complete their purchase. The\u00a0 This function constructs an HTML email reminding a user about their abandoned cart. It first extracts key details from the provided data, including the user’s name, cart items, and total price. If a timestamp is available, it converts it to the user’s time zone (since server and client time zones would be different) and formats it into a friendly date-time string (such as \u00ab\u00a0on March 25 at 3:49 PM\u00a0\u00bb). Otherwise, it defaults to \u00ab\u00a0recently.\u00a0\u00bb<\/p>\n\n <\/p>\n Navigate to\u00a0Send > Sending > Templates<\/strong>\u00a0in your Mailgun account to design your own email templates: Now that you’ve explored all the key components, it’s time to test the abandoned cart email workflow end to end. Instead of proceeding with checkout, allow the timer to finish its countdown. Once the countdown reaches zero, an alert should pop up on the UI confirming that the abandoned cart notification was sent. The alert message should read: Once your abandoned cart emails are being sent, it’s important to monitor their delivery, track engagement, and handle any failures effectively. Mailgun provides built-in reporting tools to monitor sent emails, open rates, and failures.<\/p>\n\n Here, you’ll find a graphical breakdown of key email statistics, such as: In this tutorial, you learned how to implement an abandoned cart email workflow using Mailgun. The process covered building a simple UI to simulate an ecommerce site, sending cart data to the backend, processing it with Flask, generating email templates, sending notifications via the Mailgun API, and tracking delivery metrics. Transactional emails like these help recover lost sales and improve customer engagement.<\/p>\n\n![\"Creating](\"https:\/\/i.imgur.com\/YEm9s1u.png\")
<\/p>\n\n
<\/p>\n\nSetting up a new Python project<\/h2>\n\n
git clone https:\/\/github.com\/manishh\/gifts-giveaways.git cd gifts-giveaways\/python\/mailgun-abandoned-cart-notifications<\/code>
<\/p>\n\nmailgun-abandoned-cart-notifications<\/code>\u00a0directory, rename\u00a0.env.example<\/code>\u00a0to\u00a0.env<\/code>, and update it with your Mailgun API credentials:# Replace with your actual Mailgun API key and domain MAILGUN_API_KEY=\"YOUR-API-KEY\" MAILGUN_DOMAIN=\"YOUR-MAILGUN-DOMAIN\"<\/code>
<\/p>\n\n
Once your virtual environment is active, install the required dependencies:pip install -r requirements.txt<\/code>
This installs all necessary packages, including\u00a0Flask<\/code>, the lightweight web framework that runs the backend.
After installation is complete, launch the Flask application with this command:python app.py<\/code>
The application UI will then be available at\u00a0http:\/\/localhost:5000\/<\/a>.<\/p>\n\nBuilding the abandoned cart interface<\/h2>\n\n
You can use this interface to trigger an event when a user leaves items in their cart without completing the purchase:![\"Abandoned](\"https:\/\/i.imgur.com\/c99b7OU.png\")
<\/p>\n\ntemplates\/shopping_cart.html<\/code><\/a>. This file has two important sections: the UI configuration and a function to send abandoned cart data to the backend.<\/p>\n\n
For the UI configuration, locate and edit\u00a0USER_NAME<\/code>\u00a0and\u00a0USER_EMAIL<\/code>\u00a0within the\u00a0<script><\/code>\u00a0tag to send the correct data to your backend. These two parameters represent the logged-in user in your ecommerce application:<\/p>\n\n\/\/ Configuration: Replace these with your own values const USER_NAME = \"John Smith\"; const USER_EMAIL = \"john.smith@example.com\"; \/\/ Verified email for Mailgun sandbox account const BACKEND_URL = 'http:\/\/localhost:5000\/abandoned-cart'; \/\/ Update to your Flask API endpoint, if needed let ABANDONED_CART_TIMEOUT = 60; \/\/ Default timeout in seconds<\/code><\/p>\n
The following JavaScript function,\u00a0sendToBackend(data)<\/code>, handles the process of sending abandoned cart details \u2013 such as user information, items in the cart, and the total value \u2013 to the backend for triggering a notification:<\/p>\n\n\/\/ Send data to backend function sendToBackend(data) { console.log('Sending abandoned cart data to backend...'); fetch(BACKEND_URL, { method: 'POST', headers: { 'Content-Type': 'application\/json', }, body: JSON.stringify(data) }) .then(response => { \/\/ Check if the response status is 200 (OK) if (response.status === 200) { return response.json(); } else { \/\/ Throw an error if the status is not 200 throw new Error(`HTTP error! Status: ${response.status}`); } }) .then(result => { console.log('Backend response:', result); alert('Abandoned cart notification sent successfully!'); resetCart(); }) .catch(error => { console.error('Error sending abandoned cart notification:', error); alert('Error sending abandoned cart notification. Check console for details.'); }); }<\/code><\/p>\n\n
This function first makes an HTTP POST request to\u00a0BACKEND_URL<\/code>\u00a0using the\u00a0fetch<\/code>\u00a0call, converting the cart data into a JSON payload.
If the server responds successfully (HTTP\u00a0200<\/code>), the response is processed and logged to the console, and an alert confirms that the abandoned cart notification was sent. The cart is then reset.<\/p>\n\n
If the request fails \u2013 due to network issues or a server-side problem (such as HTTP\u00a05XX<\/code>\u00a0errors) \u2013 the function catches the error, logs it to the console, and alerts the user that something went wrong. This way, the function ensures that both successful and failed attempts to notify the backend are handled gracefully, keeping the user informed throughout the process.<\/p>\n\n
The remaining code in\u00a0shopping_cart.html<\/code>\u00a0handles the CSS styling for a clean and visually appealing layout, JavaScript logic for calculating the cart’s total value, and timer management to simulate cart abandonment.<\/p>\n\nProcessing abandoned cart notifications in the backend<\/h2>\n\n
When the UI posts abandoned cart data to\u00a0BACKEND_URL<\/code>, the Flask application (app.py<\/code><\/a>) processes it using the following function:@app.route('\/abandoned-cart', methods=['POST']) def abandoned_cart(): \"\"\" Endpoint to receive abandoned cart data including user information. It sends email notification to the concerned user. \"\"\" try: # Get cart data from request cart_data = request.json # Extract user information user_info = cart_data.get('user', {}) user_email = user_info.get('email', 'unknown') # Log the received data logger.info(f\"Abandoned cart received from {user_email} at {datetime.datetime.now()}, Total items: {len(cart_data.get('items', []))}\") # Send email about the abandoned cart html_message = _generate_abandoned_cart_email(cart_data) _send_email(f\"{user_info.get('name', user_email)} <{user_email}>\", \"Your cart is waiting...\", html_message) # Return success response return jsonify({ \"status\": \"success\", \"message\": f\"Abandoned cart notification sent to: {user_info.get('email')}\", \"timestamp\": datetime.datetime.now().isoformat(), }), 200 except Exception as e: logger.error(f\"Error processing abandoned cart: {str(e)}\") return jsonify({\"status\": \"error\", \"message\": str(e)}), 500<\/code><\/p>\n\n
This API endpoint (\/abandoned-cart<\/code>) listens for POST requests when a user abandons their cart. It extracts the cart details from the request’s JSON payload, retrieves the user’s email and name, and logs the event along with the timestamp and number of items.<\/p>\n\n
Next, it generates an email using\u00a0_generate_abandoned_cart_email(cart_data)<\/code>, which converts the cart details into a neat HTML email template. The email is then sent to the\u00a0user_email<\/code>\u00a0via\u00a0_send_email()<\/code>, using the subject \u00ab\u00a0Your cart is waiting…\u00a0\u00bb to remind the user about their pending purchase.
If successful, the function returns a JSON response confirming that the email was sent. If an error occurs, such as an issue with the request or email service, it logs the error and returns an HTTP\u00a0500 Internal Server Error<\/code>\u00a0response, which the UI can use to inform the user about the notification status.<\/p>\n\nDesigning the email template<\/h2>\n\n
_generate_abandoned_cart_email(...)<\/code>\u00a0function takes care of that:<\/p>\n\ndef _generate_abandoned_cart_email(cart_data: Dict[str, Any]) -> str: \"\"\" Generate an HTML email for an abandoned cart using the provided cart data. Args: cart_data: Dictionary containing cart information including user details and items Returns: HTML string for the email \"\"\" try: # Extract data with error handling user_name = cart_data.get('user', {}).get('name', 'Valued Customer') first_name = user_name.split()[0] if ' ' in user_name else user_name items = cart_data.get('items', []) total_value = cart_data.get('totalValue', 0) # Format timestamp if available timestamp_str = cart_data.get('timestamp', '') timezone_offset = cart_data.get('timezoneOffset', 0) # Represent the user's time zone if timestamp_str: try: timestamp = datetime.datetime.fromisoformat(timestamp_str.replace('Z', '+00:00')) - datetime.timedelta(minutes=timezone_offset) abandonment_time = f\"on <b>{timestamp.strftime('%B %d at %I:%M %p')}<\/b>\" except (ValueError, TypeError): abandonment_time = 'recently' else: abandonment_time = 'recently' # Generate the HTML content with minimal, combined CSS html = f\"\"\"<!DOCTYPE html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <style> \/* CSS styling here *\/ <\/style> <\/head> <body> <div class=\"container\"> <div class=\"header\"> <h1>Your cart is waiting!<\/h1> <\/div> <div class=\"content\"> <p>Hello {first_name},<\/p> <p>We noticed you left some items in your cart {abandonment_time}. Don't worry, we've saved them for you!<\/p> <h2>Your Cart Items:<\/h2>\"\"\" # Add each item to the email for item in items: item_name = item.get('name', 'Product') item_price = item.get('price', 0) item_quantity = item.get('quantity', 1) item_image = item.get('image', '') item_description = item.get('description', '') # Format image tag with fallback image_tag = f'<img src=\"{item_image}\" alt=\"{item_name}\" style=\"max-width:100%; max-height:100%;\">' if item_image else item_name[0].upper() html += f\"\"\" <div class=\"item\"> <div class=\"img\">{image_tag}<\/div> <div class=\"details\"> <h3>{item_name}<\/h3> <p style=\"font-size:14px\">{item_description}<\/p> <p style=\"color:#666\">Quantity: {item_quantity}<\/p> <p style=\"font-weight:bold\">${item_price:.2f}<\/p> <\/div> <\/div>\"\"\" # Add total and call to action html += f\"\"\" <div class=\"total\">Total: ${total_value:.2f}<\/div> <div style=\"text-align:center\"> <a href=\"#\" class=\"btn\">Complete Your Purchase<\/a> <\/div> <p>If you have any questions about your order, please don't hesitate to contact our customer service team.<\/p> <p>Thank you for shopping with us!<\/p> <\/div> <div class=\"footer\"> <p>\u00a9 2025 Your Company Name. All rights reserved.<\/p> <\/div> <\/div> <\/body> <\/html>\"\"\" return html except Exception as e: # Return a simple fallback email if anything goes wrong return \"\"\"<!DOCTYPE html> <html> <body style=\"font-family:Arial;text-align:center;max-width:600px;margin:auto;padding:20px\"> <h1>Your Cart Is Waiting!<\/h1> <p>Hello there,<\/p> <p>You have items waiting in your cart. Click below to complete your purchase!<\/p> <a href=\"#\" style=\"display:inline-block;background:#eb5454;color:white;padding:10px 20px;text-decoration:none;border-radius:4px;font-weight:bold\">Complete Your Purchase<\/a> <\/body> <\/html>\"\"\"<\/code><\/p>\n\n
The email informs the user that their cart has been saved and lists the items they left behind, including the product name, quantity, price, description, and an image. The total value of the cart is prominently displayed, followed by a\u00a0Complete Your Purchase<\/strong>\u00a0button to encourage the user to return and finish checkout.
If an error occurs, such as missing data or formatting issues, the function falls back to a simple email with a basic message and purchase link. This ensures that even if the detailed version fails, users still receive a reminder to complete their transaction.<\/p>\n\n![\"Email](\"https:\/\/i.imgur.com\/rJ9PTpE.png\")
<\/p>\n\nImplementing the email sending functionality with Mailgun’s API<\/h2>\n\n
Once the email content is generated, it needs to be delivered reliably. The\u00a0_send_email(...)<\/code>\u00a0function handles sending abandoned cart notifications using Mailgun’s API:<\/p>\n\ndef _send_email(to_address: str, subject: str, html_message: str): \"\"\" Sends a single email to the given email address using Mailgun API. :param to_address: :param subject: :param message: \"\"\" api_key = os.getenv(\"MAILGUN_API_KEY\") # Get API key from the `.env` file resp = requests.post(MAILGUN_API_URL, auth=(\"api\", api_key), data={\"from\": FROM_EMAIL_ADDRESS, \"to\": to_address, \"subject\": subject, \"html\": html_message}) if resp.status_code == 200: # Success logging.info(f\"Successfully sent an email to '{to_address}' via Mailgun API.\") else: # Error raise RuntimeError(f\"Could not send the email, reason: {resp.text}\")<\/code><\/p>\n\n
This function reads\u00a0MAILGUN_API_KEY<\/code>\u00a0and then sends an email via Mailgun’s API using an HTTP POST request. The request includes essential email details, including sender address, recipient address, subject, and HTML content generated by the\u00a0_generate_abandoned_cart_email(...)<\/code>\u00a0function.
If the request is successful (resp.status_code == 200<\/code>), it logs a success message. Otherwise, it raises an exception with the response details.
It’s important to understand that\u00a0_send_email(...)<\/code>\u00a0deliberately does not handle errors, leaving it to the calling function (abandoned_cart()<\/code>, which serves the\u00a0\/abandoned-cart<\/code>\u00a0endpoint), so that it can catch exceptions and return an appropriate HTTP response. If the email is sent successfully,\u00a0abandoned_cart()<\/code>\u00a0returns an HTTP\u00a0200<\/code>\u00a0response confirming the notification was sent. If an error occurs, such as an invalid API key or network failure, it returns an HTTP\u00a0500<\/code>\u00a0response, ensuring the UI is informed of the issue.<\/p>\n\nTesting the workflow<\/h2>\n\n
First, make sure your Flask server is running and that the UI is accessible in your browser at\u00a0http:\/\/localhost:5000\/<\/a>. You can adjust the abandoned cart timeout in the settings panel at the bottom left of the page as required.<\/p>\n\n
Next, add a few items to your cart. Each time you add an item, the countdown cart timer resets and starts over. Once you’re done, click the cart icon to view the slide-out panel, which displays the selected products, their prices, and the\u00a0Proceed to Checkout<\/strong>\u00a0button:<\/p>\n\n![\"Triggering](\"https:\/\/i.imgur.com\/Qos5lQa.png\")
<\/p>\n\nAbandoned cart notification sent successfully!<\/code><\/p>\n\n
At the same time, your Flask app’s terminal should log messages like this:INFO:__main__:Abandoned cart received from <redacted-email> at 2025-03-24 14:02:00.077949, Total items: 3 INFO:root:Successfully sent an email to 'Name <redacted-email>' via Mailgun API.<\/code><\/p>\n\n
Finally, check your inbox for the abandoned cart email. If everything worked correctly, you should receive this message:<\/p>\n\n![\"Abandoned](\"https:\/\/i.imgur.com\/Jd0ferZ.png\")
<\/p>\n\n
Note:<\/strong>\u00a0If you’re using Mailgun’s free plan, the email may end up in the Spam folder.<\/p>\n\n
Congratulations! You’ve successfully implemented and tested the abandoned cart email notification workflow using Mailgun’s API.<\/p>\n\nMonitoring and managing emails<\/h2>\n\n
To access these insights, navigate to\u00a0Send > Reporting > Metrics<\/strong>\u00a0in your Mailgun dashboard:<\/p>\n\n![\"Mailgun](\"https:\/\/i.imgur.com\/J71wf64.png\")
<\/p>\n\n
Sent count:<\/strong>\u00a0Total number of emails attempted
Delivered count:<\/strong>\u00a0Emails successfully received by recipients
Opened count:<\/strong>\u00a0Number of emails opened by recipients (if open tracking is enabled)
Failed count:<\/strong>\u00a0Emails that failed due to issues like invalid addresses or spam filtering<\/p>\n\n
For deeper analysis, the\u00a0Logs<\/strong>\u00a0tab provides detailed records of each email’s status, while the\u00a0Bounce Classification<\/strong>\u00a0tab helps diagnose failures.
High bounce rates can negatively impact your email deliverability. To reduce bounces, regularly review the\u00a0Bounce Classification<\/strong>\u00a0tab in Mailgun, remove invalid emails, and use suppression lists to avoid resending to bounced addresses.<\/p>\n\nWrapping up<\/h2>\n\n
You can find the entire code for this tutorial in\u00a0this GitHub repository<\/a>.<\/p>\n\n
Now, you can put this knowledge into action \u2013 integrate Mailgun into your projects and start using transactional emails to enhance user experience.\u00a0Explore transactional email templates<\/a> and try the Mailgun API<\/a>\u00a0for free today!<\/p>\n
Before you begin, make sure you have the following:<\/strong><\/p>\n\n\n
Setting up a Mailgun account<\/h2>\n\n