Select Page

HVAC Website Design Guide

 

Are you running an HVAC business? Or Are you an HVAC Contractor seeking new leads for your business? Then, this HVAC Website Design Guide is for YOU! 

A Quick Overview Of This Complete HVAC Website Design Guide:

1- Elegant and Professional Website for your HVAC Business, which you will make by yourself with my step-by-step instructions.

3- A good looking Logo according to website branding and colors.

4- Live chat feature setup, so your visitor can contact you Live on the site and you can reply with a mobile app.

5- Next steps for managing and updating your website for best performance, as well as promoting your website with Facebook ads and Google ads.

If you will follow these instructions step by step and up to the end, then I give you my word that you will have an Elegant website as well as it will get you new leads for your business every month because I am not just teaching you how to make a website for your HVAC business, but the end goal of this guide is to get you leads from your website and that is possible with the help of Facebook and Google ads, don’t worry if you don’t have any experience in web design or internet marketing, I will teach you both and you will be able to make your website, manage and update it, and run ads on Facebook and Google on your own without any developer or internet marketer. Like it? You will love it 🙂

Let’s setup initial things required to make your website!

First thing first, you need a Domain Name for your website and a Web Hosting to host your website on it, let me explain about both.

Domain

The domain is an address of a website, people will access to your website by this address and it comes with extensions like .com, .co.uk, .com.au, for example, your business name is XYZHVAC then you will buy a domain name of www.xyzhvac.com or any name you like and you can also select the extensions according to your country. You will give people this address www.xyzhvac.com then people will come to your website by typing it on the browser or a search engine like google. Domain costs around $10/yr - $100/yr depending on the name. But, where from we will buy that registerar will give us Free Domain for 1st year!

Web Hosting

Web hosting is like a storage box where you store your website files, it is also called a Server. When you make a website, your website files will store on server and when someone will type your domain in the browser then the server will show your website in the browser because it has all the files of your website. Web Hosting costs different on different platforms like WPEngine hosting price is $30 per month and BlueHost hosting is starting from $3.95 per month.

Domain and Hosting are compulsory for your website because without these your website cannot be Live on the internet, We have to register these to the registrars of domain hosting like Bluehost, WPEngine, Etc.

We will be using BlueHost for your website because I believe it is the best hosting for a starter website because it is very affordable you can make your online presence in $3.95 per month and not only the price Bluehost offers the following things as well

  1. Free Domain Name For The First Year
  2. Free SSL Certificate ( This is will secure your website )
  3. One-Click WordPress Install ( we will use the WordPress platform to make our website and with this, there would be no headache of installing WordPress )

These are the things we need before starting making our website and Bluehost offers all in good price and high quality.

Now, let’s buy your Domain and Hosting to get started with the website!

How to buy the domain and hosting from Bluehost and install WordPress on it.

1. Click or Copy this link https://www.bluehost.com/track/uzairrch/ it will take to you on Bluehost main page, which is displayed below

2. Click on the “Get Started” button and it will take you to the Packages page which is displayed below.

3. Select the first package which is $3.95/mo and it will take you the Domain selection page, which is displayed below

4. Here you will create your new domain like XyzHVAC and select the extension like .com or any according to your country and it will look like xyzhvac.com and click Next, it will take you the checkout page, If your domain name will not be available then it will not proceed further, so you have to try another name which is available and then click Next. and it will take you the checkout page which is displayed below.

5. Here you have to fill your Account information in the first section and then you will see 2 sections below, Package Information and Package Extras. You can select the package and your billing period in the package information section and in package extras, these are not much important and you can choose if you like any but I chose the first one, which I selected in the following image.

6. After this you will see a payment section, here you will put your payment details and below you will select the terms and conditions checkbox and click on submit.

Great, You completed your first step, now you should receive your credential through your email and after that, you can log in to your Bluehost Account and it will look like this

Install WordPress in Bluehost hosting

Now, you have to move to your second step and that is installing WordPress on your domain, it's very easy with Bluehost. Let's do it!

1. Click on the “My Sites” tab on the left side menu and it will take you to this page.

2. On my account, I have some websites but on yours, there should not be anything or a website with dummy domain, you have to click on “Create Site” button on the right side, displayed in the image above and it will take you to this page

