Third Party Integrations Webinar SendGrid | Velo by Wix

Welcome everybody to our second installment in this webinar series for third party integrations and third party for third party services. Today on our second installment we're going to go over how to enhance your marketing with SendGrid. SendGrid is a service that allows you to make transactional emails from your website. But another thing on top of that to highlight is that SendGrid isn't the only service that you can integrate with Corvette by wix. There's plenty of different services across the web when you're using NPM modules or WIX Fetch as well. So if you do have another transactional email service that you're using, the concept is about the same. You just kind of have to follow what's inside the documentation. But we're going to be going over a lot of how the processes of how to connect the third party service to enhance your marketing. Cool. And Meredith just posted the devpost contest that we have going on right now as well in the chat. So definitely check that out. So a little bit about myself if you were here the last webinar, I was in the chat helping out answering any questions that you had about Corvin and integrating with your favorite payment services. So my name is Joshua Alphonse. I'm a full stack developer, also a music producer and I am also a developer advocate for Corvid by Wix here in New York. So you know when things go back to normal I guess and there's some events going on in New York, you'll definitely see me at some meetups and tech events as well. We also have in the chat Meredith Hassett who is our other developer advocate. She did last on Monday's webinar for Stripe and I'll let her introduce herself again.

Hi all. Good to be back. For those of you who weren't here on Tuesday, my name is Meredith Hassett. I'm also developer advocate for Corvid by wix based in the San Francisco Bay Area. I am a fast two talker. If you guys were here on Tuesday, you know that as well. I am a front end developer by trade. I love doing integration. So it was really fun for me to do Stripe on Tuesday and I'll be back with Twilio on Monday which I'm super excited about. So definitely if you're interested in how you can incorporate text messages, come back for that on Monday.

