How To Add HTML To Wix Site

If you are looking to add HTML to your Wix site all you will need to do is click the "+" icon on the left hand side menu in your editor, then move your mouse cursor over the "More" text, then click and drag the HTML iFrame onto your page and release your mouse button.

You will notice your iFrame does not have actually have any code written in it. In order to add the code you will need to click on the "Enter Code" button. This will pull up the area where you are able to add your HTML.

Once you have added you code then click the "Apply" button and your code will automatically be shown in a visual format on your site. Press the "Preview" button to see how the changes will look on your site.

In this post I want to cover some of the more nuanced possibilities with the HTML iFrame but also clarify how it is different than Wix Corvid.

How Is the iFrame Different Than Wix Corvid?

Wix Corvid is the new re-branded version of Wix code. The exact same functionality with a different name.

Wix Corvid is the main application of using code for your Wix site. If you want cool animations or to add a custom registration form then Wix Corvid is going to be your go-to.

But let's say you are using a third party for your customer management like Drip or Zoho and want to use that for your wix site....

You are going to need to be able to add code from your third party to your Wix site. But Wix Code doesn't allow you to just paste this in any place that you are actually using Wix code.

Kinds confusing right?

Wix code is a proprietary component of Wix so no one else can use their code in order to build what they have built. This makes it difficult to work with other code because it is different.

If you think of Wix code as an island resting in the water and regular HTML as the mainland. In order to get from the mainland to the island easily we will have to build a bridge. This is what the iFrame is. A bridge between regular HTML and the proprietary Wix code.

What Else Can You Do With The iFrame?

We mentioned above that you will be able to connect third parties to your Wix site if you want to add a custom form or quiz to your site, but what else can you do?

You can actually put an entire website inside your current website... Sort of a Russian doll type of situation.

In the iFrame settings when you want to add code you will have the option to add a web address. Copy and paste your web address you want to put on your site and click the "apply" and you will see that website appear inside your box.

Make the box as large or small as you would like. Keep in mind that you will have "inner" scroll options because your iFrame will be smaller than any actual website.

I have seen this option used for adding an e-commerce store if the person does not like the Wix option or does not want to build out another store.

I have also seen this used as a portfolio option for web designers and developers so that others have an immediate chance to look at their work.

Something interesting to note is that you will not be able to add a site if it does not have "HTTPS" at the beginning of the site address. All sites that are added to the iFrame need to be "HTTPS" and you will not be able to add any sites that have "HTTP".

Dependent Widget

Above we covered adding a custom form or quiz to your site from a third party. In that scenario you just took the code from your third party and added it to the iFrame and you could immediately see the code working.

But there are times when the HTML code actually needs to work with the Wix code for it to be able to function properly.

In order to do this you will need to write specific Wix code that you can FIND EXAMPLES OF HERE that will allow you to make the connections and talk back and forth with your HTML iFrame.

This is helpful even if you need to hire someone to finish the job for you.

Is There Anywhere Else You Can Add HTML?

There is only one other place in which you can add HTML to your site.

You will find this located in your dashboard. Go to the "Settings" tab at the bottom of the left hand side menu. Then click the "Tracking and Analytics" tab. Then click the "+ New Tool" button on the top right corner. The drop down will contain a "</> Custom" option where you will be able to add your HTML code snippet.

This section is usually used for integration purposes. Let's say you wanted to integrate your email marketing with your Wix site.

Sometimes the third party where you have your email marketing located will give you an option to build a custom form and give you the HTML of the actual form so that you can add it anywhere you want by using the iFrame.

Other times the third party will give you code that you need to put in the "head" or "body" section of your site code. Since Wix has proprietary code that you cannot access they have created this area so you are still able to do this.

I used this option to add a chat function to a site. I have also used this to add a website translator to the site.

Customizing Your HTML

Like any other code language you can customize your HTML code to the exact design and functionality you want.

Let's say you added that custom form from your email marketing third party. Depending on the code you were given you can manipulate the code to get the exact design you want.

I recently did this for a form that was too big on a page and I needed to change the size dimensions. If you are familiar at all with HTML this can be an easy fix. It is also very useful to know so that you can ask your developer to change the form if you don't like the way it looks on the site.

Wix CSS

CSS is another basic foundation of coding that can be used to create more of a design for your HTML.

With CSS you can manipulate colors, size, fonts, etc. Using this in combination with your HTML iFrame can give your custom form or custom quiz a better branded look.

Using the two together and you will be able to create your own forms if you want. Before creating your own form I would try out the Wix provided forms first to see if you can work with those.

This CSS option is really only useful if you are customizing a form or widget from a third party and looking to make some quick adjustments. Usually the third parties will have customization options already on their end that you can manipulate the design with.

If they do not have those options you can always add your own CSS in order to get the design you want. If you are unfamiliar with CSS than I recommend using Upwork or Fiverr to find a developer to implement this for you.

Since CSS is a basic building block of coding most developers should be familiar with using CSS and it should be cheaper to hire for.

---

Day 13 of my 30 day Wix content challenge to provide valuable, free content for entrepreneurs and businesses. Yesterday's post was about the popularity of Wix and Wordpress and how these trends represent a change in how website are being built.

If this post or 30 day challenge has been valuable to you or your business then please let me know by liking Mercado Wix Design's Facebook page, Instagram, or by signing up for this blog by clicking the "Log In" button below this post. I want to help businesses grow through their online presence and I know your business is awesome...let me prove it.