{"id":104121,"date":"2017-12-11T18:22:36","date_gmt":"2017-12-11T18:22:36","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=104121"},"modified":"2023-05-12T07:46:13","modified_gmt":"2023-05-12T07:46:13","slug":"integrate-autocomplete-google-address-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/","title":{"rendered":"How to Integrate AutoComplete Google Address In Magento 2"},"content":{"rendered":"

Generally people find\u00a0annoying to fill the web forms, while filling manually all the details may be error-prone and may lead to the error in validation. So here is the example by which we can reduce the manually filling of addresses by using the Google autocomplete API.
\nBenefits of Magento 2 Google Address AutoComplete<\/a> :
\n1. Reduces Validation Issues.
\n2. Enable Quick filling of the fields.
\n3. Ensures Accuracy and many more.<\/p>\n

Now here are the steps to Integrate the API \u00a0In Magento 2:
\nStep 1 : Create a basic structure of Magento 2 module ,
\nplease check this link for the reference : https:\/\/webkul.com\/blog\/create-hello-module-in-magento2\/<\/p>\n

Steps 2 : I want to add the address field in registration page , We need to create the layout handle<\/a> first in this path : app\/code\/<vendor_name>\/<module_name>\/view\/frontend\/layout\/customer_account_create.xml<\/p>\n

<?xml version=\"1.0\"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_Autofill\n * @author    Webkul\n * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block class=\"<vendor_name>\\<module_name>\\Block\\Autofillform\" name=\"autofill_form_register\" template=\"autofill.phtml\" ><\/block>\n        <\/referenceContainer>\n    <\/body>\n<\/page>\n<\/pre>\n
Step 3 : Create .phtml file in this path : app\/code\/<vendor_name>\/<module_name>\/view\/templates\/autofill.phtml<\/p>\n
<div class=\"formcontainer\">\n   <div class=\"field\" id=\"wk-store-address-box\">\n     <label for=\"wk-storeaddress\" class=\"label\"> <span>Store Address <\/span> <\/label>\n       <div class=\"input-box\">\n           <input type=\"text\" name=\"store_address\" class=\"input-text\" id=\"autocomplete\" placeholder=\"Enter Store Address here.\" title=\"Enter Store Address here.\" autocomplete=\"off\">\n       <\/div>\n   <\/div>\n   <input type=\"hidden\" name=\"street_number\" class=\"input-text\" id=\"street_number\"  autocomplete=\"off\">\n       \n   <input type=\"hidden\" name=\"street_name\" class=\"input-text\" id=\"street_name\"  autocomplete=\"off\">\n         \n   <input type=\"hidden\" name=\"locality\" class=\"input-text\" id=\"locality\"  autocomplete=\"off\">\n          \n   <input type=\"hidden\" name=\"administrative_area_level_1\" class=\"input-text\" id=\"administrative_area_level_1\"  autocomplete=\"off\">\n          \n   <input type=\"hidden\" name=\"postal_code\" class=\"input-text\" id=\"postal_code\" title=\"Enter Store Address here.\" autocomplete=\"off\">\n            \n<\/div>\n<script>\nrequire.config({\n    map: {\n        '*': {\n            'googleMapPlaceLibrary': 'https:\/\/maps.googleapis.com\/maps\/api\/js?key=<?php echo $block->getGoogleApiKey()?>&v=3.exp&libraries=places'\n        }\n    }\n });\n <\/script>\n<script type=\"text\/x-magento-init\">\n    {\n        \"*\": {\n            \"autofill\": {}\n        }\n    }\n<\/script><\/pre>\n
Step 4 : Create the block From where I have retrieved the Google API Key .
\napp\/code\/<vendor_name>\/<module_name>\/Block\/Autofill.php<\/p>\n
<?php\n \/**\n  * @category  Webkul\n  * @package   Webkul_Autofill\n  * @author    Webkul\n  * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https:\/\/webkul.com)\n  * @license   https:\/\/store.webkul.com\/license.html\n  *\/\nnamespace Webkul\\Autofill\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template\\Context;\n\nclass Autofillform extends \\Magento\\Framework\\View\\Element\\Template\n{\n    const API_KEY= 'autofill\/general_settings\/google_api_key';\n    \/**\n     * @var ScopeConfig\n     *\/ \n    public $_scopeConfig;\n\n    \/**\n     * @param Context $context,\n     * @param array   $data = []\n     *\/\n    public function __construct(\n        Context $context,\n        array $data = []\n    ) {\n        $this->_scopeConfig = $context->getScopeConfig();\n        parent::__construct($context, $data);\n    }\n\n    \/**\n     * Return ajax url for button.\n     *\n     * @return string\n     *\/\n    public function getGoogleApiKey()\n    {\n        return trim($this->_scopeConfig->getValue(self::API_KEY));\n    }\n\n}\n<\/pre>\n
Step 5 : create requirejs-config.js file in the following path : app\/code\/<vendor_name>\/<module_name>\/view\/frontend\/requirejs-config.js<\/p>\n
<!--\n\/**\n * @category  Webkul\n * @package   Webkul_Autofill\n * @author    Webkul\n * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n -->\n\nvar config = {\n    map: {\n        '*': {\n            autofill : 'Webkul_Autofill\/js\/autofill'\n        }\n    }\n};\n<\/pre>\n
Step 6: Create the js file to Integration the Google address autofill API.<\/p>\n
You can modify the file as per your convenience.<\/p>\n
app\/code\/<vendor_name>\/<module_name>\/view\/frontend\/web\/js\/autofill.js<\/p>\n
\/**\n * Webkul autofill address form script\n * @category  Webkul\n * @package   Webkul_Autofill\n * @author    Webkul\n * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\ndefine(\n    [\n    \"jquery\",\n    \"mage\/translate\",\n    \"Magento_Ui\/js\/modal\/modal\",\n    \"googleMapPlaceLibrary\"\n    ],\n    function ($, $t, modal) {\n    \"use strict\";\n      $.widget(\n          'autofill.register',\n          {\n            _create: function () {\n                var placeSearch, autocomplete;\n                var componentForm = {\n                  street_number: 'street_number',\n                  route: 'street_name',\n                  locality: 'city',\n                  administrative_area_level_1: 'state',\n                  country: 'country',\n                  postal_code: 'postal_code'\n                };\n                $('#form-validate .fieldset.create.info').append($('.formcontainer'));\n                initAutocomplete();\n\n                function fillInAddress()\n                        {\n                \/\/ Get the place details from the autocomplete object.\n                    var place = autocomplete.getPlace();\n                    \/\/ Get each component of the address from the place details\n                    \/\/ and fill the corresponding field on the form.\n                    for (const component of place.address_components) {\n                        const componentType = component.types[0];\n                        switch (componentType) {\n                            case \"street_number\": {\n                                document.getElementById(\"street_number\").value = component.long_name;\n                                break;\n                            }\n                            case \"route\": {\n                                document.getElementById(\"street_name\").value = component.long_name;\n                                break;\n                            }\n                            case \"locality\": {\n                                document.getElementById(\"locality\").value = component.long_name;\n                                break;\n                            }\n                            case \"administrative_area_level_1\": {\n                                document.getElementById(\"administrative_area_level_1\").value = component.long_name;\n                                break;\n                            }\n                            case \"postal_code\": {\n                                document.getElementById(\"postal_code\").value = component.long_name;\n                                break;\n                            }\n                        }\n                    }\n                }\n                function geolocate () {\n                    if (navigator.geolocation) {\n                       navigator.geolocation.getCurrentPosition(function(position) {\n                         var geolocation = {\n                           lat: position.coords.latitude,\n                           lng: position.coords.longitude\n                         };\n                         var circle = new google.maps.Circle({\n                           center: geolocation,\n                           radius: position.coords.accuracy\n                         });\n                         autocomplete.setBounds(circle.getBounds());\n                       });\n                     }\n                }\n                function initAutocomplete () {\n                    autocomplete = new google.maps.places.Autocomplete(\n                        \/** @type {!HTMLInputElement} *\/(document.getElementById('autocomplete')),\n                        {types: ['geocode']});\n\n                    \/\/ When the user selects an address from the dropdown, populate the address\n                    \/\/ fields in the form.\n                    autocomplete.addListener('place_changed', fillInAddress);\n                }\n            }\n\n          }\n        );\n      return $.autofill.register;\n});<\/pre>\n
This is a complete reference to integrate the Google Address API in Magento 2,
\nNote<\/strong> : You can integrate this API and checkout page as well while filling the shipping and address information. \u00a0Here is the google docs link from where you can read more about Google API.
\nhttps:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/places-autocomplete-addressform?hl=fr\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Generally people find\u00a0annoying to fill the web forms, while filling manually all the details may be error-prone and may lead to the error in validation. So here is the example by which we can reduce the manually filling of addresses by using the Google autocomplete API. Benefits of Magento 2 Google Address AutoComplete : 1. […]<\/a><\/p>\n","protected":false},"author":170,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[5864],"class_list":["post-104121","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-autocomplete-address"],"yoast_head":"\nHow to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Generally people find\u00a0annoying to fill the web forms, while filling manually all the details may be error-prone and may lead to the error in validation. So here is the example by which we can reduce the manually filling of addresses by using the Google autocomplete API. Benefits of Magento 2 Google Address AutoComplete : 1. [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-11T18:22:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-12T07:46:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Prabhat Rawat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prabhat Rawat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\"},\"author\":{\"name\":\"Prabhat Rawat\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3d52d6c1ad8a809d2f7548e6a9c3358f\"},\"headline\":\"How to Integrate AutoComplete Google Address In Magento 2\",\"datePublished\":\"2017-12-11T18:22:36+00:00\",\"dateModified\":\"2023-05-12T07:46:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\"},\"wordCount\":309,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"autocomplete address\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\",\"name\":\"How to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2017-12-11T18:22:36+00:00\",\"dateModified\":\"2023-05-12T07:46:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate AutoComplete Google Address In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3d52d6c1ad8a809d2f7548e6a9c3358f\",\"name\":\"Prabhat Rawat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/616ec5deaf63b72b3003cf99e608ae354f4d373cee8d25b2d0bfa65cab270ad8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/616ec5deaf63b72b3003cf99e608ae354f4d373cee8d25b2d0bfa65cab270ad8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Prabhat Rawat\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/prabhat-rawat763\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog","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:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog","og_description":"Generally people find\u00a0annoying to fill the web forms, while filling manually all the details may be error-prone and may lead to the error in validation. So here is the example by which we can reduce the manually filling of addresses by using the Google autocomplete API. Benefits of Magento 2 Google Address AutoComplete : 1. [...]","og_url":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-12-11T18:22:36+00:00","article_modified_time":"2023-05-12T07:46:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Prabhat Rawat","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Prabhat Rawat","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/"},"author":{"name":"Prabhat Rawat","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3d52d6c1ad8a809d2f7548e6a9c3358f"},"headline":"How to Integrate AutoComplete Google Address In Magento 2","datePublished":"2017-12-11T18:22:36+00:00","dateModified":"2023-05-12T07:46:13+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/"},"wordCount":309,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["autocomplete address"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/","url":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/","name":"How to Integrate AutoComplete Google Address In Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2017-12-11T18:22:36+00:00","dateModified":"2023-05-12T07:46:13+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/integrate-autocomplete-google-address-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Integrate AutoComplete Google Address In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3d52d6c1ad8a809d2f7548e6a9c3358f","name":"Prabhat Rawat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/616ec5deaf63b72b3003cf99e608ae354f4d373cee8d25b2d0bfa65cab270ad8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/616ec5deaf63b72b3003cf99e608ae354f4d373cee8d25b2d0bfa65cab270ad8?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Prabhat Rawat"},"url":"https:\/\/webkul.com\/blog\/author\/prabhat-rawat763\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/104121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/170"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=104121"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/104121\/revisions"}],"predecessor-version":[{"id":381167,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/104121\/revisions\/381167"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=104121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=104121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=104121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}