3. Here you have to enter your Site Title and Tagline, you can write any and don’t worry we can change it later as well and then you have to click on “Advanced” tab under it and it will show like this

4. Here you have to put your Email Address and write your WordPress Admin Username and Password and you can save it anywhere because you will use it to log in to your website in future and click on Next button and it will take you to this page:

5. Here you have to select your domain and de-select the selected plugins showing below because we don’t need them and then click on Next tab and it will start installing WordPress on your domain.

6. When the installation is completed, it will take you to this page

7. Here you can copy-paste your credentials if you want and after that, you have to click on “Login to WordPress” text and it will take you to the WordPress Dashboard and which will look like this

Congrats!! You have successfully installed WordPress on your domain, now you are ready to proceed further with your website setup 🙂

WordPress Overview

WordPress is a content management system which used to build all types of websites. Over 40% of Websites on the internet are using WordPress. Let me tell you why we are using WordPress for our website

1. WordPress is a user-friendly platform which gives the ability to any person even a non-tech person, to edit and update their website without any help of designer and developer, but it doesn’t mean that you can make a High-functional website like Facebook on your own because it's a custom website, if you are a developer then you can do it otherwise you cannot, but, for sure, you can make and manage your own business or personal website easily on WordPress with the help of my instructions.

2. There are many Themes and Plugins available for WordPress, which we can use and make our website as we want, there are some Free themes and some Premium themes same case with Plugins. Free themes are good but those are not useful because they didn’t provide all its functionalities in Free mode. They provide Pro mode after installing the theme as compared to Premium themes, these come with all functionalities and are more optimized than Free themes.

3. WordPress is Secure and Search engine optimization friendly, it helps our website to show more in google results and it keeps our website safe from hacker attacks

How you can log in to your website in WordPress?

To log in to your website, you have to add “/admin” at the end of your domain name and it will take you to the login page where you will enter your WordPress Logins which you created while installing WordPress in Bluehost account. For Example www.yourdomain.com/admin and it will take you to this page:

Enter your username and password and click on Login and it will take you to the WordPress dashboard again

If you want to learn more about WordPress Usage then you can read my WordPress Guide in which I explained completely about WordPress themes, plugins, dashboards, users, other functions.

Let’s Start Your HVAC Website Design!

Now, first, we need to think about how our website should look like or which type of design our website should have, right? What if I say No? 🙂

We will not think about anything of design because we will get a premade design and we will just configure it according to our needs with an easy to use front-end page builder. Are you wondering how is it possible? Let me show you.

To make your website we will use a theme called “Divi”. It is a great theme and it's used on millions of websites because of its Amazing and Elegant Looking Pre-made Website Layout Packs and Its user-friendly page builder called Divi Builder. This theme is a premium theme that comes with 100+ pre-made websites for different businesses and we will pick an HVAC Website Design Layout with its sub-pages like About, Services, Contact and others and then we will just change text and images with it easily I will teach you everything step by step. 

So, Let’s start with getting the theme so we can install it on our website and start the work.

To get the theme, there are 2 ways, one is you can buy from theme company and they will charge you $95 for it, i explained the instructions below for it. Second way is you can go to my website www.uzairch.com and you can click on the "Store" tab in the menu and you will see a product called "Get Theme" you can buy that prouct and you will get the theme and its API Key (which we will use for our website) in $50 and you can save your $45. I have the developer license that's why i can install it on unlimited websites. If you want to buy theme directly from theme company then follow the instructions below.

1. Click or Copy this link https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59304 and it will take you the main page of Elegant themes that will look like this 

2. Click on the Pricing tab on Top Right and it will take you to the pricing page where you will see 2 packages like this

3. You can select any package both will work for your website, but you can buy one time plan that is enough for you for now and then click on “Sign Up Today!” button and it will take you to the payment page which will look like this

4. Here you can fill in the details and click on Submit. After successful payment, your account will be created and it will take you to the Elegant theme members area which will look like this

5. Here you will see the “Divi Theme” on the left section and a button under it called “Download The Divi Theme” click on it and your theme will be downloaded in a .zip file format which will look like this.

