Contents

In this tutorial we will cover how to install your Zomex HTML Template. This guide also includes how to install our supported software integrations (WHMCS, Blesta, Clientexec etc).

HTML Template installation

Make a full backup of your website files for safety

Download the HTML Template - TemplateName.zip file from inside your Zomex.com account

Extract the ZIP file to your desktop

Upload the contents of the upload directory to wherever you would like to install the template on your domain. We recommend in your public_html directory so it displays on domain.com:

/public_html/

Open the following file:

/public_html/libs/settings.php

Update the $path_php and $path_html variables within this file to match your install location (without the end /):

$path_php = '/home/CPANELUSERNAME/public_html';
$path_html = '';

The above example should be used if your template has been uploaded to public_html. Replace CPANELUSERNAME with your cPanel username.

Check your installation (e.g https://www.domain.com/) and you should see your template displaying correctly with all links working.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Supported Software

Now that your HTML Template has been installed there is the option to integrate software. The software will add functionality to your website (account system, carts, payments, reporting, support tickets etc) which will allow you to run a fully automated business. For example you could use the template plus WHMCS to provide automated web hosting services, use the template plus Blesta to provide software or use the template plus Clientexec to provide web design services. Each of the software is well suited to many kinds of online businesses, budgets etc. You will only need to use one software and have the choice between multiple options that we support including WHMCS, Blesta, Clientexec, WISECP, HostBill & BoxBilling.

View/Order Integration Software


WHMCS Integration Installation

In this section we will show you how to integrate WHMCS with your HTML Template.

This guide assumes that you already have WHMCS installed. We recommend that WHMCS is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set WHMCS as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_whmcs and $path_html_whmcs variables within this file to your WHMCS install location (without the end /):

$path_php_whmcs = '/home/CPANELUSERNAME/public_html/clients';
$path_html_whmcs = '/clients';

The above example should be used if you have installed WHMCS in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your WHMCS location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to whmcs as follows:

$integrationtype = 'whmcs';

This setting will instantly adjust your HTML template to use WHMCS functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use WHMCS pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by WHMCS.

2) Install The WHMCS Integration Template

Make a full backup of your WHMCS files and database for safety

Download the HTML Template - TemplateName - WHMCS Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your WHMCS root directory. For example if WHMCS is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

WHMCS Integration Template Upload
Uploading the WHMCS Integration Template

Activate the template:

WHMCS Integration Template active
Activating the integration template.

Lastly to activate your WHMCS Integration template login to your WHMCS admin area and go to Configuration () > System Settings > General Settings > Select your template under System Theme and save.

3) Integrate Your Header/Footer With WHMCS.

The final step is to apply the header/footer of your HTML Template to the WHMCS integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the WHMCS Integration box as seen below.

WHMCS Integration Box
Dev tools WHMCS Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the WHMCS integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-whmcs/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-whmcs/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-whmcs/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-whmcs/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-whmcs/integration/integration-footer.html


The integration is now completed. When you view your WHMCS you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and WHMCS (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and WHMCS is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained


Blesta Integration Installation

In this section we will show you how to integrate Blesta with your HTML Template.

This guide assumes that you already have Blesta installed. We recommend that Blesta is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set Blesta as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_blesta and $path_html_blesta variables within this file to your Blesta install location (without the end /):

$path_php_blesta = '/home/CPANELUSERNAME/public_html/clients';
$path_html_blesta = '/clients';

The above example should be used if you have installed Blesta in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your Blesta location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to blesta as follows:

$integrationtype = 'blesta';

This setting will instantly adjust your HTML template to use Blesta functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use Blesta pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by Blesta.

2) Install The Blesta Integration Template

Make a full backup of your Blesta files and database for safety

Download the HTML Template - TemplateName - Blesta Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your Blesta root directory. For example if Blesta is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

Blesta Integration Template Upload
Uploading the Blesta Integration Template

Activate the template:

Blesta Integration Template active
Activating the integration template.

Lastly to activate your Blesta Integration template login to your Blesta admin area and go to Settings () > General > Template > Select your template under Client Template and save.

3) Integrate Your Header/Footer With Blesta.

The final step is to apply the header/footer of your HTML Template to the Blesta integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the Blesta Integration box as seen below.

Blesta Integration Box
Dev tools Blesta Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the Blesta integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/app/views/client/templatename-html-integration-blesta/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/app/views/client/templatename-html-integration-blesta/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/app/views/client/templatename-html-integration-blesta/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/app/views/client/templatename-html-integration-blesta/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/app/views/client/templatename-html-integration-blesta/integration/integration-footer.html


