how to create a html button that opens outlook application?

Question

How to create a button in webpage that opens outlook application with compose mail (new mail) option attached with that webpage's screeshot?

i dont know how to add screenshot to mail but for opening outlook use this, `` — Alireza Behnamnik, Oct 11 '16 at 05:08
Possible duplicate of [Open a outlook new mail using php and html](http://stackoverflow.com/questions/8503699/open-a-outlook-new-mail-using-php-and-html) — Shashanth, Oct 11 '16 at 05:16

Nayantara Jeyaraj · Answer 1 · 2016-10-11T06:07:51.433

13

You can simply achieve this with a single html line of code.

<a href="mailto:someone@something.com?subject=your title&body=TThe message">
    <button id="btnOutlook">Go to Outlook</button>
</a>

This can also be exted to include other fields such as

<a href="mailto:address..?subject=subject...&body=anything...&cc=ccemailaddress@something.com&bcc=bcc@something.com">
    <button id="btnOutlook">...</button>
</a>

This is a handy method to add a link to let the user contact you without the need of any server-side programming languages.

But also note that Mailto works ONLY if the visitor has configured an email client (such as Outlook Express) on their system.

In order to attach screenshots as you require, it's advisable to seek a solution as described here.

Or the following method using Javascript and HTML5 can also be used

In the HTML file- define markup and scripting

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
    function take_screenshot()
    {
        html2canvas(document.body, { onrendered: function(canvas)  
        {
            var img = canvas.toDataURL()
            $.post("save_screenshot.php", {data: img}, functio(file){            
                 window.location.href =  "save_screenshot.php?file="+ file
            });
        }
        });
     }
</script>
<body>
     <div id="wrapper">
         <div id="screenshot_div">
             <button type="button" onclick="take_screenshot()">buttonText</button>
         </div>
     </div>
 </body>

Make a PHP file to save the screenshot

<?php
if($_GET['file'])
{
    $file=$_GET['file'];
    if (file_exists($file))
    {
        header('Content-Description: File Transfer');
        header('Content-Type: image/png');
        header('Content-Disposition: attachment; filename='.basename($file));
        header('Content-Transfer-Encoding: binary');
        header('Expires: 0');
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header('Pragma: public');
        header('Content-Length: ' . filesize($file));
        ob_clean();
        flush();
        readfile($file);
        unlink($file);
        exit;
    }
}

if($_POST['data'])
{
    $data = $_POST['data'];
    $file = md5(uniqid()) . '.png';
    $uri =  substr($data,strpos($data,",")+1);
    file_put_contents('./'.$file, base64_decode($uri));
    echo $file;
    exit();
}
?>

Since am not sure of your exact program structure, use this only as a guide. To attach the stored image, use the method to attach images, that I've mentioned above. For more info in this regard you can refer to this.

Hope this helps

edited Oct 11 '16 at 06:07

answered Oct 11 '16 at 05:12

Nayantara Jeyaraj

2,624
7
34
63

Thank you Tara, I dont want any mail id to be pre-attached in the "to:" field. All that I want is to create a button that can open a new outlook mail with a attached screen shot of that webpage. – User1493 Oct 11 '16 at 05:29
In this case, do you select the attachment prior to opening the mailing application(i.e before clicking on the button)? or is it an autoshot that you expect to be attached? – Nayantara Jeyaraj Oct 11 '16 at 05:31
No, I actually dont select. I want the screenshot to be taken and attached with that new mail with blank "to:" field – User1493 Oct 11 '16 at 05:36
`With blank to: field` ? So does the user enter his/her desired `to:` address once they are redirected to the mailer? – Nayantara Jeyaraj Oct 11 '16 at 05:47
In order to get a screen shot of the webpage, you'll need to incorporate Javascript as well. I've added the rest of the details to my answer above. – Nayantara Jeyaraj Oct 11 '16 at 05:52
Thank you so much, it was very helpful. I will check the code and alter mine. – User1493 Oct 11 '16 at 06:07
Glad I could help. Good luck! – Nayantara Jeyaraj Oct 11 '16 at 06:08
After this I would like to add this screen shot in the "body" of my mail. How to do that? and where did the screen shot get saved? – User1493 Oct 11 '16 at 11:14
In the php segment, there are 2 `if conditions` with the 1st used to download the saved screenshot and the 2nd to save the screenshot. In the 2nd if condition, we get the image data sent by `take_screenshot()` function and then we save the image in the directory .In the 1st condition we first check if the file exists and if yes then we insert all the necessary header required to download the file. – Nayantara Jeyaraj Oct 11 '16 at 11:36
So One solution is for you is that you have to manually attach the downloaded/ saved screenshot using the ***attach documents to the body*** method that I've referred in the answer. Sorry but am not very familiar with directly attaching images in the body of an email via these scripts. – Nayantara Jeyaraj Oct 11 '16 at 11:36
You have tried to your best to make me understand. Thank you. I will try to sort out the remaining problem. – User1493 Oct 11 '16 at 11:40
That code you sent for taking screenshot is not working. It is not taking screenshot. – User1493 Oct 12 '16 at 04:56
I have developed a new code which takes screenshot and saves it as an image. Now can you please tell me how to attach it to an outlook mail? – User1493 Oct 14 '16 at 09:00
Since you have a saved image, you can use a [Base64 encoder](https://sendgrid.com/blog/embedding-images-emails-facts/) to convert your image into Base64 string. Then try embedding the image's Base64 string with an `` tag within the `body` section of the `href` tag with the mailto clause. – Nayantara Jeyaraj Oct 14 '16 at 09:16
**Example**: `"> ` . Let me know if this works. – Nayantara Jeyaraj Oct 14 '16 at 09:18
Now, I have the encoded image with me but the image is not getting pasted in the body of the mail. I think the syntax you sent – User1493 Oct 14 '16 at 09:56
The syntax you sent `">` is wrong – User1493 Oct 14 '16 at 09:58
Just now I came though few pages and found that we cant attach an image to a body with `mailto`, it is only limited for text and not for html. So, we should probably go for `php`. – User1493 Oct 14 '16 at 10:11

score 9 · Answer 2 · edited May 23 '17 at 12:24

9

You can use mailto link as explained below

Mailto link is a type of HTML link that activates the default mail client on the computer for sending an e-mail. The web browser requires a default e-mail client software installed on his computer in order to activate the e-mail client. If you have Microsoft Outlook, for example as your default mail client, pressing a mailto link will open a new mail window.

<a href="mailto:vinoth@email.com">Send Mail</a>

If you want to add this to button you can try below html

<button onclick="location.href='mailto:vinoth@email.com';">Send Mail</button>

Regarding your second requirement to take screenshot and attach it with mail, please refer below link, I think its answered

How to screenshot website in JavaScript client-side

edited May 23 '17 at 12:24

Community

1
1

answered Oct 11 '16 at 05:09

rinoy

471
4
10

Thanks but i know this option. I want to know how to add this to a button and also to attach a screenshot – User1493 Oct 11 '16 at 05:27
I have provided a link related to screenshot issue. Hope it helps !! – rinoy Oct 11 '16 at 06:11
Im not talking about client side here. I just want to take the screen shot my own browser screen and attach it to the new mail. – User1493 Oct 11 '16 at 10:09

how to create a html button that opens outlook application?

2 Answers2