6. Now, you have to do one more thing, go back to your “Elegant Themes Members Area” and hover on the top-right menu called “Account” and it will show a drop-down menu, which will look like this

7. Click on the “Username and API Key” tab

8. It will take you to this page 

9. Scroll down the page and you will see your Username and API Key, Copy both and save it anywhere because it will be used.

Great, now you have everything to start making your website and let’s begin!

Theme Installation

1. Open your WordPress Dashboard and Hover on the Appearance tab on the left menu and click Themes.

2. It will take you to this page and you have to click on the “Add New” button on the top.

3. After that, it will take you to this page and here you will click on the “Upload theme” button on top.

4. It will look like this and you can have to click on the “Choose File” tab and select the Divi theme from your computer folder where you downloaded from Elegant themes.

5. After selecting the theme, it will show like this

6. Now, you have to click on the “Install” button and it will start installing…

7. After some minutes when it will be installed, it will ask for permission to activate the theme, like this

8. Click the Activate button and let the theme activate.

9. When it is activated, it will show like this

Great, your theme is finally installed and activated. Let’s move to the next step!

Page Creation

Now, first, we have to create pages for our website, like Home, About Us, Services, Blog, Contact.

To create pages you need to follow these steps:

1. First hover on Pages tab in the left menu and click on “Add New” tab, see the image below for reference

2. It will take you on this page (See Image for reference ) and here you have to add the title of your page, first start with Home, so write Home in the title and click on the "Publish" button on the top-right side.

3. Your homepage is published now! (See Image for reference )

4. Now you don’t have to do anything on this page and you have to repeat the process to make your rest 4 pages, About, Services,Blog, Contact.

5. Click on Pages > Add New and then add the title of the page and update, and repeat until you have your 5 pages.

Menu Setup

I assume you made your all pages, Home, About, Services, Blog, Contact and now we will set up our menu which also called site navigation.

To add navigation follow the below steps:

1. Go to your WordPress Dashboard

2. Hover on the Appearance tab and click on the “Menus” tab. (See Image for reference )

3. It will take you to this page (See Image for reference ) and here you have to write the name of your menu, I have written “Main Menu” and click on the “Create Menu” button.

4. Now, your menu is created and it should look like this (See Image for reference )

5. Now we have to add pages to this menu, and pages are displaying on the left side, you have to select all 4 pages and click on “Add to menu” button and it will be added and look like the below image.

6. Now you have to change the sequence by dragging the menu item to upward or downward, just hover on the menu item and click on it and drag it ( don’t leave the mouse click until it is dragged ) and make the position on menus like this, Home, About, Blog, Contact like the below image.

7. Now, you have to scroll down a little bit and you will see “Menu Settings” heading and 3 options under them, you have to select the “Primary Menu” option like the below image.

I forgot to create "Services" page, so i added in the end, don't worry you can add your pages and move to next step.

8. Now you have to click on the “Save Menu” button and menu will be updated like the below image

Great, you have created your Menu, now let’s move to the next step which is Header Setup.

Here is the look of my website, is yours same?

You can see the Menus on the top right side, don’t worry about the website layout and styling, we are moving forward to it.

Header Setup

The header is the top area of your website where your logo and menus are placed and it will be the same on though out the site.

To set up Header, follow the below steps

1. Hover on the “Appearance” tab and click on the “Customize” tab like the below images

2. It will take you on a page like the below image.

3. Now you have to click on Header & Navigation section and it will open a new tab like the below image

4. Now you have to click on the “Primary Menu Bar” tab and it will open a tab like the below image.

5. Here you have all the options available to customize your header, you can change, Menu bar height, color, text size, color, font family and many things, I did 2-3 things in it, first, I checked the “Make Full Width” box, increase text size to 1px now it is 15px and changed the font family to “Montserrat” because I like it, see the below image.

6. Now, I would like to remove the “Search” icon from the header, and for that, you have to click the back button on the left side of the “Primary Menu Bar” heading.

7. It will take you back here and you have to click on the “Header Elements” tab and it will take you here and here you have to uncheck the “Show Search Icon” box and click on the publish button on the top and it will show like the below image

Great, your header is ready and here is the final look, you can customize your header the way you like, I like it, for now, maybe I update it after designing pages if needed.