The integration is now completed. When you view your Blesta you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and Blesta (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and Blesta is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained


Clientexec Integration Installation

In this section we will show you how to integrate Clientexec with your HTML Template.

This guide assumes that you already have Clientexec installed. We recommend that Clientexec is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set Clientexec as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_clientexec and $path_html_clientexec variables within this file to your Clientexec install location (without the end /):

$path_php_clientexec = '/home/CPANELUSERNAME/public_html/clients';
$path_html_clientexec = '/clients';

The above example should be used if you have installed Clientexec in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your Clientexec location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to clientexec as follows:

$integrationtype = 'clientexec';

This setting will instantly adjust your HTML template to use Clientexec functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use Clientexec pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by Clientexec.

2) Install The Clientexec Integration Template

Make a full backup of your Clientexec files and database for safety

Download the HTML Template - TemplateName - Clientexec Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your Clientexec root directory. For example if Clientexec is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

Clientexec Integration Template Upload
Uploading the Clientexec Integration Template

Activate the template:

Clientexec Integration Template active
Activating the integration template.

Lastly to activate your Clientexec Integration template login to your Clientexec admin area and go to Settings > Public Style > Select your template under Template, set Primary to yes and save.

3) Integrate Your Header/Footer With Clientexec.

The final step is to apply the header/footer of your HTML Template to the Clientexec integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the Clientexec Integration box as seen below.

Clientexec Integration Box
Dev tools Clientexec Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the Clientexec integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-clientexec/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-clientexec/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-clientexec/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-clientexec/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-clientexec/integration/integration-footer.html


The integration is now completed. When you view your Clientexec you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and Clientexec (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and Clientexec is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained


WISECP Integration Installation

In this section we will show you how to integrate WISECP with your HTML Template.

This guide assumes that you already have WISECP installed. We recommend that WISECP is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set WISECP as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_wisecp and $path_html_wisecp variables within this file to your WISECP install location (without the end /):

$path_php_wisecp = '/home/CPANELUSERNAME/public_html/clients';
$path_html_wisecp = '/clients';

The above example should be used if you have installed WISECP in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your WISECP location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to wisecp as follows:

$integrationtype = 'wisecp';

This setting will instantly adjust your HTML template to use WISECP functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use WISECP pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by WISECP.

2) Install The WISECP Integration Template

Make a full backup of your WISECP files and database for safety

Download the HTML Template - TemplateName - WISECP Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your WISECP root directory. For example if WISECP is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

WISECP Integration Template Upload
Uploading the WISECP Integration Template

Activate the template:

WISECP Integration Template active
Activating the integration template.

Lastly to activate your WISECP Integration template login to your WISECP admin area and go to Settings > Theme/Customization > Manage Theme > Click the apply button for your theme.

3) Integrate Your Header/Footer With WISECP.

The final step is to apply the header/footer of your HTML Template to the WISECP integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the WISECP Integration box as seen below.

WISECP Integration Box
Dev tools WISECP Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the WISECP integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/templates/website/templatename_html_integration_wisecp/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/templates/website/templatename_html_integration_wisecp/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/templates/website/templatename_html_integration_wisecp/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/templates/website/templatename_html_integration_wisecp/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/templates/website/templatename_html_integration_wisecp/integration/integration-footer.html


The integration is now completed. When you view your WISECP you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and WISECP (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and WISECP is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained


HostBill Integration Installation

In this section we will show you how to integrate HostBill with your HTML Template.

This guide assumes that you already have HostBill installed. We recommend that HostBill is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set HostBill as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_hostbill and $path_html_hostbill variables within this file to your HostBill install location (without the end /):

$path_php_hostbill = '/home/CPANELUSERNAME/public_html/clients';
$path_html_hostbill = '/clients';

The above example should be used if you have installed HostBill in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your HostBill location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to hostbill as follows:

$integrationtype = 'hostbill';

This setting will instantly adjust your HTML template to use HostBill functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use HostBill pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by HostBill.

2) Install The HostBill Integration Template

Make a full backup of your HostBill files and database for safety

Download the HTML Template - TemplateName - HostBill Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your HostBill root directory. For example if HostBill is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

HostBill Integration Template Upload
Uploading the HostBill Integration Template

Activate the template:

HostBill Integration Template active
Activating the integration template.

Lastly to activate your HostBill Integration template login to your HostBill admin area and go to Settings > General Settings > Select your template under Client Area template and save.

3) Integrate Your Header/Footer With HostBill.

The final step is to apply the header/footer of your HTML Template to the HostBill integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the HostBill Integration box as seen below.

HostBill Integration Box
Dev tools HostBill Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the HostBill integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-hostbill/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-hostbill/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-hostbill/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-hostbill/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/templates/templatename-html-integration-hostbill/integration/integration-footer.html


