[{"data":1,"prerenderedAt":561},["ShallowReactive",2],{"bootstrap":3,"blog-how-to-send-emails-with-commerce-layer-webhooks-zapier-and-sendgrid":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","payment-api-redesigned","Introducing our new Payments API. For humans and agents.","\u003Cp>Introducing our new Payments API. For humans and agents.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":300,"featured":11,"seoMetaTags":301,"layout":365,"blogPostCarousel":459,"_seoMetaTags":522,"authors":556},{"text":279,"isExternal":11,"url":280,"link":281},"How to send emails with Commerce Layer webhooks, Zapier, and SendGrid.","",{"_modelApiKey":212,"slug":282},"how-to-send-emails-with-commerce-layer-webhooks-zapier-and-sendgrid","August 4, 2022",{"name":285,"picture":286},"Bolaji Ayodeji",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1643036479-bolaji.jpg","Bolaji Ayodeji — Developer Advocate at Commerce Layer",1280,"jpg",{"x":292,"y":292},0.5,{},[],"paper-plane-tilt","You can use our webhooks technology to send order confirmation emails to your customers when they make a new purchase. At the end of this tutorial, you will understand how to use Zapier and SendGrid to send plain order confirmation emails.",{"color":298,"name":299},"gray","Tutorials","portrait",[302,306,310,313,317,320,323,327,331,335,338,342,346,350,354,357,361],{"attributes":303,"tag":304,"content":305},null,"title","Send Order Emails with Commerce Layer Webhooks and SendGrid",{"attributes":307,"tag":309,"content":303},{"property":308,"content":305},"og:title","meta",{"attributes":311,"tag":309,"content":303},{"name":312,"content":305},"twitter:title",{"attributes":314,"tag":309,"content":303},{"name":315,"content":316},"description","This tutorial will teach you how to use Commerce Layer Webhooks, Zapier, and SendGrid to send plain order confirmation emails.",{"attributes":318,"tag":309,"content":303},{"property":319,"content":316},"og:description",{"attributes":321,"tag":309,"content":303},{"name":322,"content":316},"twitter:description",{"attributes":324,"tag":309,"content":303},{"property":325,"content":326},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1660814763-send-emails-webhooks-zapier-sendgrid.jpg?auto=format&fit=max&w=1200",{"attributes":328,"tag":309,"content":303},{"property":329,"content":330},"og:image:width","1200",{"attributes":332,"tag":309,"content":303},{"property":333,"content":334},"og:image:height","630",{"attributes":336,"tag":309,"content":303},{"name":337,"content":326},"twitter:image",{"attributes":339,"tag":309,"content":303},{"property":340,"content":341},"og:locale","en",{"attributes":343,"tag":309,"content":303},{"property":344,"content":345},"og:type","article",{"attributes":347,"tag":309,"content":303},{"property":348,"content":349},"og:site_name","Commerce Layer",{"attributes":351,"tag":309,"content":303},{"property":352,"content":353},"article:modified_time","2025-10-08T16:26:07Z",{"attributes":355,"tag":309,"content":303},{"property":356,"content":280},"article:publisher",{"attributes":358,"tag":309,"content":303},{"name":359,"content":360},"twitter:card","summary_large_image",{"attributes":362,"tag":309,"content":303},{"name":363,"content":364},"twitter:site","@commercelayer",[366,372,383,391,394,402,405,413,416,424,427,435,438,446,449,456],{"_modelApiKey":367,"copy":368,"listStyle":369,"darkTheme":11,"buttons":370,"color":371,"indent":7},"wysiwyg","\u003Cp>In the \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fa-comprehensive-guide-to-commerce-layer-webhooks\" target=\"_blank\" rel=\"noopener noreferrer\">first article of our Webhooks series\u003C\u002Fa>, we introduced the concept of webhooks in detail and how you can transmit data from Commerce Layer to external services in real-time. We concluded the article by showing you how to transmit some data to your customers as an SMS notification when a subscribed SKU item is back in stock and the \u003Ccode>in_stock_subscriptions\u003C\u002Fcode> event is triggered. As promised, in this tutorial, we will show you how to use our webhooks technology to send order confirmation emails to your customers when they make a new purchase (when the \u003Ccode>placed\u003C\u002Fcode> order event is triggered in your organization's market).\u003C\u002Fp>\n\n\u003Cp>At the end of this tutorial, you will understand how to use Zapier and Sendgrid to send a plain email, as seen in the screenshot below:\u003C\u002Fp>\n","directional",[],"red",{"_modelApiKey":373,"border":7,"caption":280,"image":374,"size":382,"darkTheme":11,"rounded":7,"color":371},"image_block",{"url":375,"alt":376,"title":376,"width":377,"height":378,"format":379,"focalPoint":380,"customData":381},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659382571-cl-test-order.png","Test order email",751,883,"png",{"x":292,"y":292},{},"standard",{"_modelApiKey":384,"title":385,"preTitle":386,"linkText":387,"darkTheme":11,"link":388},"link_block","A comprehensive guide to Commerce Layer webhooks.","Previous article","Read",{"isExternal":11,"link":389},{"_modelApiKey":212,"slug":390},"a-comprehensive-guide-to-commerce-layer-webhooks",{"_modelApiKey":367,"copy":392,"listStyle":369,"darkTheme":11,"buttons":393,"color":371,"indent":11},"\u003Chr>\n\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>A general understanding of how APIs and the command-line work.\u003C\u002Fli>\n\u003Cli>You have read the \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fa-comprehensive-guide-to-commerce-layer-webhooks\" target=\"_blank\" rel=\"noopener noreferrer\">first part\u003C\u002Fa> of the Webhook series.\u003C\u002Fli>\n\u003Cli>You should have a \u003Ca href=\"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up\" target=\"_blank\" rel=\"noopener noreferrer\">Commerce Layer account\u003C\u002Fa>, have set up your organization, and created the required commerce data resources for your market. You can follow the \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fonboarding-tutorial\" target=\"_blank\" rel=\"noopener noreferrer\">onboarding tutorial\u003C\u002Fa> or \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fmanual-configuration\" target=\"_blank\" rel=\"noopener noreferrer\">manual configuration\u003C\u002Fa> guide to achieve this.\u003C\u002Fli>\n\u003Cli>Create an integration application and save your credentials (Client ID, Client secret, and Base endpoint) by following \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fmanual-configuration#create-an-application\" target=\"_blank\" rel=\"noopener noreferrer\">this guide\u003C\u002Fa> in our documentation.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n\n\u003Ch3>Getting started with SendGrid\u003C\u002Fh3>\n\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fsendgrid.com\" target=\"_blank\" rel=\"noopener noreferrer\">Twilio Sendgrid\u003C\u002Fa> is a service that provides you with an Email API you can use to send emails to customers. To get started, follow the steps below to create a Sendgrid account:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Create a \u003Ca href=\"https:\u002F\u002Fapp.sendgrid.com\" target=\"_blank\" rel=\"noopener noreferrer\">Sendgrid account\u003C\u002Fa> if you don't have one already.\u003C\u002Fli>\n\u003Cli>Verify your account and set up 2FA.\u003C\u002Fli>\n\u003Cli>Finally, create a Single Sender identity account (PS: this is for testing purposes; for production use, it's recommended to use the Domain Authentication identity).\u003C\u002Fli>\n\u003Cli>That's all :)\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":395,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":396,"alt":397,"title":397,"width":398,"height":399,"format":379,"focalPoint":400,"customData":401},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659382294-sendgrid-dashboard.png","Sendgrid dashboard",1161,820,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":403,"listStyle":369,"darkTheme":11,"buttons":404,"color":371,"indent":11},"\u003Ch3>Getting started with Zapier\u003C\u002Fh3>\n\n\u003Cp>Now, let's show you how you can complete the integration with our webhooks and Sendgrid. To achieve this, we will utilize our private \u003Ca href=\"https:\u002F\u002Fzapier.com\u002Fdeveloper\u002Fpublic-invite\u002F1418\u002F4068b989bdb97d852a4e199b1d1adf46\" target=\"_blank\" rel=\"noopener noreferrer\">Zapier app\u003C\u002Fa> (which we will make public in the future) that will allow you to easily integrate 3000+ third-party services with Commerce Layer and build any automation workflow in minutes. So, kindly follow the steps below to get started:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fzapier.com\u002Fsign-up\" target=\"_blank\" rel=\"noopener noreferrer\">Create a Zapier account\u003C\u002Fa> if you don't have one yet.\u003C\u002Fli>\n\u003Cli>Use \u003Ca href=\"https:\u002F\u002Fzapier.com\u002Fdeveloper\u002Fpublic-invite\u002F1418\u002F4068b989bdb97d852a4e199b1d1adf46\" target=\"_blank\" rel=\"noopener noreferrer\">this invite link\u003C\u002Fa> to install our private Commerce Layer Zapier app.\u003C\u002Fli>\n\u003Cli>We will now \u003Ca href=\"https:\u002F\u002Fzapier.com\u002Fhelp\u002Fcreate\u002Fbasics\u002Fcreate-zaps\" target=\"_blank\" rel=\"noopener noreferrer\">create a Zap\u003C\u002Fa>, an automated workflow that connects apps and services (like Commerce Layer and Sendgrid in our case).\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":406,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":407,"alt":408,"title":408,"width":409,"height":410,"format":379,"focalPoint":411,"customData":412},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659448968-cl-zapier.png","Commerce Layer Zapier App",1156,784,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":414,"listStyle":369,"darkTheme":11,"buttons":415,"color":371,"indent":11},"\u003Cp>A zap consists of a trigger step and one or more action steps. When you turn your Zap on, it will run the action steps every time the trigger event occurs, which is basically what we want to do (this is similar to how the local server we built in the \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fa-comprehensive-guide-to-commerce-layer-webhooks\" target=\"_blank\" rel=\"noopener noreferrer\">previous article\u003C\u002Fa> worked). The Commerce Layer webhook will be the trigger event, and the corresponding action is to send some data to Sendgrid, which in turn delivers that data to a customer via email. Let's cover setting up the trigger event first, in the section below.\u003C\u002Fp>\n\n\u003Ch4>\u003Cstrong>Trigger Event\u003C\u002Fstrong>\u003C\u002Fh4>\n\n\u003Col>\n\u003Cli>Search for “Commerce Layer” and select the app in the \u003Cem>App Event\u003C\u002Fem> field. Then select the latest version (which is \u003Ccode>1.1.2\u003C\u002Fcode> at the point of writing this tutorial).\u003C\u002Fli>\n\u003Cli>Select a \u003Ccode>New Order Event\u003C\u002Fcode> trigger event (you can explore the available options later and choose as you desire).\u003C\u002Fli>\n\u003Cli>Click the button to sign in to your Commerce Layer account.\u003C\u002Fli>\n\u003Cli>Enter your organization hostname, Client ID, and Client Secret. You should have this already from the prerequisite step where you created an integration application earlier.\u003C\u002Fli>\n\u003Cli>Click “Yes continue,” and you should be authorized if you entered valid credentials.\u003C\u002Fli>\n\u003Cli>Click continue and select the \u003Ccode>place\u003C\u002Fcode> order event. You can choose another option based on the type of trigger you want. But since we want to send a notification when an order is placed successfully (which would have a placed status), then \u003Ccode>place\u003C\u002Fcode> event works for us. You can learn more about the anatomy of an order in our \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fdocs\u002Fdata-model\u002Fanatomy-of-an-order\" target=\"_blank\" rel=\"noopener noreferrer\">data model\u003C\u002Fa> documentation.\u003C\u002Fli>\n\u003Cli>If you want, you can include extra resources and attributes to be returned by the webhook that are not returned by default. The following resources are included by default: \u003Ccode>customer, line_items, shipping_address, billing_address, shipments.shipping_method, payment_method, payment_source, market\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Click “Continue” and the test trigger button, and the app will find a recent order in your Commerce Layer organization to confirm that the correct account is connected and your trigger is set up correctly. This will return the last order we created.\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":417,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":418,"alt":419,"title":419,"width":420,"height":421,"format":379,"focalPoint":422,"customData":423},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659451158-zapier-test-trigger.png","Zapier test trigger",1162,867,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":425,"listStyle":369,"darkTheme":11,"buttons":426,"color":371,"indent":11},"\u003Ch4>Action (Zapier formatter)\u003C\u002Fh4>\n\n\u003Cp>If you observed from the screenshot above, you would see that the dates returned are in raw ISO format. Therefore, before sending the payload data to Sendgrid, we will use Zapier formatted as the first action to format the date to something more readable. Kindly follow the steps below to set the action up:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Search for “Formatter by Zapier” and select the app in the \u003Cem>App Event\u003C\u002Fem> field.\u003C\u002Fli>\n\u003Cli>Select the \u003Ccode>Date\u002FTime\u003C\u002Fcode> action event.\u003C\u002Fli>\n\u003Cli>Click the “Continue” button.\u003C\u002Fli>\n\u003Cli>In the \u003Cem>Transform\u003C\u002Fem> field, select “Format”.\u003C\u002Fli>\n\u003Cli>Click the “Continue” button.\u003C\u002Fli>\n\u003Cli>In the \u003Cem>Values>Input\u003C\u002Fem> field, search for “Placed At” and select it.\u003C\u002Fli>\n\u003Cli>In the \u003Cem>To Format\u003C\u002Fem> field, select \u003Cstrong>\u003Ccode>MMMM DD YYYY HH:mm:ss (January 22 2006 23:04:05)\u003C\u002Fcode>.\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>In the \u003Cem>To Timezone\u003C\u002Fem> and \u003Cem>From Timezone\u003C\u002Fem> fields, select any timezone of your choosing or use the default UTC.\u003C\u002Fli>\n\u003Cli>Click the “Continue” button and text the action.\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":428,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":429,"alt":430,"title":430,"width":431,"height":432,"format":379,"focalPoint":433,"customData":434},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659451431-cl-zapier-test.png","Commerce Layer zapier test action",1160,857,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":436,"listStyle":369,"darkTheme":11,"buttons":437,"color":371,"indent":11},"\u003Ch4>Action (SendGrid)\u003C\u002Fh4>\n\n\u003Cp>Now the fun part 🙃. Let's send an email to the customer who placed the order with details of their order by creating another action. In this action, we can add variables to the email content, which will dynamically add data from the webhook payload coming from Commerce Layer. Kindly follow the steps below to set the action up:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Search for “Sendgrid” and select the app in the \u003Cem>App Event\u003C\u002Fem> field.\u003C\u002Fli>\n\u003Cli>Select the \u003Ccode>Send Email\u003C\u002Fcode> action event.\u003C\u002Fli>\n\u003Cli>Create a SendGrid API key with Full access “Main Send” permission by navigating to the SendGrid dashboard and opening Settings > \u003Ca href=\"https:\u002F\u002Fapp.sendgrid.com\u002Fsettings\u002Fapi_keys\" target=\"_blank\" rel=\"noopener noreferrer\">API Keys\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Click “Continue” and sign in to Sendgrid using the created Mail API Key.\u003C\u002Fli>\n\u003Cli>Click “Yes continue” and you should be authorized if you entered a valid credential.\u003C\u002Fli>\n\u003Cli>Click “Continue” and begin filling in information about the email.\u003C\u002Fli>\n\u003Cli>Kindly fill in the fields shown to configure your email:\n\n\u003Cul>\n\u003Cli>\u003Cstrong>To:\u003C\u002Fstrong> this should be the customer email and can be fetched by searching “Customer Email”.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>From:\u003C\u002Fstrong> this is the verified email address of the sender associated with your SendGrid account.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>From Name:\u003C\u002Fstrong> this is the name added to the “From email field” and should represent your store name. You can do something like: “Headless Swag Store (Market Name)”–passing the market as a variable from Commerce Layer.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Reply To:\u003C\u002Fstrong> this is the email address added to the ‘Reply-To field” of the email message.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Subject:\u003C\u002Fstrong> this is the subject of the email.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Text:\u003C\u002Fstrong> this is a plain-text body of the email message. This or the HTML version is required but we will use the HTML version for this demo.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>HTML:\u003C\u002Fstrong> this is the body of the email message that can include HTML tags.\u003C\u002Fli>\n\u003C\u002Ful>\u003C\u002Fli>\n\u003Cli>In the \u003Cem>HTML\u003C\u002Fem> field, enter some text and fetch some variables from Commerce Layer and the formatted date as seen in the screenshot below:\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":439,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":440,"alt":441,"title":441,"width":442,"height":443,"format":379,"focalPoint":444,"customData":445},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659452276-zapier-action-html.png","Zapier action html",1604,1304,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":447,"listStyle":369,"darkTheme":11,"buttons":448,"color":371,"indent":11},"\u003Cp>And that's all! You can now test the action or turn the zap on. As discussed earlier, turning the zap on will make the entire automation run when the trigger occurs. You should also know that your test email might be delivered to the Spam folder. To avoid this, you need to \u003Ca href=\"https:\u002F\u002Fdocs.sendgrid.com\u002Fui\u002Faccount-and-settings\u002Fhow-to-set-up-domain-authentication\" target=\"_blank\" rel=\"noopener noreferrer\">authenticate your SendGrid sender identity\u003C\u002Fa>, as mentioned earlier.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":280,"image":450,"size":382,"darkTheme":11,"rounded":7,"color":371},{"url":451,"alt":376,"title":376,"width":452,"height":453,"format":379,"focalPoint":454,"customData":455},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1659452624-test-order.png",760,905,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":457,"listStyle":369,"darkTheme":11,"buttons":458,"color":371,"indent":11},"\u003Ch3>Conclusion\u003C\u002Fh3>\n\n\u003Cp>We hope you have learned more ways to utilize our webhooks feature! If you observed in your test email (if you sent this to yourself), the image was too large (we tweaked the screenshot above using inspect element 🙈), and the email doesn't look beautiful like other promotional emails you receive. If you were sending the email directly from SendGrid, you could easily use a styled template, but since we're working with a webhook, that can't work. To solve this, you need to write a lambda function to intercept the payload data and apply a template before sending the email using SendGrid API. In the next part of the Webhook series, we will show you how to achieve this. Can't wait for this one, right? Then \u003Ca href=\"https:\u002F\u002Fslack.commercelayer.app\" target=\"_blank\" rel=\"noopener noreferrer\">join our Slack community\u003C\u002Fa> if you haven’t yet to get notified when we publish :).\u003C\u002Fp>\n",[],{"displayTitle":460,"cta":303,"ctaText":280,"cards":461},"Your next read",[462,475,493,507],{"_modelApiKey":212,"link":463,"subtitle":465,"date":465,"author":466,"additionalAuthors":470,"icon":471,"abstract":472,"tag":473,"displayTitle":385,"cardRatio":300,"featured":474},{"text":385,"isExternal":11,"url":280,"link":464},{"_modelApiKey":212,"slug":390},"June 9, 2022",{"name":285,"picture":467},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":468,"customData":469},{"x":292,"y":292},{},[],"webhooks-logo","We provides a list of specific events you can monitor and transmit real-time data from using webhooks. In this article, we will introduce our webhooks mechanism and guide you through a couple of simple demo examples so that you can see it in action.",{"color":298,"name":299},0,{"_modelApiKey":212,"link":476,"subtitle":480,"date":480,"author":481,"additionalAuthors":488,"icon":489,"abstract":490,"tag":491,"displayTitle":477,"cardRatio":11,"featured":492},{"text":477,"isExternal":11,"url":280,"link":478},"How to build an external promotion using lambda functions.",{"_modelApiKey":212,"slug":479},"how-to-build-an-external-promotion-using-lambda-functions","July 15, 2022",{"name":482,"picture":483},"Fabrizio Picca",{"url":484,"alt":485,"title":485,"width":289,"height":289,"format":379,"focalPoint":486,"customData":487},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614875259-commercelayeravatarsquare113f26.png","Fabrizio Picca —      Partnerships Manager at Commerce Layer",{"x":292,"y":292},{},[],"gift","This tutorial will give you a little taste of how powerful Commerce Layer external promotions feature is, by showing an example where we use an AWS Lambda function to trigger a special discount on a customer's birthday.",{"color":298,"name":299},1,{"_modelApiKey":212,"link":494,"subtitle":498,"date":498,"author":499,"additionalAuthors":503,"icon":504,"abstract":505,"tag":506,"displayTitle":495,"cardRatio":11,"featured":38},{"text":495,"isExternal":11,"url":280,"link":496},"Getting started with Commerce Layer JavaScript SDK.",{"_modelApiKey":212,"slug":497},"getting-started-with-commerce-layer-javascript-sdk","April 14, 2022",{"name":285,"picture":500},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":501,"customData":502},{"x":292,"y":292},{},[],"code-block","Commerce Layer provides a JavaScript SDK that makes it quick and easy for developers to interact with our commerce APIs. In this article, we’ll look at some fundamental technical details about how it works.",{"color":298,"name":299},{"_modelApiKey":212,"link":508,"subtitle":512,"date":512,"author":513,"additionalAuthors":517,"icon":518,"abstract":519,"tag":520,"displayTitle":509,"cardRatio":11,"featured":521},{"text":509,"isExternal":11,"url":280,"link":510},"How to build an international ecommerce website with Sanity and Commerce Layer.",{"_modelApiKey":212,"slug":511},"how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer","April 6, 2022",{"name":285,"picture":514},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":515,"customData":516},{"x":292,"y":292},{},[],"shapes","Learn how to integrate Sanity with Commerce Layer by looking at how we built our starter template using Sanity Studio, Next.js, and our React components library.",{"color":298,"name":299},3,[523,524,526,528,530,532,534,536,538,540,542,544,546,548,550,552,554],{"attributes":303,"tag":304,"content":305},{"attributes":525,"tag":309,"content":303},{"property":308,"content":305},{"attributes":527,"tag":309,"content":303},{"name":312,"content":305},{"attributes":529,"tag":309,"content":303},{"name":315,"content":316},{"attributes":531,"tag":309,"content":303},{"property":319,"content":316},{"attributes":533,"tag":309,"content":303},{"name":322,"content":316},{"attributes":535,"tag":309,"content":303},{"property":325,"content":326},{"attributes":537,"tag":309,"content":303},{"property":329,"content":330},{"attributes":539,"tag":309,"content":303},{"property":333,"content":334},{"attributes":541,"tag":309,"content":303},{"name":337,"content":326},{"attributes":543,"tag":309,"content":303},{"property":340,"content":341},{"attributes":545,"tag":309,"content":303},{"property":344,"content":345},{"attributes":547,"tag":309,"content":303},{"property":348,"content":349},{"attributes":549,"tag":309,"content":303},{"property":352,"content":353},{"attributes":551,"tag":309,"content":303},{"property":356,"content":280},{"attributes":553,"tag":309,"content":303},{"name":359,"content":360},{"attributes":555,"tag":309,"content":303},{"name":363,"content":364},[557],{"name":285,"picture":558},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":559,"customData":560},{"x":292,"y":292},{},1790593729674]