Note: you can see your website while typing your domain in the browser.

Now let’s move to the next step which is Footer Setup.

Footer Setup

Footer is the bottom side of our website and it also remains the same on all pages like the header, to set up the footer you need to follow the below steps:

1. Go to the customize page again by Appearance > Customize

2. You will see an “Additional CSS” tab at the end.

3. Click on it, and a small window will be there just click on “Close” like the image below

4. After closing the window, the tab should look like the below image

5. Now, copy the below code and paste in the tab like the image below
#footer-widgets { display: none; }

6. Now move back to the main customize tab and click on the “Footer” tab under Header & Navigation tab like the image below

7. It will take you to the new tab and here you have to select the “Bottom Bar” like the image below

8. It will take you to this tab like the below

9. Here you can customize the footer bar, I change its color to pure black and text color to pure white and reduced the size of social media icons little bit, like the image below

10. If you scroll down on this tab then you will see footer credits option and I entered my credits and I also changed social icons color to white, you can add yours and click on the publish button on the top, like the image below.

Great, now your footer is ready and mine as well, don’t worry, we will change them according to our website later when we design all the pages, here is the new look of the website.

Now, we are moving to our next step and that is designing the Homepage of our website, are you excited? Let’s do it!

Homepage Design

Note: If you need an image for your website you can get them from Shutterstock, it’s a stock images platform and you can get any type of image from here for your website because we cannot use google or any other images due to copyrights problem. Here is the ShutterStock Website link: www.shutterstock.com

Now it’s time to go back to our WordPress dashboard and hover on the Pages tab and click on All pages, like the image below.

It will take you to the all pages page and it will look like the image below. Here you can Edit, Delete, View your all pages, we are working on Homepage now so we have to click on the “Edit With Divi” tab under the name of the page, in my case, it’s home so I will click under the home tab.

It will take you to the page where it will ask for Layout Options, here you have to select “Choose a premade layout” section and click on “Browse Layout” button, like the image below

After the click, it will show a window like this where multiple templates will show and you have to write “Hvac” in the search bar on the left side like the image below.

Now, you have to scroll a bit down and you will see a template called “HVAC Home page” like the image below

You have to click on the Template and it will show a new window and you have to click on the button called “Use this layout” like the image below.

When you will click on “Use this layout” button, it will show a new window which will ask for your username and API key, which you got from the theme website, you have to put the username and API key in and click submit, like the image below

Great, now your import has been started and it will take a minute to import the template.

Okay, cool, so our homepage template is imported!! See this image below, I hope you are also with me.

Now, we have to edit the page according to our needs, and we have to place our content in it instead of the demo text that comes with the template. This template itself is a complete design and you can just add your text in it and save it and if you want to delete any section you can do that as well also you can add your image on the site as well. But, what my recommendation is that you should change your text and keep or delete any section and that’s it move to another page because the template is already designed.

Now, I am going to tell you how you can edit text and sections, so you can change it according to you.

Section 1: Main Banner

If you hover on the main text which is “Air & Heating” you will see a box-like image below: you have to click on “Module Setting” it will show a window like an image below.

Now, scroll a bit down on this small window and you will see the text and you can edit the text from here easily like the image below

Note: you have to click on that “Tick Mark” to save your text like the image below

I hope you changed the text. Now you can change its styling like size, color, font family and many things in the "Design" tab of this window, like the image below

Click on the Heading tab, to change this heading styling, but I would say leave it like this if you want a good design 🙂

Now, move to the small text under the main heading, it will work same, just hover on it and click on the “Module Setting” icon, like the image below

It will show a similar window like before but with different text and you can edit the text to whatever you want like the image below

Note: you have to click on that “Tick Mark” to save your text like the image below

Okay now you edited your main heading and text, now it’s time to move to the below button aka call to action. Just hover on it and click on the “Module Setting” icon and it will show a window like an image below

Here you can edit your button text and design like the text and also, you have to add a link to this button and you can click “Link” tab below the text and it will show like this”

You can paste a copied link here or if you want to link to your specific page post then you can click on the little icon on the right side, like the image below.

It will show a new window, which will give many options, like the image below.

I will link this button to our Contact Page, so I clicked on “Page Link” tab and it shows a window like below image

