How To Build A Wix Website - Adding HTML Code To Wix - Wix.com Tutorial For Beginners (2020)
top of page

How To Build A Wix Website - Adding HTML Code To Wix - Wix.com Tutorial For Beginners (2020)



Well, hey, there, it looks like you're trying to add some HTML to your Wix website, if that's you, you're in the right place. If that's not you this probably is not the right video for you. Although I would love to have a year in Wix Nation.


Hey guys, my name is Michael Patrick founder of Wix Training Academy. And I am thrilled to have you in today's video, where we will be exploring how to add HTML code to your Wix website. Maybe you're embedding from a custom software that has an embed code. Maybe you're like me in this video and using Calendly as an example, to embed a booking system into my Wix website for people to book calls, or maybe you're just going at it the old fashioned way and creating your own HTML widget. In which case I applaud you for doing your own code and trying to build something yourself, if that's you perfect, this video will show you exactly how to add HTML to your Wix website.


Adding HTML Code To Wix

So just as a quick background, I have found in Wix Training Academy, and I've been using the Wix platform for about eight plus years. Now I'm a Wix partner. I've had the opportunity to speak at Wix con and work hand in hand with the upper management and CEO of Wix, which are some incredible people. And if you ever have the chance to go to Tel Aviv Israel, or get to a Wix con, I recommend you do so because it's awesome.


Through that, I've built an incredible community here. We're all family, Wix Nation is what I call it of 32,000 like-minded individuals. And I would love if you can join our community by clicking that subscribe button in the bottom right of this video and turning those bell notifications on so you never miss any content here on the channel.


Now without further ado, I think that gives a little bit more authority as to why I'm particular teaching this video. And I think it's time to jump into the content. What do you say the year is 2020? Just like my vision. So, you know, I got to protect them with these blue light glasses as we jump into actually showing you how to add HTML code to your Wix website.


So what we're first going to do is you've probably already got your website up and loaded, but I'm going to go pick a template just to show you on using the editor, how we're going to go in and do this. So I'm just going to pick a random business template. Success coach is what we'll go with. And then what I'm going to show you how to do is I'm going to show you how to add the HTML code. In particular, I'm going to add the embed code that was provided to me from Calendly, which is a booking system that allows people to book Calendly calls with you, which essentially means they're just booking on your calendar and Calendly the kind of middleman between the booking and your calendar makes it much easier to book. But they provided me an embed code that I want to use on my website for people to actually book a call with me.


So in order to do that, what I'm going to do is I'm going to add a page and I'm going to go over here to my page manager at a page, and I'm just going to title it "Booking". And I'm going to click save. And then we've got the background there.


Now in order to actually go ahead and add the HTML code, what we're going to do is we're going to go to the add button and then we're going to scroll down to more. And when we get there, we will see over on the right custom embeds and we will click "HTML iframe", once we click that, we're going to go ahead and enter the code.


Now, as I mentioned, I just got embed code from Calendly. This will be the code that you currently possess, or maybe the embed code that you got from another software that you're looking to put into your website. If you're trying to custom write some HTML code and create your own little widget, whatever that might be, that's fine too. But your code is going to go in here and you'll see it's HTTPS only so secure, and we're going to paste our code and we are going to click apply.


So now you will see the widget has been added. I can drag it out to be the size that I need it likely. So you'll see Calendly has a select size. They provided me the size details. The size details are actually in the embed code itself. If you wanted to change the sizing of how the embed actually looks, what you'll have to do is you'll have to edit the code. In some cases, you won't be able to do this, but you'll see the sizing right here. It says width 320 pixels, I can change that to 420 pixels if I want it. And I can change the height to 830 pixels. If I wanted to click update, and you'll see that the height and width have been updated. And if that's still not good enough and you want it to go down even further, and again, you'll have to find this width and height portion in your HTML code.


Maybe you won't see it in this portion, and you'll actually have to go back to your original source of software or whatever that may be, and actually edit them width and height settings cause they preload the code for you. But you can even change it to be larger if you want. So maybe I want to 820 pixels wide and 10 30 pixels deep or width, and we'll see that it has updated. And you'll simply just go ahead and continue to drag it down.


Now we've got a Calendly booking system embedded right here into our Wix website without having to build it ourselves. We just got the embed code, put it in using the HTML code settings. And then voila, we've got our system. Here's an important thing to know it important and imperative to note that you cannot download source files from your actual physical Wix website and access the source HTML code and the source CSS code of your particular website.


However, you can add external HTML in different embed codes or write your own HTML and created HTML widget if you want to do those things are allowed.


And just like that, you've got working HTML code and you're off to the races to go explore the other parts of your Wix website.



Conclusion


Well, there you have it. You now have the ability to add HTML code to your Wix website. How does it feel? Do you feel more powerful? Do you feel inspired? Do you feel ready to go add it to your website and get that instant gratification of seeing it load in there? If that's what you're feeling. That's awesome to hear.


If you enjoyed the content you found this video particularly helpful, I would kindly ask that you drop a thumbs up down below. Comment and let me know if you found this video helpful. And lastly, once again, we have built an incredible community here at Wix Nation of 32,000 plus like-minded entrepreneurs looking to do exactly what you're looking to do, which is build the most successful website possible. So you can grow your business online.


If that sounds exciting to you, and it sounds like a community you would like to join, I would kindly ask that you click that subscribe button, the bottom right of this video, turn those bell notifications on so you never miss a single piece of content here on Wix Training Academy.


Once again, my name is Michael Patrick founder of Wix Training Academy and I am thrilled to have you here. Thank you very much for watching. I'll catch you in our next video.

1,453 views6 comments

Recent Posts

See All
bottom of page