{"id":3565,"date":"2022-10-06T23:57:20","date_gmt":"2022-10-06T18:57:20","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3565"},"modified":"2022-10-06T23:57:22","modified_gmt":"2022-10-06T18:57:22","slug":"send-email-view-inbox-messages-using-javascript-gmail-api","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/","title":{"rendered":"Send Email &#038; View Inbox Messages Using JavaScript Gmail API"},"content":{"rendered":"\n<p>In this tutorial, you will learn how to send an email and view inbox messages using <strong>JavaScript Gmail API<\/strong>. I have provided the complete source code of <strong>Gmail API JavaScript example<\/strong> below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project Screenshots<\/h2>\n\n\n\n<p>Here are some screenshots of Gmail API JavaScript example app that we will be creating today.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"115\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/javascript_gmail_api_authorize.jpg\" alt=\"JavaScript Gmail API authorize\" class=\"wp-image-3571\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/javascript_gmail_api_authorize.jpg 348w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/javascript_gmail_api_authorize-300x99.jpg 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><figcaption>JavaScript Gmail API authorize<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example-1024x443.jpg\" alt=\"View Inbox Messages Using JavaScript Gmail API\" class=\"wp-image-3567\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example-1024x443.jpg 1024w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example-300x130.jpg 300w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example-768x332.jpg 768w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example.jpg 1495w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>View Inbox Messages Using JavaScript Gmail API<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_send_email-1024x557.jpg\" alt=\"Send Email Using JavaScript Gmail API\" class=\"wp-image-3569\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_send_email-1024x557.jpg 1024w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_send_email-300x163.jpg 300w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_send_email-768x418.jpg 768w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_send_email.jpg 1164w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Send Email Using JavaScript Gmail API<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Gmail API JavaScript Example<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">index.html<\/h3>\n\n\n\n<p><strong>Important Note:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>On line # 109, replace <code>### YOUR CLIENT ID ###<\/code> with your actual OAuth client ID that you got from Google Developer Console.<\/li><li>On line # 110, replace <code>### YOUR API KEY ###<\/code> with your actual API key that you got from Google Developer Console.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"696\" height=\"415\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/google_developer_console_api_key_client_id.jpg\" alt=\"Google Developer Console API key and OAuth client ID\" class=\"wp-image-3566\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/google_developer_console_api_key_client_id.jpg 696w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/google_developer_console_api_key_client_id-300x179.jpg 300w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><figcaption>Google Developer Console API key and OAuth client ID<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!doctype html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Gmail API demo&lt;\/title&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css&quot;&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap-theme.min.css&quot;&gt;\n    &lt;style&gt;\n      iframe {\n        width: 100%;\n        border: 0;\n        min-height: 80%;\n        height: 600px;\n        display: flex;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=&quot;container&quot;&gt;\n      &lt;h1&gt;Gmail API demo&lt;\/h1&gt;\n\n      &lt;a href=&quot;#compose-modal&quot; data-toggle=&quot;modal&quot; id=&quot;compose-button&quot; class=&quot;btn btn-primary pull-right hidden&quot;&gt;Compose&lt;\/a&gt;\n\n      &lt;button id=&quot;authorize-button&quot; class=&quot;btn btn-primary hidden&quot;&gt;Authorize&lt;\/button&gt;\n\n      &lt;table class=&quot;table table-striped table-inbox hidden&quot;&gt;\n        &lt;thead&gt;\n          &lt;tr&gt;\n            &lt;th&gt;From&lt;\/th&gt;\n            &lt;th&gt;Subject&lt;\/th&gt;\n            &lt;th&gt;Date\/Time&lt;\/th&gt;\n          &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;&lt;\/tbody&gt;\n      &lt;\/table&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;modal fade&quot; id=&quot;compose-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;\n      &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;\n        &lt;div class=&quot;modal-content&quot;&gt;\n          &lt;div class=&quot;modal-header&quot;&gt;\n            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;\n              &lt;span aria-hidden=&quot;true&quot;&gt;\u00d7&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;h4 class=&quot;modal-title&quot;&gt;Compose&lt;\/h4&gt;\n          &lt;\/div&gt;\n          &lt;form onsubmit=&quot;return sendEmail();&quot;&gt;\n            &lt;div class=&quot;modal-body&quot;&gt;\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;compose-to&quot; placeholder=&quot;To&quot; required \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;compose-subject&quot; placeholder=&quot;Subject&quot; required \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;textarea class=&quot;form-control&quot; id=&quot;compose-message&quot; placeholder=&quot;Message&quot; rows=&quot;10&quot; required&gt;&lt;\/textarea&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;modal-footer&quot;&gt;\n              &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;\/button&gt;\n              &lt;button type=&quot;submit&quot; id=&quot;send-button&quot; class=&quot;btn btn-primary&quot;&gt;Send&lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/form&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;modal fade&quot; id=&quot;reply-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;\n      &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;\n        &lt;div class=&quot;modal-content&quot;&gt;\n          &lt;div class=&quot;modal-header&quot;&gt;\n            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;\n              &lt;span aria-hidden=&quot;true&quot;&gt;\u00d7&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;h4 class=&quot;modal-title&quot;&gt;Reply&lt;\/h4&gt;\n          &lt;\/div&gt;\n          &lt;form onsubmit=&quot;return sendReply();&quot;&gt;\n            &lt;input type=&quot;hidden&quot; id=&quot;reply-message-id&quot; \/&gt;\n\n            &lt;div class=&quot;modal-body&quot;&gt;\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;reply-to&quot; disabled \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;input type=&quot;text&quot; class=&quot;form-control disabled&quot; id=&quot;reply-subject&quot; disabled \/&gt;\n              &lt;\/div&gt;\n\n              &lt;div class=&quot;form-group&quot;&gt;\n                &lt;textarea class=&quot;form-control&quot; id=&quot;reply-message&quot; placeholder=&quot;Message&quot; rows=&quot;10&quot; required&gt;&lt;\/textarea&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;modal-footer&quot;&gt;\n              &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;\/button&gt;\n              &lt;button type=&quot;submit&quot; id=&quot;reply-button&quot; class=&quot;btn btn-primary&quot;&gt;Send&lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/form&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;script src=&quot;\/\/code.jquery.com\/jquery-1.11.3.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js&quot;&gt;&lt;\/script&gt;\n\n    &lt;script type=&quot;text\/javascript&quot;&gt;\n      var clientId = '### YOUR CLIENT ID ###'\n      var apiKey = '### YOUR API KEY ###';\n      var scopes =\n        'https:\/\/www.googleapis.com\/auth\/gmail.readonly '+\n        'https:\/\/www.googleapis.com\/auth\/gmail.send';\n\n      function handleClientLoad() {\n        gapi.client.setApiKey(apiKey);\n        window.setTimeout(checkAuth, 1);\n      }\n\n      function checkAuth() {\n        gapi.auth.authorize({\n          client_id: clientId,\n          scope: scopes,\n          immediate: true\n        }, handleAuthResult);\n      }\n\n      function handleAuthClick() {\n        gapi.auth.authorize({\n          client_id: clientId,\n          scope: scopes,\n          immediate: false\n        }, handleAuthResult);\n        return false;\n      }\n\n      function handleAuthResult(authResult) {\n        if(authResult &amp;&amp; !authResult.error) {\n          loadGmailApi();\n          $('#authorize-button').remove();\n          $('.table-inbox').removeClass(&quot;hidden&quot;);\n          $('#compose-button').removeClass(&quot;hidden&quot;);\n        } else {\n          $('#authorize-button').removeClass(&quot;hidden&quot;);\n          $('#authorize-button').on('click', function(){\n            handleAuthClick();\n          });\n        }\n      }\n\n      function loadGmailApi() {\n        gapi.client.load('gmail', 'v1', displayInbox);\n      }\n\n      function displayInbox() {\n        var request = gapi.client.gmail.users.messages.list({\n          'userId': 'me',\n          'labelIds': 'INBOX',\n          'maxResults': 10\n        });\n        request.execute(function(response) {\n          $.each(response.messages, function() {\n            var messageRequest = gapi.client.gmail.users.messages.get({\n              'userId': 'me',\n              'id': this.id\n            });\n            messageRequest.execute(appendMessageRow);\n          });\n        });\n      }\n\n      function appendMessageRow(message) {\n        $('.table-inbox tbody').append(\n          '&lt;tr&gt;\\\n            &lt;td&gt;'+getHeader(message.payload.headers, 'From')+'&lt;\/td&gt;\\\n            &lt;td&gt;\\\n              &lt;a href=&quot;#message-modal-' + message.id +\n                '&quot; data-toggle=&quot;modal&quot; id=&quot;message-link-' + message.id+'&quot;&gt;' +\n                getHeader(message.payload.headers, 'Subject') +\n              '&lt;\/a&gt;\\\n            &lt;\/td&gt;\\\n            &lt;td&gt;'+getHeader(message.payload.headers, 'Date')+'&lt;\/td&gt;\\\n          &lt;\/tr&gt;'\n        );\n        var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ?\n          getHeader(message.payload.headers, 'Reply-to') :\n          getHeader(message.payload.headers, 'From')).replace(\/\\&quot;\/g, '&quot;');\n\n        var reply_subject = 'Re: '+getHeader(message.payload.headers, 'Subject').replace(\/\\&quot;\/g, '&quot;');\n        $('body').append(\n          '&lt;div class=&quot;modal fade&quot; id=&quot;message-modal-' + message.id +\n              '&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot;&gt;\\\n            &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;\\\n              &lt;div class=&quot;modal-content&quot;&gt;\\\n                &lt;div class=&quot;modal-header&quot;&gt;\\\n                  &lt;button type=&quot;button&quot;\\\n                          class=&quot;close&quot;\\\n                          data-dismiss=&quot;modal&quot;\\\n                          aria-label=&quot;Close&quot;&gt;\\\n                    &lt;span aria-hidden=&quot;true&quot;&gt;\u00d7&lt;\/span&gt;&lt;\/button&gt;\\\n                  &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;' +\n                    getHeader(message.payload.headers, 'Subject') +\n                  '&lt;\/h4&gt;\\\n                &lt;\/div&gt;\\\n                &lt;div class=&quot;modal-body&quot;&gt;\\\n                  &lt;iframe id=&quot;message-iframe-'+message.id+'&quot; srcdoc=&quot;&lt;p&gt;Loading...&lt;\/p&gt;&quot;&gt;\\\n                  &lt;\/iframe&gt;\\\n                &lt;\/div&gt;\\\n                &lt;div class=&quot;modal-footer&quot;&gt;\\\n                  &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;\/button&gt;\\\n                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary reply-button&quot; data-dismiss=&quot;modal&quot; data-toggle=&quot;modal&quot; data-target=&quot;#reply-modal&quot;\\\n                  onclick=&quot;fillInReply(\\\n                    \\''+reply_to+'\\', \\\n                    \\''+reply_subject+'\\', \\\n                    \\''+getHeader(message.payload.headers, 'Message-ID')+'\\'\\\n                    );&quot;\\\n                  &gt;Reply&lt;\/button&gt;\\\n                &lt;\/div&gt;\\\n              &lt;\/div&gt;\\\n            &lt;\/div&gt;\\\n          &lt;\/div&gt;'\n        );\n        $('#message-link-'+message.id).on('click', function(){\n          var ifrm = $('#message-iframe-'+message.id)[0].contentWindow.document;\n          $('body', ifrm).html(getBody(message.payload));\n        });\n      }\n\n      function sendEmail()\n      {\n        $('#send-button').addClass('disabled');\n\n        sendMessage(\n          {\n            'To': $('#compose-to').val(),\n            'Subject': $('#compose-subject').val()\n          },\n          $('#compose-message').val(),\n          composeTidy\n        );\n\n        return false;\n      }\n\n      function composeTidy()\n      {\n        $('#compose-modal').modal('hide');\n\n        $('#compose-to').val('');\n        $('#compose-subject').val('');\n        $('#compose-message').val('');\n\n        $('#send-button').removeClass('disabled');\n      }\n\n      function sendReply()\n      {\n        $('#reply-button').addClass('disabled');\n\n        sendMessage(\n          {\n            'To': $('#reply-to').val(),\n            'Subject': $('#reply-subject').val(),\n            'In-Reply-To': $('#reply-message-id').val()\n          },\n          $('#reply-message').val(),\n          replyTidy\n        );\n\n        return false;\n      }\n\n      function replyTidy()\n      {\n        $('#reply-modal').modal('hide');\n\n        $('#reply-message').val('');\n\n        $('#reply-button').removeClass('disabled');\n      }\n\n      function fillInReply(to, subject, message_id)\n      {\n        $('#reply-to').val(to);\n        $('#reply-subject').val(subject);\n        $('#reply-message-id').val(message_id);\n      }\n\n      function sendMessage(headers_obj, message, callback)\n      {\n        var email = '';\n\n        for(var header in headers_obj)\n          email += header += &quot;: &quot;+headers_obj[header]+&quot;\\r\\n&quot;;\n\n        email += &quot;\\r\\n&quot; + message;\n\n        var sendRequest = gapi.client.gmail.users.messages.send({\n          'userId': 'me',\n          'resource': {\n            'raw': window.btoa(email).replace(\/\\+\/g, '-').replace(\/\\\/\/g, '_')\n          }\n        });\n\n        return sendRequest.execute(callback);\n      }\n\n      function getHeader(headers, index) {\n        var header = '';\n        $.each(headers, function(){\n          if(this.name.toLowerCase() === index.toLowerCase()){\n            header = this.value;\n          }\n        });\n        return header;\n      }\n\n      function getBody(message) {\n        var encodedBody = '';\n        if(typeof message.parts === 'undefined')\n        {\n          encodedBody = message.body.data;\n        }\n        else\n        {\n          encodedBody = getHTMLPart(message.parts);\n        }\n        encodedBody = encodedBody.replace(\/-\/g, '+').replace(\/_\/g, '\/').replace(\/\\s\/g, '');\n        return decodeURIComponent(escape(window.atob(encodedBody)));\n      }\n\n      function getHTMLPart(arr) {\n        for(var x = 0; x &lt;= arr.length; x++)\n        {\n          if(typeof arr[x].parts === 'undefined')\n          {\n            if(arr[x].mimeType === 'text\/html')\n            {\n              return arr[x].body.data;\n            }\n          }\n          else\n          {\n            return getHTMLPart(arr[x].parts);\n          }\n        }\n        return '';\n      }\n    &lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/apis.google.com\/js\/client.js?onload=handleClientLoad&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of Gmail API JavaScript example below. Project Screenshots Here are some screenshots of Gmail API JavaScript example app that we will be creating today. Gmail API JavaScript Example index.html &#8230; <a title=\"Send Email &#038; View Inbox Messages Using JavaScript Gmail API\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/\" aria-label=\"Read more about Send Email &#038; View Inbox Messages Using JavaScript Gmail API\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Send Email &amp; View Inbox Messages Using JavaScript Gmail API<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Send Email &amp; View Inbox Messages Using JavaScript Gmail API\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T18:57:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-06T18:57:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Send Email & View Inbox Messages Using JavaScript Gmail API","description":"In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/","og_locale":"en_US","og_type":"article","og_title":"Send Email & View Inbox Messages Using JavaScript Gmail API","og_description":"In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of","og_url":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-06T18:57:20+00:00","article_modified_time":"2022-10-06T18:57:22+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Send Email &#038; View Inbox Messages Using JavaScript Gmail API","datePublished":"2022-10-06T18:57:20+00:00","dateModified":"2022-10-06T18:57:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/"},"wordCount":124,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/","url":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/","name":"Send Email & View Inbox Messages Using JavaScript Gmail API","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg","datePublished":"2022-10-06T18:57:20+00:00","dateModified":"2022-10-06T18:57:22+00:00","description":"In this tutorial, you will learn how to send an email and view inbox messages using JavaScript Gmail API. I have provided the complete source code of","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/gmail_api_javascript_example_project.jpg","width":880,"height":495,"caption":"Gmail API JavaScript Example Project"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/send-email-view-inbox-messages-using-javascript-gmail-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Send Email &#038; View Inbox Messages Using JavaScript Gmail API"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3565"}],"version-history":[{"count":3,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3565\/revisions"}],"predecessor-version":[{"id":3572,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3565\/revisions\/3572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3573"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}