Here you can select your page by clicking on it, and I selected the Contact page, now click on the “Tick Mark” to save your settings.

Great, now you have edited your text, now let me show you how you can change the background color or image of this section

Now, if you want to change the background color or image, then you have to click on the top-level module setting, like the image below.

If you click on it, it will show you a window like an image below.

Now, you can click on the “Background” tab under the link tab and it will show a new window like the image below

Here you can change its background color as I changed in the image below

If you are wondering how to change the background image, then let’s do it.

You just have to go to the image and double click and it will open a window like this

Here you can change the image easily by clicking on the image and it will show a window like this

Here you can drag your image directly to this window or you click on Upload tab on top and it will show like this

You can click on the “Choose File” button and choose an image from your PC and upload it and it will show like this

Now you can click on the “Upload Image” button on the bottom right and it will be uploaded and show like this:

Note: you have to upload a small size image with transparent background so it can display properly and you can change its style like you changed text and headings style in the design tab.

Okay, so now let me show you how you can delete any section or any part of the section.

Please see the below image, you are looking at 3 sections and its settings boxes and each box has a “Module Setting” icon on it, now if you see lil bit right after 2 icons, it has the basket icon, if you will click on that icon, the section or its particular part will be removed.

Section 2:

Now let’s move the section 2, see the image below

 

The process is same in like the first section, you can change headings, text, button, image easily by hovering on the section and click on the “Module Setting” and you will get all settings, so I will move to the next section because now know the complete process of editing the sections, I will explain specific things in pages from now which may be difficult for you.

Section 3 & 4:

I see that section 3 (Our Mission and Values) & 4(Testimonials) also don’t have any difficult things, you can easily edit your text and sections styling easily. So, I will move to the next section, which is the contact section. Let's check this out.

Section 5: Contact Form Setup

In this section, we have to configure contact form on right and text on left, so I will tell you how you can configure contact form here. If you hover on the contact form and it will show you module setting icon like the image below

If you click it, it will show a window like an image below.

Here you can edit the form fields and add new fields and add your email as well so you will receive all emails, submitted from this form.

Edit Field:

Click the Setting icon at the left side of the field you want to edit, like the image below

It will show a window and here you can edit the name of the field, like the image below

You can also change the Field options, is this field is required or not, or this field will be input field or a checkbox or Textarea, you can edit these things in the field option below to the name tab, like the image below

 Now, you can click the back button on top and it will take you the fields page again, you will scroll down and you will see an Email tab under it, here you can add your email to get emails, like the image below.

 

It has more options below, you can check and use if you want any but the above are the basic settings you need to know.

Okay so, I hope you edited your Homepage according to you with your content and now you have to do one thing, you have to “Save” the page, you can do it by clicking the 3 dots on the center bottom of your page (...) like the image below

It will give you a “Save” button on the right bottom side, click on that and it will be saved like the image below.

Your Homepage is saved and now it’s time to move on to the next page, which is the About Us page!

About Us Page Design

Now you have to go back to WordPress Dashboard and you have to click on All Pages tab and click on “Edit with Divi” Under About Page, it will take to you a new page where you will see Layout Options and you have to select Choose A Premade Layout section and then write “HVAC” in the search bar and it will show you the templates again.
I know I speed up a little bit here but that is because I told you these things in the Homepage design, you can see the step by step instructions with images in the Homepage design section.

Now, it will show you templates like the image below and you have to select the About Page template this time, like the image below

You have to click on “Use this layout” button and it will start importing your page, like the image below

Great, now your about page is imported and it will look like the image below

Okay, so this page, is also easy like the homepage, there is no difficult thing, you can easily edit all the content and images and in you can configure the contact form as well easily, if you find any difficulty you can go back to homepage design and there all things mentioned step by step.

You have to edit the page according to your content and keep or delete the sections which you like and save the page

Now, we will move to the Services page design.

Services Page Design

Now you have to go back to WordPress Dashboard and you have to click on All Pages tab and click on “Edit with Divi” Under Services Page, it will take to you a new page where you will see Layout Options and you have to select Choose A Premade Layout section and then write “HVAC” in the search bar and it will show you the templates again. You have to choose the Service page template and import it, after importing, it will look like the image below

