Third Party Integrations Webinar Twilio | Velo by Wix

Welcome everyone to our third and final webinar on integrations with Corbett by wix. Today we're going to be building an integration with an external communication service. So we'll be using Twilio to send some text messages today. If you joined us for our previous two webinars, you saw myself integrate a Stripe payment system last week and then you saw my colleague Joshua do an integration with SendGrid. So today we're just going to wrap up that series and show you guys how to incorporate Twilio SMS API into your site. If you haven't been able to join us for this series and this is the first time you're coming in, My name is Meredith Hassett and I am a front end developer by trade. I love doing integrations so this series has been super fun for me showing off Stripe and Twilio and everything you can do with using these integrations with Corvid. I also love tweeting about random things. So if you have any questions about the integrations that we're doing today or any other integrations you would like to see, we've already started collecting a list from previous webinars. So we would love to show you more about what you can do with Corvid and how Corvid can really help you scale up your wix site. So feel free to reach out with any questions you may have about Corvid or what you want to see next with Corvid. And last but not least, I am a developer advocate for Corvid by wix based in the San Francisco Bay area. In the chat I have my colleague Joshua Alphonse helping out. And Joshua, I'll give you a minute to introduce yourself.

Thanks Meredith. Hey everybody, it's Joshua here. So if you came to the last session for this webinar series, I also helped out with walking you through how to integrate with SendGrid, enhancing your marketing that way. So I said again, my name is Josh Wildfons. I'm a full stack developer. Also I'm a big music producer and collector of music as well. So I love code, I love making music, all those things combined together. And also I'm a developer advocate for Corvid by WIX here in New York. So I'll be in the chat answering any questions you have about anything that Meredith is talking about. If you have like a question you want to ask right away, feel free to type it in the chat or raise your hand as well.