Awesome. Thanks Meredith. So just a reminder again, she'll be in the chat and definitely on the next part of the series of these webinars she'll be there on Monday to go over Twilio as well. So, you know, all these integrations that we have can combine together to enhance all your marketing, enhance, you know, communication with your users and customers that you have on your website that you're building. So it's just a whole all in one suite that we're going to be building with these integrations. So about this series, we did payments with Stripe, now we're going to go over email marketing with SendGroup. So today we're going to cover using the SendGrid npm module. We're going to create backend functions again. So these back end functions are going to help us connect to the NPM module and we'll be able to create a function that will communicate with the SendGrid API as well. We're going to learn a bit about the Secrets Manager and how to securely place your API keys within the dashboard so you don't have to have it inside your code. We're also going to see how to import your back end functions that you created and then put them into your front end so that you can use different UI elements to connect to these functions that you created. We'll also have some time for Q and A at the end as well, but don't forget you can also ask questions in the chat. So we're going back to Funded Labs and Funded Labs is a project that we created and it's sort of like a Kickstarter in a sense. Right. So last webinar we went over how to make these payments or to fund this project and to give a pledge to it. Now we're going to be able to give our pledger an email saying thank you for pledging this amount to this project, thanks for backing it up. And we're going to be able to reach them automatically once they go and populate these text fields using the SendGrid API npm module. So in order to get started, remember when you're using Corvid in the editor, you want to enable Dev mode. Dev Mode gives you all the features that are patched with Corvid, so you can start to add your own custom code, integrated databases and also connect to all your business APIs that are built in and external ones like we're doing today. So like I mentioned, you have the built in ide. Corvid also allows you to make create an API for yourself HTTP functions. There'll be a recording. Yes, there will be a recording. Dynamic pages you can create as well. So you don't have to go and recreate a template for what you're making and then you also have those integrated marketing tools that are built in. So Corvid is our accelerated web development platform that works on top of wix in the editor and it gives you the ability to code JavaScript and also connect it to the UI elements that you're dragging and dropping on the page. So it's enhancing your entire experience when it comes to developing a website with wix, it's serverless and uses Node js, it requires zero setup, it has production grade app, you can create production grade applications and everything is built in. It's an all in one suite. So, you know, previously we had a webinar based on Corvid being our full stack utility belt. So that's the kind of the way I like to think about it. So let's go over SendGrid a little bit. So SendGrid is an API that allows you to send reliable emails to strengthen your communication with your customers and your visitors on your website. So there's plenty of different functionalities that you can use SendGrid with when it comes to your website and it doesn't have to just be for the purpose that we're going to be going over today. Right? So SendGrid allows you to send transactional emails. So if something's happening like what we're doing today with a transactional email saying thank you for making a pledge to this product on our Kickstarter on funded labs, we'll be able to receive that email. You can also use SendGrid to send account creation emails. So you know all those emails you get once you make an account on the website. If you want to send emails after you purchase something, you can also set different triggers with code and purchase and send those emails for the receipt of that item to the user using SendGrid. You'll also be able to send account notification emails as well. So whenever certain things and events are triggered on your page that you code, you'll be able to send emails straight to your users with SendGrid. So there's plenty of different options that you have when you're building these applications with this NPM module and API. So I encourage you to explore all those different options. But today we're going to show you how to get started with a transactional email. So remember, we have the $W API which helps you select and returns elements from the page. So you're going to be we're going to be going inside of our $w onready function here and this side code on the code on the side, and we're going to be selecting a text input field and then we're going to capture the value that we're typing inside that text field as well. And then also giving the button the ability to make sure the transaction goes through when we pay for this pledge. So we went over that a little bit on Monday as well, so we're going to touch base on that again today. So remember, when you're getting and setting values with these UI elements on the page for text inputs, you want to make sure that you give it a variable and then you have it equal to whatever the text input text input box is named. So in this case, let's say the ID is TextInput and then you use the value property and you can set the value to whatever's being typed in the box or to another value that you have written in a string somewhere on your ide. So one of the Wix APIs that we're going to be working with here is the WIX Window API. So this WIX Window API is going to bring up a modal of, of our username, the email that we're using to type in to, you know, send money to this pledge. And then also what we're going to be doing is using the WIX Secrets Backend API as well to store API key. So there's a lot of few other options we're going to go through of all these APIs we're going to use to get our pledge started. So the WIX Window API uses, has another property called Open Lightbox and our page for our Lightbox is named thank you. But we're going to be using the data object so we can send the email that our user is using for this pledge so that it populates onto our modal that pops up when we're using a Lightbox. And just a reminder as well, we have an API reference that's very detailed and it comes with code snippets and examples for you to follow. So it's really intuitive. It's. It has lots of examples that are there that you can go for unuse for each UI element. All of our APIs that are available with Corvid and anytime something is updated, the API reference will be updated. You'll be able to check the website for what other updates are happening with Corvid as well. And if you want to check out the SendGrid API reference, make sure you go and check out on their website. The link is right here. You can also just go on their website and go to email API. So without further ado, let's get started. Let's start building out funded labs to integrate with SendGrid. So let me just go and change our screen here. Cool. All right, so we're back at funded labs now and our funded labs is sort of like a Kickstarter in a way. Right. And what we have here is some bamboo eco friendly products that you can be a conscious consumer and purchase here and actually send a pledge amount so that you can back this project. Cool. So on Monday we went over stripe, we created a backend file and some functions in order to work with the API. And today we're going to do a similar thing with SendGrid as well. So we're going to go here to our fill in your details page, because that's the page we're going to be mainly coding out of today. Right. And it comes already here with some populated fields. So if you remember from Monday, we actually worked through some of these fields here. So we worked on the payment for cards, the month, the year, the CV as well. And these are all using the dot value property I spoke about with the text input box. And we're going to be using this again. But first we're going to start from the back end and we're going to create these functions so that we can get the SendGrid API up and going. All right, so before we start typing any code out, you want to make sure that we install our sendgrid NPM module. So we just go over here to NPM modules and we see the blue cog that's here on the side and we go to install new packages. So you want to make sure that you're checking out the correct NPM package because some of them are deprecated. So the one that's currently official for sendgrid is ensdrind mail. Right. So currently we already have it installed. And if you want to go check out any of the documentation or any information about the NPM module, you just go right here to these three dots and you go to see documentation. And this will bring you straight to NPMS page that they have for this package and you'll see all the documentation that comes along with it, as well as access to the GitHub. Cool. So after we've installed our SendGrid API, we're going to go and create a backend web module here and we're going to name it SendGrid. Cool. So the first thing we want to make sure that we do is import sendgrid into our back end file here. So a good thing about looking at the documentation from SendGrid, you'll see what to import. So in this case, we're going to be importing sgmail, and we're going to say from sendgrid mail, since that's the NPM module that we are accessing here. So we're going to import that right at the top of our code and we're going to make sure that all of our import statements here are at the top of our code. Next, we're going to import the secrets manager backend API. So we're going to import GetSecret from which secrets backend. So what the Secrets Manager allows you to do, it allows you to add an extra layer of security for your API keys that you have. So before the Secrets Manager, you can store these API keys in a variable somewhere in the backend and your users won't be able to access it. But we've also added this extra layer of security that you can have from the Dashboard, just so that you actually just call a variable and it won't be written on the code on your page. So I'll show you what I mean. You go here to Dashboard Settings, Secrets Manager. Great. So now this is where you can go and start to store a secret. I already have some secrets that are already here. So we're going to be using SendGridAPI. So you can just go and paste your API key into the Secrets Manager by clicking Store Secret. It gives you all the fields to populate here, the name, whatever you want to name it. So how you're going to call it in, the code, the value and then description if you'd like. But we're going to go back to our site, Just let it load real quick. Great. So we're back on our site and we're going to start coding out. All right. So also don't forget, if you do have any questions, Meredith is in the chat and she can help you out as well. And we'll have some Q and A at the end. All right, awesome. So now that we've imported the Secrets Manager, we're going to start by creating an exportasync function so that we can send the email. It's going to accept the proper arguments that the documentation from SendGrid told us to put. So we're going to say export async function send email. So that's what we're going to be calling this function, send email. And in the front end when we import send email is what we're going to be importing from our backend. So when we're using SendGrid, we want to make sure that we use the correct arguments that the API is accepting. So when we're sending an email, we like to have the recipient. So we have our recipient. Okay. We also have our subject for the email. Then there's also someone that sends the email. And then lastly we have the body or the text of the email. Cool. Awesome. So now that we have these arguments already set in place, let's start to use our Wix Secrets Manager API right now. So we're going to create a constant here, a variable for the API key. So we say API key equals and and we're going to set this with. Since we have this as async function, we're going to use await. And it's great that we have all these fillers in here inside of our ides to help us out as we're coding as well. And what we're going to use is we're going to use the get secret function here. And what we're going to do is we're going to give it a API key from our Secrets Manager that we just stored. So in this case we have SendGridAPI. So that's the name of the secret that we just stored in our backend. Awesome. So now we're going to use sgmail. Okay. And we're going to say set API API key. All right. And then we're going to give it the API key that we have. So save that argument there. Awesome. Next we're going to create a constant for the message that we are going to be sending. Right. So what we have to do next is say const message. Right. And we can say equals. Let's create that constant and we're going to say to our recipient, okay. From our sender. All right. And we're going to say our subject. Is the subject what's being typed? And then we're going to say, let's say text is going to be the body. Awesome. Cool. So now these are all the arguments that we have that are placed at the top of our code there. And we're going to then now return sgmail and we're going to say send, since this is from our SendGrid npm module API. And then since what we're sending is is inside of this constant here for the message. Right. Say msg. Awesome. Using the SendGrid API and the npm module is pretty straightforward as long as you follow the documentation that they have on their page and it translates really well because at the end of the day it's just JavaScript. When you're using this with Corvid, some things might look different with the $w API, but at the end of the day that's just to select elements and then you give it functionality. Now we're feeding this sgmail send what we have here in the constant. Great. So now let's go and check out our front end. So our front end here we want to make sure that we import send email because remember that's the name of the function we have. So we're going to be importing send email and you're going to say backend sendgrid since it's in our backend folder here. We still have all of our functions from Stripe that's right here underneath here inside of our $w onready function. What we're going to do is actually call the send email function from the back end to our front so that we can collect those values that we're going to be filling out again. I can create another constant here just so that since which is a transactional email that I want to send a message automatically that's already pre, you know, pre written instead of the, you know, the user sending me a message, I can say hey, you know, let's have the subject be thank you for the pledge. So in the email though that's be their subject. The recipient is going to be the recipient right here is going to be to me or to any email. You can also set this to the value of the user. So in this case we have something like user email as well that you could use. And we have the body. So this is what the user will be getting. So let's go over here to our preview mode and let's fill out some information. So let's say my name is Joshua and let's say email is joshalphonsmail.com and my number is let's say 631-491-8435 and our address could be 23 Main Street, New York. So let's say New York, New York. I think it says 1222. That's like, I think that's Albany, New York. We can actually go and paste this here and let's go and put our card information from the last webinar that we had. So we say one. And we're going to give this say then we're going to give the year 20.