Okay, so this page is also easy like the homepage and about page, there is no difficult thing, you can easily edit all the content and images and in you can configure the contact form as well easily, if you find any difficulty you can go back to homepage design and there all things mentioned step by step.

You have to edit the page according to your content and keep or delete the sections which you like and save the page

Now, we will move to the Blog page design.

Blog Page Design

Now you have to go back to WordPress Dashboard and you have to click on All Pages tab and click on “Edit with Divi” Under Blog Page, it will take to you a new page where you will see Layout Options and you have to select Choose A Premade Layout section and then write “HVAC” in the search bar and it will show you the templates again. You have to choose the Blog page template and import it, after importing, it will look like the image below

Now, this is a Blog page, it will show your all posts here, now I know only one post is showing called “Hello World” but that is because we don’t have any post in it, if you will add new posts it will show you here, for example, save this page, go to WordPress dashboard and you will see “Posts” tab in left menu, here you can click on “Add New Post” tab, like the image below

It will take you to a new page, here you have to enter post title like I added “new post” and click on Publish, and it will look like the image below

Now, you have to go to your website and click on the Blog page and you will see 2 posts here now, like the image below

You can add blog posts and edit them with Divi builder like pages and can import templates as well for these, you can keep or delete this page it’s up to you. But, a blog is good for your website because it generates traffic.

Great, now let’s move to the next page which is on the Contact page.

Contact Page Design

Now you have to go back to WordPress Dashboard and you have to click on All Pages tab and click on “Edit with Divi” Under Contact Page, it will take you to a new page where you will see Layout Options and you have to select Choose A Premade Layout section and then write “HVAC” in the search bar and it will show you the templates again. You have to choose the Contact page template and import it, after importing, it will look like the image below

Okay, so this page is also easy as the previous pages, there is no difficult thing, you can easily edit all the content and images and you can configure the contact form as well easily if you find any difficulty you can go back to homepage design and there all things mentioned step by step.

You have to edit the page according to your content and keep or delete the sections which you like and save the page.

So, I hope till yet, you design all 5 pages and setup header footer, like let’s do a small thing to make the homepage to your original domain homepage, means when someone types your domain, Homepage will show!

Go to your WordPress Dashboard > Appearance > Customize and click the “Homepage Setting”
Tab, like the image below

It will open a new window that will look like the below image and here you have to click on “A Static page” radio button and it will show a drop-down under Homepage heading, you have to click the drop-down menu and select Home and click on Update on top.

Great, now your website is ready! Now, we need a nice looking logo for our website, let’s make it.

Logo Design

I don’t use photoshop or illustrator because these are not very user-friendly but they are designers friendly, I use Canva for making a logo or web banners or image editing, so we will make the logo here and I will show you how you can create your nice looking logo with Canva.

Click On Canva or Copy-Paster this link https://canva.7eqqol.net/9Y2Z4 on your browser and signup on the website with your email address and create your account in just 1-2 minutes!

When your account will be created you will see a dashboard like an image below

You have to write on the search bar “Logo” as I did in the below image

Click on the logo suggestion and it will take you this page

Here you can see different templates of logos, you can choose which want and click on it and edit it easily, I just picked this one in the image below

When I clicked on it, it takes me to a window like an image below

Now, if you will click on its text, it will show its properties and if you click on the background it will show its properties as i click on the background and it shows me its properties like the image below

I changed its background color to White, you can see in the image below

If you will click on the text, you will see its properties, like font size, family, color, and you can change the text as well, I changed it to “HVAC” like the image below

I increased the font size from above menu and Now, I am resizing the logo, the best size is 150px x 50px, it can be done from the Resize button on top, like the image below

After resizing, it's looking like the below image

I increased the font size again, and change the below bar color to Blue and we are good to go, see the below

You can download the logo now by clicking on the Download button on the right top and you can select the file size, .png is good for the logo and remove the background so it will be a pure png file and click on download see the image below

Great, now you have the logo, let’s upload it to the website by going to WordPress Dashboard and hover Divi tab in the bottom left and click on the theme options, see the image below

It will take you to a page like an image below and you can see the logo option on that.