Thanks. Thanks Joshua. And we also have Moore who is going to be a silent participant. It is one o' clock in the morning for her in Israel, so we won't make her answer any questions because we're not really sure what the responses will be. I'll try to do my best, Meredith. No pressure. So if you are just joining us for this series or need a little recap because it has been a long weekend, this series we've shown you a bunch of different integrations. We're building a Kickstarter style site where we've incorporated payments using Stripe. We then showed you how to incorporate some email marketing with SendGrid, and today we're going to wrap it up with some text message communications with Twilio. This one is definitely my most favorite because it is the most fun. So while it is a business solution that you can definitely be utilizing because text message marketing is number one form of marketing right now, it is also kind of fun because we get to send text messages to ourselves and I can't wait to show you guys how to do that. We're working on putting together this Kickstarter site, as I mentioned, where we go ahead and back a project, collect some user inputs through some custom fields including their credit card information, and go ahead and process that payment using Stripe and then send an email via SendGrid. And today we're going to finish that out and add that Twilio integration to send a text message as well, similar to how maybe if you've ordered something on Amazon before you get a text message, letting you know when the product has shipped and when it's expected to arrive to your house, we're going to incorporate that style text notification to this application as well. So you can incorporate text message communications for payment processings into your website as well. If you aren't familiar with how to work with Corvid or you haven't seen how to turn dev mode on just yet, just a quick refresher here. If you've worked with the WIX editor before, in that top menu bar you see Dev mode. When you click on Dev mode you get the Corvid dev mode preview pane and you can go ahead and turn on Dev mode. And this is how you enable Corvid on your WIX site. Once that's on, you're able to see the site structure and the ide and this opens a whole new world for you of web development with Wix. And what that is is it is an entirely JavaScript based web development platform. So if you already have been developing with JavaScript and you already know how to use it, you just come into the Corvid platform on top of your wix site and bring all of the skills that you already have. You can consider the learning curve very similar to like if you're working with a new API, just reviewing the docs and figuring out the little nuances of working with that API and how to incorporate it into your site. So we'll show you a little bit about that today, but it's really easy to pick up if you have a JavaScript background. You have that built in IDE that we've been talking about, where your code is written for you right on the page. And then you can also have some nice page maintenance in the back end with having the backend file structure all set up for you already. You have integrated databases, so if you're already doing stuff with wix data, you have a more seamless experience using WIX data now too, because you'll see the databases built right into your editor so you can manipulate the content in the database as well as work with it in the UI and the backend. More simply with the Wix APIs that we expose for you with Corvid, it's all running on top of that Node JS server, so any experience you have building Node js, you can bring it with you again to build out your applications and make them production ready super fast because this is a no setup environment. So we do all of the hosting for you, all of the tunneling for you. All you do is press that button to sign up and then press that button to publish and you have a production application. The tool set powering all of this for you as a quick reminder is that built in Cloud ide, so all of your code is stored in the cloud. So minimal code maintenance for you. Here you've got it running on top of a Node JS server, which means you also bring along your favorite NPM packages, which makes this webinar series even possible. Because we've been showing you how to incorporate these tools using their NPM Helper packages, including today with Twilio, we're going to go ahead and show you how to use that one as well. If your favorite functions or favorite capabilities don't have an NPM package, you can still use them with the REST services that they provide using the HTTP functions and WIX fetch that we provide for you as well. And you can also expose those HTTP functions and enable other developers to be able to access either your code or your data, or some functionality that you've exposed using those custom HTTP functions that you create on your site. We also have a nice robust set of front end APIs that allow you to work with all of the UI elements on your page. We're going to talk a little bit about this more in depth again, real quick just but as a reminder here, these are going to be black box APIs because we don't want you accidentally messing up the render engine of the UI elements because this makes sure by controlling that, we give you a little bit less testing to do so you don't have to worry about browser compatibility and mobile responsiveness and accessibility. By having these black box APIs for the UI elements, you're able to control and access different parameters and add events without accidentally breaking the functionality of the UI elements. You can start connecting to your external databases, get access to advanced marketing tools, and also create dynamic pages. If you're interested in learning about dynamic pages a little bit more, we have done previous webinars on wix Data and how you can use wix data to create the dynamic pages. So I don't want to spend too much time on it here now, but feel free to check out those Webinars on our YouTube channel to learn more about some of these functionalities. A quick review of the $W just in case you forgot so $W is how you access your UI elements on your page and expose certain properties of those elements as well as events too. Previously, without Corvid you can't always attach events to every element on your page, but with Corvid you're able to attach elements to every. Sorry, attach events to every element on your page and make it a lot more dynamic and start sending data across different across different areas. One of the key things that we're going to be using here today, and you've seen in the previous webinars in this series, is the getting and setting of values. Because we're doing a Kickstarter style site, we have users enter input values into a custom form that we create using Corvid and then we need to grab those input values and use them to populate other data points throughout our process. So whether it's the credit card information or the email address from the previous ones, or today's phone number that we need to grab and use to actually send that text message. With Twilio, we also have a nice long list of Wix APIs that are available for you that don't come out of the box. So you do have to import them to work with them, just because the more APIs that you bring along with you and the more data that you carry on your site, the slower your site is. So we don't want to have all this data being lugged around with you if you don't actually need it. So if you want to access any of the Wix APIs that are available via the API reference, you just import them with this standard import notation and then once you've imported them into your site, Wix does have some autocompletion in the Corvid editor. So you're able to start accessing the APIs and find the different properties and methods that they expose that allow you to start working with them, such as the WIX Window API, which enables us to dynamically open lightboxes and we can also attach data to those lightboxes, which we'll explore a little bit more today that Josh teased with us last week. Feel free to always check out the API reference to learn more about what APIs are available from Wix, because we are moving more and more into an open platform and want to expose more APIs to you. So feel free to check out that reference to also see what you can do with the different APIs too. And if there's any new APIs available. Today we will be focusing on our Twilio integration. So I also have the Twilio API reference here. We're going to be focusing on the SMS endpoint, but Twilio does more than just sms. It enables you to do two factor authentication, chatbots, mms, so that mobile or multimedia messaging as well. So if you want to do something beyond just a standard text message, go ahead and check out the Twilio docs and also let us know if you want to hear more about this, because today we're just going to be focusing on text message, but Twilio has many more uses than just that. And with that I want to go ahead and dive right in. So I'm going to switch over to our editor, which hopefully you guys are familiar with now, because you've seen this in a couple of our webinars. So in our editor here, let me make this a little bit bigger. We have our payments page, which you guys are hopefully familiar with. We've filled out our details as well as our payment information. So in a previous webinar we went and grabbed that email input and used it to send an email as well as that credit card information to process the payment with stripe. Today we're going to be focusing on that phone number and sending text messages with that phone number. So the first thing you want to do is actually Grab the phone number input just as a refresher for you guys if you are familiar, not super familiar with how we're going to grab this. So I have a constant set down here for the user phone number. So in this space I'm just going to go ahead and grab the element if I can type, that is oh my goodness, for the phone input. And as you can see, I'm getting some auto completion here. So it's important to make sure you give things descriptive names because when you start working with that auto completion for your UI elements, the less descriptive the name, the harder it is going to be to actually find those UI elements in the autocomplete or remember what you're trying. We're trying to do with like textbox255, so giving it descriptive names via the Properties panel. So if you click on it on an input element, you can see the Properties panel and the id. So giving it that informative name is going to be really helpful for you when you develop. We can also see some of the properties that are available here. So we're interested in the value because that is what the user has entered. So now that we have the value, we are able to collect the user's phone number. With the user's phone number. We have some code already stubbed out for us here where if there is a phone number already set, we want to go ahead and try to send an SMS using the send SMS function, which takes in a user phone number and a user name. This is going to be coming from our backend. So if I go back up to the top to my import statements, I can find the send SMS function coming from the backend Twilio file. So if I go in my site structure to backend Twilio, this is where we're going to find that code for Send sms. So this is what we'll be implementing here today. The first thing that we need to do, if you remember, is go ahead and install that node module. So if I go to my list of node modules, click on this gear icon, install a new package, I'm able to search for a package really quickly here. So today we're looking for Twilio, not stripe. And I go to Twilio, I'm going to go into install. And now my Twilio NPM Helper package is available for me to use. If I want to look at the documentation, I can go ahead to this three dots right here and see the documentation for the Twilio NPM module. This might be helpful a little bit later. So I'm going to keep that open. Now that I have the Twilio NPM module installed, I'm going to go ahead and import it using our standard import method. If I can type to save my life today. And remember, this is going to be case sensitive. And if you're curious about which NPM module you should be importing, the documentation from the third party is going to be the one to tell you what is the most recent and the proper package to be using. The other thing we need to do is authenticate ourselves, which again, we're going to use our Secrets Manager here. So I have my tokens stored here back in my Secret Manager, which is under my WIX Site Settings, production tools and Secrets Manager. So this is going to keep all that information nice and secure so someone doesn't steal my identity when they're pretending to be me from an API call. But to work with the Secrets Manager I am going to need to import that WIX API. And since I can never remember how things are spelled, I'm going to use the autocomplete here and go to Secrets Manager and just import it like that. Now that I have the Secrets Manager imported, I can go ahead and start getting some values that I need for Twilio. So for Twilio, there are three main things that we're going to need here. The first one is going to be a Twilio Auth token. This is our authentication token to say that we are allowed to be sending messages from this account. We have also our Twilio account. So this is our unique account ID for our user that we've created our account for. And then the last one we have is a Twilio phone number. So when you sign up for a Twilio account, you're going to need to set up a phone number associated to that account. And that is how you're going to send messages from your application. You can't just send messages from nowhere, they have to be coming from another phone number. So Twilio enables you to actually purchase or get a free phone number to send messages on behalf of your on behalf of your account. So now that I have these, I'm going to grab the secrets from the back end. And this is an asynchronous function. So for code cleanliness sake, I'm going to follow the Async Await style. And this is Twilio Auth token. You can use promises, but that could mean there's going to be a lot of chaining here as well. So just to keep my code nice and clean, I'm going to I prefer the Async Await. This one is going to be my Twilio sid and then the last one is going to be my Twilio phone number. So again, when we work with the WIX Secrets backend API, it has the get secret function which then we pass in the string of how we've stored it in our Secrets Manager. So if you ever forget what those are, you can just look back at your Secrets Manager and see the different names that you've given. So these are the three secrets that I'm going to be needing to do my Twilio integration. Once I have those ready to go, I'm going to need the Auth token and the SID to access actually initialize my Twilio client. So I'm going to go ahead and start setting that up. This is going to be a new Twilio which takes in again that Twilio Auth token and Twilio account sid. And if you're not sure which order or which parameters to be passing in here, you can again always check the documentation. So if I go back to the Twilio NPM documentation and go back to the sample usage, they'll give me some examples of how to set this up. So actually to initialize a Twilio client, it's account SID and then Auth token. So these are actually backwards, so I just need to quickly swap them and then I'm able to actually have an authenticated client here. Once the client is authenticated, it's ready to go and we can actually start calling the different REST methods against the Twilio client. And again, if you're not sure what they are, you can always check the documentation. So if I go to the documentation, the zoom bar always gets in the way at the very top here I'm able to actually see a link to the Twilio documentation. So if I click on the docs, this will take you to the Twilio API reference docs, which are really great. Twilio is kind of the gold standard when it comes to API documentation. So we are going to look at the REST API and if we just look at an example of how to get started using that Twilio client, we can see one right here automatically on the left side of or, sorry, that's the right side of the screen on the right side of our screen. And so we just use the client method or messages method and the create function on top of that. And it's going to take in A body, a from and a to field. So let's go back to our Twilio client. We're going to go ahead and create a message. And we need our to our from and our body, but I also need to be able to spell. So let's go ahead and do that. So our two is going to be the receiving phone number of this message. So what we're going to be utilizing is the passed in phone number from the front end which is the user entered phone number. So two is going to be the phone from is going to be where we're sending this message from, which is going to be our Twilio account. So we need to use that Twilio created phone number that we've set up and then our body is going to be whatever message we want to send along. I've also passed in the username to this function. So let's go ahead and use that to create a more personal experience. I'm going to template this out and say thank you username for backing Bamboo and you, which is our product. Just say send a little message to make it feel nice and personal and like we're excited to have them as part of our project team. Sweet. So now our message is ready to send. This is going to be asynchronous and I may want the message for debugging purposes. So I'm going to go ahead and collect the response from the Twilio client because it does return what the message it attempted to send is and if it was successful or not, and then just go ahead and return that for any error handling I may want to do with that. We're ready to actually go ahead and try to send our message. So I'm going to go to preview. So I'm going to enter our QA mode in our preview pane. I'm going to go ahead and enter my details. I can't type though, so it's okay. I'm gonna go ahead and provide a phone number for us to take a look at here. My address, My zip code. I'm gonna go ahead and put in my credit card details as well. And I'm going to go ahead and pay. As long as I initialized everything correctly, we should see a text message come through. So if I go over to Google Voice that I have set up up here, you may notice that there is a one here now that wasn't there earlier. And I've got a new text message that says thank you, Meredith, for backing Bamboo and you. We're excited to move forward For a plastic free future. And just to show you that templating and how nicely it works, if I was to change my name to More, for example, I'm going to go ahead and get another text message that's going to say thank you to More because I just changed that name and it is grabbing that field from the ui. Now we might want to do a little bit of error handling here too, just in case the text message isn't sent to let someone know. So I'm going to go ahead and only do error handling for texting instead of all of the components that we've used, just so you guys get a little sampling of what that might look like. So back in our code I'm going to after the send SMS function, if there is an error, we might want to handle it. So in this case we can go ahead and initialize a data object in our submit payment response function. So I'm going to go ahead and say let data and we're just going to create a little JSON object here with things about the user's name which we can grab as one of the input fields that we had the user's phone, oops, the phone number which we can also grab as one of the inputs. And then we're going to also set a status code here. That status code we're going to preset to success. Just so I know kind of what the standards are. This isn't what it should look like in production, but just to give you guys a little sample of what it would look like in our user phone send sms, if we do catch an error, we are going to want to update that data status field to failed and then what we can do is we can pass that data object along to our Lightbox and present the information about the text message success or failure in the Lightbox as well. So now if we go over to our Lightbox, what we want to do is we want to use the WIX Window API to actually grab the context passed in to the Lightbox. It's not open Lightbox and we can use get context and this actually does need to be a variable. So we can actually grab some information from that. One of the things that we passed in is the user's name. So for the username instead of using this default text, we can actually set it to to past details username. And another thing that we can do is we can add a little if statement based off of the status flag and if the status is set to failed so we want past details status is failed Then instead of this message saying look out for updates, we may want to update that value. So I'm going to instead of getting the value like we did in previous pages, now we can go ahead and set the value of the thank you text to message not sent to. And then we also have passed in a phone number. Right. So we can also pass phone and present the information so we're able to like debug maybe what the issue was. So with that, just make sure that I have all my data fields spelled correctly. Oh nope, I did not. So it's username and phone number. So if I go back to my preview mode, I'm going to go ahead and enter my details again. That's my credit card number. And maybe I forgot the two here. Going to go ahead and enter my address. And my zip code, make sure I provide last details and I'm going to go ahead and process the payment. But in this case the text message is going to fail because the phone number is incorrect. We see that Meredith, the message was not sent to that phone number versus if we go back to our page and correct our phone number and enter the correct one. This time when we pay we actually should see a success message and that the message was sent sent to that phone number. So instead of it saying failed, we were able to dynamically control based off the success or the failure of the response from the message and determine what actually happened on the end user's end and present the correct information to them. So this is just a really simple way of showing you how Twilio works. And you'll see we have a new text message there as well, but we only have one more, not two. So just showing you how easy it is to incorporate text messaging and a little bit of error handling with those texts in your application. With that, I'm just going to remind you guys that we do have lots of social media if you want to get in touch with us, ask more questions or see what's going on. So feel free to check out our Reddit with Corvid by Wix, follow our Stack overflow and ask any questions there with the tag korvid. And then you can also find Joshua and myself on both LinkedIn and Twitter. You can find us via our names on LinkedIn here and then our Twitter handles are here as well. So feel free to chat on any of these social medias if you have comments about what you or sorry, any ideas about what you want to see what you can do with Corvid if you get stuck on anything and have any questions or just if you want to learn a little bit more about Corbid as well. With that, I want to say thank you and feel free to reach out.