The integration is now completed. When you view your HostBill you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and HostBill (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and HostBill is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained

BoxBilling Integration Installation

In this section we will show you how to integrate BoxBilling with your HTML Template.

This guide assumes that you already have BoxBilling installed. We recommend that BoxBilling is installed in a sub-directory such as domain.com/clients/ (with the HTML template installed on domain.com).

1) HTML Template Changes

The first step is to set BoxBilling as the software used within your HTML Template.

Open the following file:

/public_html/libs/settings.php

Update the $path_php_boxbilling and $path_html_boxbilling variables within this file to your BoxBilling install location (without the end /):

$path_php_boxbilling = '/home/CPANELUSERNAME/public_html/clients';
$path_html_boxbilling = '/clients';

The above example should be used if you have installed BoxBilling in public_html/clients/ (domain.com/clients/). Replace CPANELUSERNAME with your cPanel username. This will set the paths of all functionality links (client area, account, knowledgebase, tickets etc) to your BoxBilling location.

If you run into any issues please open a support ticket or refer to our guide: finding directory path

Set the $integrationtype variable to boxbilling as follows:

$integrationtype = 'boxbilling';

This setting will instantly adjust your HTML template to use BoxBilling functionality and URLs (for example setting Contact, View Cart & Client Area links in the top right to use BoxBilling pages using the path you set in step 2.). It will also remove any example links/content in HTML Template that is not supported by BoxBilling.

2) Install The BoxBilling Integration Template

Make a full backup of your BoxBilling files and database for safety

Download the HTML Template - TemplateName - BoxBilling Integration.zip file from inside your Zomex.com account.

Extract the ZIP file to your desktop

Upload the contents of the upload directory to your BoxBilling root directory. For example if BoxBilling is installed at domain.com/clients the directory to upload to would be:

/public_html/clients/

BoxBilling Integration Template Upload
Uploading the BoxBilling Integration Template

Activate the template:

BoxBilling Integration Template active
Activating the integration template.

Lastly to activate your BoxBilling Integration template login to your BoxBilling admin area and go to Settings > All Settings > Theme > Click the Set as default button next to the template.

3) Integrate Your Header/Footer With BoxBilling.

The final step is to apply the header/footer of your HTML Template to the BoxBilling integration.

Visit the following URL of your HTML Template:

https://www.yourwebsite.com/dev/

Scroll down to the Software Integrations section where you will find the BoxBilling Integration box as seen below.

BoxBilling Integration Box
Dev tools BoxBilling Integration

Click on the Code button. You will then be greeted with a mostly blank page. The background of this page contains your header/footer.

HTML Template Page Source
Viewing the HTML Template page source

Right click somewhere on the page and click on View Page Source as seen above. This will open a new tab where all of the code that makes up your websites header/footer is visible:

HTML Template Source Code
HTML Template Integration Code

The next step is to copy each of the blocks of code to the BoxBilling integration template.


Head

HTML Template Head Code
HTML Template Integration Code Head

Copy the code between the <!-- -------------- HEAD -------------- --> references and paste in the following file:

/public_html/clients/bb-themes/templatename-html-integration-boxbilling/html/integration/integration-head.html


Header

HTML Template Header Code
HTML Template Integration Code Header

Copy the code between the <!-- -------------- HEADER -------------- --> references and paste in the following file:

/public_html/clients/bb-themes/templatename-html-integration-boxbilling/html/integration/integration-header.html


Content Top

HTML Template Content Top Code
HTML Template Integration Code Content Top

Copy the code between the <!-- -------------- CONTENT TOP -------------- --> references and paste in the following file:

/public_html/clients/bb-themes/templatename-html-integration-boxbilling/html/integration/integration-content-top.html


Content Bottom

HTML Template Content Bottom Code
HTML Template Integration Code Content Bottom

Copy the code between the <!-- -------------- CONTENT BOTTOM -------------- --> references and paste in the following file:

/public_html/clients/bb-themes/templatename-html-integration-boxbilling/html/integration/integration-content-bottom.html


Footer

HTML Template Footer Code
HTML Template Integration Code Footer

Copy the code between the <!-- -------------- FOOTER -------------- --> references and paste in the following file:

/public_html/clients/bb-themes/templatename-html-integration-boxbilling/html/integration/integration-footer.html


The integration is now completed. When you view your BoxBilling you should now see your template design displayed and integrated with your HTML Template. The links in the menus and footer should work correctly going between the main HTML Template (e.g Company, Web Hosting) and BoxBilling (e.g Client Area, Cart).

On-going changes to your header/footer

The integration between your HTML Template and BoxBilling is static. If/when you make changes to your websites header/footer (e.g edit the menu) you will need to re-process the code in step 3. Generally this would not be too frequently changed after you have launched your business. Learn more about the software integration, how it works and why we don't automatically sync these changes here:

Software Integration Explained

Comments

If you have any questions please leave a comment below or contact our support.