How to add open email in browser, in the simplest manner, php, mailto

Question

I am sending out an email with the following line from a webhook that is fired at the end of a purchase in woocomerce in wordpress mail($to, $subject, $message, $headers); the email successfully fires but I want the email to have a link to open in browser so it can be formatted in html for a specific css print design. Is there a way to autogenerate a html file I can host for each email sent out with php and wordpress, that I would then add the link to those html files respectively for the emails sent out. I don't know another solution but am open to alternate solutions as well.

This is how I am building the email right now in the php file.

$to = $email_user;
    $subject_decoded = 'You received a gift card for stuff';
    $subject = '=?UTF-8?B?' . base64_encode( $subject_decoded ) . '?=';
    $subject1 = 'test';
    $message = '<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse;"><tbody><tr><td style="padding: 40px 40px 20px; background-color: #f9f9f9;" align="center"><table border="0" cellspacing="0" cellpadding="0" width="600" style="border-collapse: collapse;"><tbody>';
    $message .= '<tr><td align="center" valign="bottom" style="padding: 0 0 20px;">';
    $message .= '<img src="https://dev.website.com/wp-content/uploads/2019/05/RCDH-ComLogo.png" alt="place" width="600" height="87" style="vertical-align: bottom;" />';
    $message .= '</td></tr>';
    $message .= '<tr><td align="center" style="padding: 10px 40px 20px; background-color: #ffffff; color: #676767; font-family: Helvetica, Arial, sans-serif;">';
    $message .= '<h2 style="font-family: Garamond, serif; font-size: 28px; font-weight: 600; color: #444444;">' . (!empty($gift_card_data['recipient_name']) ? $gift_card_data['recipient_name'] : 'Whoa') . ', you&rsquo;ve got ' . $gift_card_data['gift-card-amount'] . ' to spend at place; | Deane&nbsp;House!</h2>';
    $message .= '<p style="color: #676767;">' . (!empty($gift_card_data['sender']) ? $gift_card_data['sender'] : 'Someone') . ' sent you a gift card' . (!empty($gift_card_data['message']) ? ' with the following message:' : '.') . '</p>';
    if( !empty($gift_card_data['message']) ) {
      $message .= '<p style="color: #676767;"><i><br />' . nl2br($gift_card_data['message']) . '<br /><br /></i></p>';
    }
    $message .= '<img src=" ' . $gift_card_image . '"/>';
    //$message .= '<img src="https://www.barcodesinc.com/generator/image.php?code=' . $response->result[3] . '&style=68&type=C39&width=300&height=50&xres=1&font=4" alt="" />';
    // barcode generator website: https://www.barcodesinc.com/generator/index.php
    $message .= '<p style="color: 676767; font-size: 1.25em;"><b>Card Number:</b> ' . $response->result[3] . '<br /> <b>PIN:</b> ' . $response_reference[1] . '<br /> <b>Card Amount:</b> ' . $response->result[4] . '<br /> <b>Reference Number:</b> ' . $response_reference[0] . '</p>';
    $message .= '</td></tr>';
    $message .= '<tr><td align="center" style="padding: 20px 0 0;">';
    $message .= '<p style="color: #676767;"><b>We look forward to you dining with us!</b></p>';  
    $message .= '</td></tr>';
    $message .= '</tbody></table></td></tr></tbody></table>';
    $headers = "From: Gift Cards <noreply@website.com>\r\n";
    $headers .= "Reply-To: noreply@website\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    mail($to, $subject, $message, $headers);

Thanks ahead of time.

Answer 1

Other answers here have the methodology I would use, but they are generic and as you mentioned that this is in WordPress I thought I'd give you a more WordPress specific solution.

Firstly I would create a new WordPress post type called email or sent_woocommerce_emails or whatever you like really:

// Customise this post type as your please
function create_email_posttype() {

    register_post_type( 'email',
        array(
            'labels' => array(
                'name' => __( 'Emails' ),
                'singular_name' => __( 'Email' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'emails'),
        )
    );
}
// Hooking up our function to theme setup
add_action( 'init', 'create_email_posttype' );

For each email to be stored/sent I would programmatically create a new 'Email' post. From here you can set the post content to the content of your email, the slug to a random identifier (md5 post content?), and even set a password that you randomly generate. You could also set any other metadata you wanted to store such as user, email to etc.

// You might consider setting this password to a hash of the username + date_created or something in order to allow the user the same password for all of their emails.
$slug = md5($email_content);
$post = array(
    'post_content' => $email_content,
    'post_title' => $email_title,
    'post_type' => 'email',
    'post_status' => 'publish',
    'post_password' => md5($slug), // Change this it's insecure, just here as an example
    'post_name' => $slug
);

You can then store this post, and append a string to the very end of your email containing a link to the created post and the password.

$post_id = wp_insert_post( $post );
$link = get_permalink($post_id);
$email_content.= "<a href=\"$link\">View this email in your browser</a> Password: $post_password";

Using this method allows you to access and manage all of these emails in your WordPress dashboard. Properly password the emails (if you so choose). And avoids having to create tables or even interact with the database directly.

It isn't a difficult task from here to extend this functionality further such as create a page where each user can list their own emails etc.

Do note that I haven't tested any of this code. It likely has bugs, and entirely lacks any error checking etc. Also the finer intricacies such as how the passwords and slugs are generated will need some thought. The code here is just to give an idea

Answer 2

Yes storing sent Emails benefits us for short as well as long term. You can send email as 2nd task after storing in the database of your server.

Database structure

• id
• mail_to
• mail_body
• sent_at

On accessing webhook, store your email details in table like this, where mail_body is your html body of email.

Save your email and get your insert_id(); of email. And append it in bottom of your email body saying. Open email in browser. and Link it like this:

example.com/view-email.php?id={your-generated-insert-id}

You can create a view-mail.php

Based on id you obtain from get() method, find the details from database and display in your browser like charm.

Make sure to apply additional checks for security reasons which can be.

• Add extra parameter of &refer-from=<?php echo base64_encode($user_mail_id)?> which you can validate along with id so one can not guess next id, and will have additional layer of authentication.

You can additionally use this to access sent email list from your admin panel as well, which will be helpful specially for debugging purpose.

Bonus point

If you are using bulk emailing, to optimize storage, you can normalize table to store mail_body saparatly for once and all other details once, and refer mail_body_id in another table.

Example.

mail_log_record

• mail_log_id
• mail_sent_to
• mail_body_id
• mail_sent_at

mail_body

• mail_body_id
• mail_body_content
• mail_body_added_at

this way you going to save a lot more space for bulk emails.

Answer 3

Here's an idea:

• create a database table that has two fields:
  • id (non-incremental autogenerated)
  • body (text for $message contents)
• make the endpoint that accepts id, e.g. html-email/{id}
• autogenerate the id using a hashing algorithm
• take the contents of $message and store it in the database along with id
• generate the link to your page html-email/{id}
• append it to the $message
• send the email

Once the link is clicked on from the email itself you can load the stored message contents and display as desired.