You have to click on the “Upload” tab, see the image below and it will open a window where you can upload your image easily as you did before on the homepage section background image changing, if you forgot, you can go back and see and btw, it's not that difficult.

I assume you uploaded the logo and now it’s time to save and you can save it from the button on the top left, see the image below

Great, now you can go to the main page of your website and check the logo. My logo is uploaded, see the image below

Okay, so now our website is ready, our logo is ready, let’s move to a bonus section called “Live Chat” feature set up in your website, it will help you to generate more leads by connecting with your audience live by your phone easily. It is recommended for everyone that is looking for more leads from the website. So, let’s do it.

Live Chat Feature Setup:

We will use a platform for our live chat feature called “Tidio Live Chat”. This is the best platform for a live chat because it has a built-in plugin for WordPress which will help you to integrate the feature easily without any coding.
Tidio provides many features in its Free mode but the main features like Live Typing Preview,
Live Visitors List, Viewed Pages, New Incoming Visitor Notification, these are the features help us to know more about our audience and set up our targeting and advertising according to it, they provide it in it’s Pro feature and that is $15/month but it is worth it, so I will recommend you to buy its Pro feature it will give you advance insights about your audience because we will run Facebook and Google ads as well to promote our services. Otherwise, you can use Free mode which will give you the ability to chat with your potential audience.

Let’s set it up 🙂

First, you need to go to this link https://www.tidio.com/?ref=uzairbashir you will see the main banner of Tidio, like the image below

You have to click on the Pricing tab next to the Logo and it will take you to this page, like the image below

Here if you scroll down, you will see 3 pricing tables, you can have to select the 3rd which is “Communicator” and click on “Try it for free” button, like the image below

It will take you to the registration page, like the image below.

Here you have to create the account, you can create it with your Email or Facebook, I clicked on Email, and it shows a window like an image below.

You have to enter your details here and click on “Create a Free Account” and it will take you to its panel, like the image below

Here you can change your Name and Language and click on Continue button, it will take you on this window

Here you can put your website address, country and website category and click on Continue

Here you can set up a chatbot that will show to visitors when he comes to the website, I selected the greeting chatbot you can select any which you like and click on continue.

Now, It will show you 2 option, and you have to select the first one which is “Show Code” and it will take you this window, like the image below

Here you have to click on the WordPress tab and it will show code like the image below

You have to copy the code by clicking on the “Copy” button and move to WordPress dashboard and hover on Appearance and click on Theme Editor, like the image below

It will take you to a window, here you have to scroll the right menu downwards and you will see the “footer.php” file, like the image below.

Click on footer.php and scroll its page downward to the end and you will see </body> tag here, like the image below

Now, paste the code on above line from </body> tag, like the image below

Click on Update button under the box, like the image below

Now, move to your site main page and see your live chat is integrated like the image below

Great, now, if you will go to your Tidio dashboard, it will show your installation is successful and it will take you to its main page, like the image below.

Here you can customize your widget, see your traffic, and you can complete the steps which they mention above including installing mobile apps for it, please complete those steps that are very easy and get the advantage of live chat with your visitor.

Live!

Okay so, your website is ready now! How was the guide? Please tell me in the comments below. If you have any questions, you can post them in the comments below. (If you are reading it in E-book then you can come to my website www.uzairch.com and post comments there under the guide ) I will answer them.
But, it’s your starting point, now you put your feet into the online world, now you have to move on very carefully so you can get the return as the form of Leads, You can see the Next Steps section below, you should follow these all if you want to get new leads every month.

My Offerings!

If you are stuck somewhere, you can comment and I will help you, But, If you don’t want to do it by yourself due to time or any other issues then you can check my Store on my website www.uzairch.com I have listed all my services as products from theme installation to web design and many more.

Only websites are not important, its maintenance, updates, speed, SEO, marketing, all things are important to succeed in the online world, follow the next steps to stand out from the crowd and your competitors!

Next Steps: (Coming Soon)

Speed Optimization - MaxCDN and Wp rocket

Index Website In Google - All in One SEO

Lead Capture Popup Setup with Email Marketing

Facebook Ads

Google Adword Campaign 

Divi Builder

WordPress Guide

Website Update and Optimization.