Introduction
Introduction This document is intended to instruct users on how to utilize the DocXsite API. Users may use this document as a guide for when operating on DocXsite’s platform. This guide contains key features on the API, definitions and images that correspond to specific features.
Why integrate with DocXsite?
Ease of integration: simple API call lets you build websites in no time! Supports dynamic data, images and text - unlimited support for any type of content.
Grow faster: Use DocXsite’s platform to reach more customers by connecting to the market advantages. Focus your energies on selling your services and allow DocXsite to handle the hassle of the behind technical work.
One point sale: Host and control your customer websites under one account. Use DocXsite’s Live View technology to maintain dynamic content and template design.
Rich earning potential: Earn up to 20% referral rate on hosting plans + up to 80% for each Temple sale.
Key concept using DocXsite and API calls
The templates on DocXsite are essentially what create your website. DocXsite has a large selection of templates in every category listed. You can find a template that best suits your needs by browsing through each category. Once you have chosen the perfect one, you may create a DocXsite website out of it. Every Template has an owner (account) who created the template.
Users also have the option to create their own template and be a template owner by selecting the “vinyl-template.docxsite.com” as the base template.
Template owners may also have the option to list it on the market to allow other users to purchase it for use (see market_template method for more info). Every DocXsite website that was created out of a template earns royalty fee described above.
There are two ways to work on DocXsite:
- DocXsite Dashboard.
- API calls.
In this guide we will cover the API calls. Before using the API you must have an active account with us and a valid API key:
Generate API Key
To generate an API key, first log-in to your account, click on the user icon (right-top corner) and select API-keys and credentials”. In the API-keys and credentials” dialog, click “Create” and follow the instructions on the screen. You can generate multiple keys and use them in the API call as needed. Once you have the Api-key, you ready to go with DocXsite API.
API usage
Before using the API, log in to your dashboard and retrieve your API key from the top right corner user menu.
1. Create your own template
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=create_template \
-d plan=ultimate
Reponse
{
"code": 1000,
"desc": "Success",
"info": {"id": "[your_template_id].docxsite.net"}
}
Users have the option to create their own template by downloading the “Vinyl template”. In order for a website to be created users who download the vinyl template must create a Header,Home Page, Footer, Site and CSS_CLASSES. These 5 important components are the basic makeup of the website and must be included in the vinyl template in order for the website to be created.
2. Edit your new template
The template that you just created has a basic structure (see DocXsite Basic Structure section for more info) and needs to be modified in the dashboard at
https://[your_template_id].docxsite.net/ds-admin
(see help.docxsite.com/dashboard for more info).
3. Create your first DocXsite website
Create Preview cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=create_preview_docxsite \
-d domain_name=abc.com \
-d data-company="ABC Company."
Create Preview Reponse
{
"code":1100,
"desc":"Success",
"info":{
"preview_docxsite_id":"ds-1567205068049-gzvvl",
"url":"https://docxsite.net/docxsite/temp_sites/ds-1567205068049-gzvvl?id=ds-1567205068049-gzvvl",
"server_ip":"45.55.121.165",
"server_location":"United States, New York"
}
}
There is a 2 step process to create a DocXsite website.
1. Create a preview with all the information inside
It is important to separate step 1 and 2. If the user doesn't like the template created then instead of activating it (next step), they could delete and recreate a new DocXsite with their added changes.
2. Activate the DocXsite
Before activating a DocXsite, make sure the DNS record is pointed to the IP returned in the preview DocXsite.
This method is used to activate a docxsite that is in the preview status.
Activate Preview cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=activate_preview_docxsite
Activate Reponse
{
"code": 1200,
"desc": "Success",
"info": {
"ip" : [ The server Ip Address ],
"country" : "US",
"state" : "NY",
"domain_name" : "[made-up-domain-name].docxsite.net"
}
}
3. Completed
Now that your DocXsite website is created under your account, you may now access your dashboard with the link in the response activate and enjoy all the exclusive features DocXsite offers.
More API options
To add additional functionalities to your DocXsite, such as adding pages or changing an entry etc., explore our documentation below for more API calls.
API Structure
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=rename_file
Reponse:
{
"code": "[Positive value = Success, Negative value = Error]",
"desc": "[Response description]",
"info": "[Additional return info]"
}
Example:
Post:
{
"api-key": "1599-f451875f148b53d1c37a65d5953e3741",
"method": "create_template",
"data": {"template_id": "locksmith-12345"}
}
Response:
{
"code": 1000,
"desc": "Success",
"info": {"id": "locksmith-12345.docxsite.net"}
}
Here is the common data structure of the API usage:
Post
| Parameter | Description |
|---|---|
api-key |
(string) insert API Key |
method |
(string) method to use in the request |
data |
(object) data structured such as [{key:val,...}] |
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) Additional return info |
API Methods
Create Template
Method Name: create_template
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=create_template
This method is to create DocXsite template from source template. The source template must be DocXsite’s qualified template or any other template under the account’s ownership.
Post
| Parameter | Description |
|---|---|
new_template_id |
determines the name of the new template. It is optional and if not posted then DocXsite will auto generate template_id. If users already have a domain name that is available, they may write in the box and DocXsite will use it. However, if the domain name is not available (already taken or haven't been purchased), you will receive an error email back asking to change the domain name for one that is available. Or, users can always leave it blank and DocXsite will do the job to generate one for you. (optional) (defualt: the curl request ) |
hosting_plan |
Select hosting plan for the template (see hosting plan section for more info). Valid values are: “Basic”, “SEO”, “PRO” or “Ultimate”. (optional) (defualt: basic ) |
Response:
{
"code": 1000,
"desc": "Success",
"info": {"id": "[your_template_id].docxsite.net"}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) Additional return info |
Create Preview DocXsite
Method Name: create_preview_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-X POST -H "Content-Type: multipart/form-data" \
-F api-key=api_key \
-F method=create_preview_docxsite \
-F data-company="ABC Company." \
-F data-logo="file=@/Desktop/somefile.png"
Users have the ability to create a preview DocXsite from template. The Template must meet the following criteria:
- Listed in docxsite.com
- Unlisted but authorized for usage by the owner
- Authorized by owner to selected accounts.
- Template under your account.
Post
| Parameter | Description |
|---|---|
domain_name |
(string) a valid domain name for the website |
country_code |
(string) the Country where the website will be served. List of codes can be found at: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes |
state_code |
(string) the State where the website will be served, list of codes [USPS] can be found at: https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations |
data |
(object) pairs of keys and values to be sent to the template. (Pictures values need base64 or url where the picture hosted.) |
recipient_email |
(string) set email address to assign the preview DocXsite. That will create an account for the recipient based on the email address. |
send_email_notification |
(boolean) true/false, true = will send an email to the recipient. |
email_message |
(string) type message for the email. |
minute_to_expire |
(date) The expiration date to delete the preview DocXsite. When blank, the preview DocXsite will need to be deleted manually. |
Response:
{
"code":1100,
"desc":"Success",
"info":{
"preview_docxsite_id":"ds-1567205068049-gzvvl",
"url":"https://docxsite.net/docxsite/temp_sites/ds-1567205068049-gzvvl?id=ds-1567205068049-gzvvl",
"server_ip":"45.55.121.165",
"server_location":"United States, New York"
}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) The preview DocXsite id, the preview DocXsite url, ip address where the final DocXsite will be hosted, country, state. |
Activate Preview DocXsite
Method Name: activate_preview_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=activate_preview_docxsite
Before activating a DocXsite, make sure the DNS record is pointed to the IP returned in the preview DocXsite.
This method is used to activate a docxsite that is in the preview status
Post
| Parameter | Description |
|---|---|
hosting_plan |
select hosting plan for the template (see hosting plan section for more info). Valid values are: “Basic”, “SEO”, “PRO” or “Ultimate”. (Default Baisc) |
preview_docxsite_id |
(string) ID returned in the preview DocXsite (required) |
domain_name |
(string) Domain name to connect the DocXsite |
country_code |
(string) the Country where the website will be served. List of codes can be found at: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes |
state_code |
(string) the State where the website will be served, list of codes [USPS] can be found at: https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations |
Delete Preview DocXsite
Method Name: delete_preview_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=delete_preview_docxsite \
-d preview_docxsite_id=ds-1567205068049-gzvvl
Use this method to delete a DocXsite preview.
Post
| Parameter | Description |
|---|---|
preview_docxsite_id |
the preview_docxsite_id as returned from the “create_preview_docxsite” method. |
Get DocXsite Info
Method Name: get_docxsite_info
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=get_docxsite_info \
-d docxsite_id=vinyl-template.docxsite.net
Use this method to retrieve DocXsite info.
Post
| Parameter | Description |
|---|---|
docxsite_id |
(string) could be “template_id”, “docxsite_preview_id” or “docxsite_id” |
Response:
{
"code":1410,
"desc":"success",
"info":{
"url":"https://vinyl-template.docxsite.net",
"server_ip":"45.55.121.165",
"site_country":"US",
"site_state":"FL",
"vars":{
"company":{
"label":"Company",
"type":"050",
"require":true,
"href":"",
"size":"",
"placeholder":"Abc Toys Inc."
},
"tel":{
"label":"Telephone",
"type":"TEL",
"require":true,
"href":"",
"size":"",
"placeholder":"(XXX) XXX-XXXX"
},
"logo":{
"label":"Logo",
"type":"LGO",
"require":true
},
"email":{
"label":"Email",
"type":"EMA",
"require":true
}
}
}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
DocXsite URL, IP, Country, State |
Alter DocXsite Entry
Method Name: alter_docxsite_entry
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=alter_docxsite_entry \
-d alter_method=update \
-d entry_name=company \
-d data={"company":"abc"}
Alter DocXsite entries (See Template/Website structure for more details). Altering entrees such as a page or a widget etc. (See Template/Website structure for more details).
Post
| Parameter | Description |
|---|---|
alter_method |
(string) [create/update/delete] |
entry_name |
(string) entry name as listed in DocXsite Template structure |
data |
(object) data to pass |
Publish DocXsite
Method Name: publish_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=publish_docxsite \
-d apply_to_all_related_docxsites=false
Use this method to publish changes made by the alter_docxsite_entry method. This action perform page indexing and other essential operations that can take several minutes to complete.
Post
| Parameter | Description |
|---|---|
apply_to_all_related_docxsites |
(boolean) true/false |
Response:
{
"code": 1000,
"desc": "Success",
"info": { "[list of docxsite reflected by this action]"}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) list of docxsite reflected by this action |
Change Ownership
Method Name: change_ownership
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=change_ownership \
-d new_account_id=accountid
Change the ownership of a DocXsite to another account.
Post
| Parameter | Description |
|---|---|
new_account_id |
(string) the recipient account id |
Get DocXsite Entry
Method Name: get_docxsite_entry
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=get_docxsite_entry \
-d entry_name=company
This method retrieves the data stored in the entre.
Post
| Parameter | Description |
|---|---|
entry_name |
(string) entry name as listed in DocXsite Template structure (optional) |
Response:
{
"code": 1800,
"desc": "Success",
"info": { "[entry object]"}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(string) entry name as listed in DocXsite Template structure (optional) |
If there is no entree specified, the response will return all the entries.
Delete DocXsite
Method Name: delete_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=delete_docxsite
Delete DocXsite and all dependencies from DocXsite’s servers.
Suspend DocXsite
Method Name: suspend_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=suspend_docxsite \
-d suspend_code=410
This method suspends a DocXsite temporarily. Users will see a 404 message.
Post
| Parameter | Description |
|---|---|
suspend_code |
(number) see list below |
suspend_reason |
(string) free description (optional) |
suspend_code
| codes | Description |
|---|---|
410 |
suspended balance |
420 |
suspended abuse |
430 |
suspended other |
Close DocXsite
Method Name: close_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=close_docxsite \
-d close_message="my website is cool"
Close DocXsite temporarily.
The website will be replaced with landing page “Website Temporarily unavailable”.
Post
| Parameter | Description |
|---|---|
close_message |
(string) Message to show on the landing page |
resume_docxsite_minutes |
(number) minutes to auto resume the website (optional) |
Response:
{
"code":2100,
"desc":"Success",
"info":{
"expire_date":"2019-08-28 16:46"
}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(date) Returns the date of auto resume |
The website will be replaced with landing page "Website unavailable".
Resume DocXsite
Method Name: resume_docxsite
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=resume_docxsite
Resume DocXsite from down state.
Post
| Parameter | Description |
|---|---|
resume_reason |
(string) Internal description (optional) |
Response:
{
"code": 1100,
"desc": "Success",
"info": { "[list of vars key,value]"}
}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) list of vars key, value |
Change Plan
Method Name: change_hosting_location
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=change_plan \
-d new_hosting_plan=ultimate
This method is for changing hosting plan. If hosting plan was changed, then the usage amount will be applied to the new hosting amount.
Post
| Parameter | Description |
|---|---|
new_hosting_plan |
(string) select hosting plan for the DocXsite website (see hosting plan section for more info). |
Change Hosting Location
Method Name: change_hosting_location
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=change_hosting_location \
-d country_code=US \
-d state_code=FL
This method is used to change the current hosting location to another location. For example, if a DocXsite is hosted in NYC, this method allows it to be relocated to SFO.
Country/State is where the website will be served. DocXsite will optimize the nearest server for best performance.
Post
| Parameter | Description |
|---|---|
country_code |
(string) the Country where the website will be served. List of codes can be found at: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes |
state_code |
(string) the State where the website will be served, list of codes [USPS] can be found at: https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations |
Response:
{
"code": 1400,
"desc": "Success",
"info": {
"ip": "[ip server address where the DocXsite is be hosted]",
"country" : "US",
"state" : "NY"
}
}
Reponse
| Reponse | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(object) IP, Country, State of the website location |
Change Domain
Method Name: change_domain
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=change_domain \
-d new_domain_name=abc.com
This method is used to change the current DocXsite domain name to a new domain name.
Post
| Parameter | Description |
|---|---|
new_domain_name |
(string) the new domain name to be changed to. |
Upload File
Method Name: upload_file
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-X POST -H "Content-Type: multipart/form-data" \
-F api-key=api_key \
-F method=upload_file \
-F "file=@/Desktop/somefile.png"
This method is used to upload file to the "uploads" folder of the DocXsite. The response will return the URL in which it could be used to preview the uploaded files.
Post
| Parameter | Description |
|---|---|
/Desktop/somefile.png |
(string) The image path on disk. |
Response:
{
"code":2700,
"desc":"Success",
"info":{
"url":"https:vinyl-template.docxsite.net/uploads/somefile.png",
"size":857903
}
}
Reponse
| Object | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info > url |
(string) Url of uploaded file |
info > size |
(string) Size of uploaded file |
Delete File
Method Name: delete_file
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=delete_file \
-d file_name="somefile.png"
This method is used to delete files from the “uploads” folder of the posted DocXsite.
Post
| Parameter | Description |
|---|---|
file_name |
(string) the file name to delete (with the extension). |
Rename File
Method Name: rename_file
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=rename_file \
-d file_name="somefile.png" \
-d new_file_name="somefile.png"
This method is used to rename files from the “uploads” folder of the DocXsite.
Post
| Parameter | Description |
|---|---|
file_name |
(string) the file name to renamed (with the extension). |
new_file_name |
(string) the new file name to rename to (with the extension). |
Optimize Picture
Method Name: optimize_picture
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=optimize_picture \
-d file_name="somefile.png"
This method is used to optimize the picture size that is located in the “uploads” folder of a DocXsite. The response will return the current and the new size of a given picture.
Post
| Parameter | Description |
|---|---|
file_name |
(string) the file name to optimize (with the extension eg. .png, .jpg). |
Response:
{
"code":3000,
"desc":"Success",
"info":{
"url":"https://vinyl-template.docxsite.net/uploads/somefile.png",
"size_before":857903,
"size_after":519356
}
}
Reponse
| Object | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info > url |
(string) returned url |
info > size_before |
(number) size before Optimize |
info > size_after |
(number) size after Optimize |
Get DocXsite List
Method Name: get_docxsite_list
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=get_docxsite_list
Returns all associated DocXsites.
Response:
{
"code":3100,
"desc":"Success",
"info":[
"example.docxsite.net"
]
}
Reponse
| Object | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info |
(array) returned urls |
Get DocXsite Server
Method Name: get_docxsite_server
cURL
curl https://vinyl-template.docxsite.net/ds-api \
-d api-key=api_key \
-d method=get_docxsite_server \
-d country_code=US \
-d state_code=FL \
Returns the nearest Server IP to the country and state post.
Response:
{
"code":3200,
"desc":"Success",
"info":{
"server_ip":"45.55.121.165",
"server_location":"United States, New York"
}
}
Reponse
| Object | Description |
|---|---|
code |
(number) Positive value = Success, Negative value = Error |
desc |
(string) Response description |
info > server_ip |
(string) the IP of the server. |
info > server_location |
(string) the location of the server. |
DocXsite Structure
The basic structure DocXsite must include: header, footer, site, css classes, and a home page in order for a website to be created. These 5 important components are the basic makeup of your website and MUST be included in your vinyl template in order for a website to be created.
HEADER
Users can pick from DocXsite’s built in header or import a custom header. Here is an example of the built-in header.
Header Structure:
{
"style": {
"fore_color": "",
"background_color": "%site_background_color",
"background_image": "",
"font_family": "",
"css_class": ""
},
"telephone": {
"number": "%tel",
"style": {
"fore_color": "%highlight_text_color",
"background_color": "%highlight_color",
"background_image": "",
"font_family": "",
"css_class": ""
}
},
"logo": {
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"css_class": ""
}
},
"menu": {
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"css_class": "",
"items": {
"fore_color": "%site_text_color",
"fore_color_hover": "%highlight_text_color",
"background_color": "",
"background_color_hover": "%highlight_color",
"background_image": "",
"font_family": ""
},
"sub_items": {
"fore_color": "%highlight_text_color",
"fore_color_hover": "%site_text_color",
"background_color": "%highlight_color",
"background_color_hover": "%site_background_color",
"css_class": "",
"background_image": "",
"font_family": ""
}
},
"items": [
{
"name": "Home",
"href": "home"
}
]
}
}
Header Components
| Components | Description |
|---|---|
telephone |
set up/style for the telephone, for best practices, insert %tel in the number value. |
logo |
styling for the logo. |
menu |
set up/style for the menu items and sub items. |
menu > items |
items rendered in the menu, please reference to the table below to view the rendering options. |
Menu
| Items | Description |
|---|---|
name |
(string) the name is whats desplayed when redering the item. |
href |
(string) the href is displayed in the URL search while page (below) is the actual page navigation. If the page (below) is empty, you much specify a DocXsite page entry. If the page (below) is filled, is masked. |
page |
(string) the page entree. |
arguments |
(object) passing arguments to the page through the click. |
menu > items > sub_menu_items |
(array) to create a sub menu for one of the items you need to create a sub_menu_items array, then insert name, href and page. |
To better understand how the items are built and rendered please refer to the items section in the code.
Example of how the built in header looks like
FOOTER
Users can pick from DocXsite’s built in footer or importing a custom footer. Here is an example of the built-in footer.
FOOTER Structure:
{
"style": {
"fore_color": "%content_text_color",
"background_color": "%content_background_color",
"background_image": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_filter": "",
"font_family": "",
"css_class": ""
}
},
"menu": {
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"align": "",
"items": {
"fore_color": "",
"fore_color_hover": "",
"background_color": "",
"background_color_hover": "",
"background_image": "",
"align": "",
"font_family": "",
"css_class": "",
"width": ""
},
"sub_items": {
"fore_color": "",
"fore_color_hover": "",
"background_color": "",
"background_color_hover": "",
"background_image": "",
"font_family": "",
"css_class": "",
"align": ""
}
},
"items": [
{
"name": "Home",
"href": "home"
}
]
},
"contact_info": {
"name": "%company",
"address": "%location-address",
"email": "%email",
"tel": "%tel",
"style": {
"fore_color": "%highlight_text_color",
"background_color": "%highlight_color",
"background_image": "",
"css_class": "",
"width": "",
"align": "center",
"font_family": "",
"items": {
"fore_color": "%highlight_text_color",
"fore_color_hover": "",
"background_color": "%highlight_color",
"background_color_hover": "",
"background_image": "",
"font_family": ""
}
},
"social_media": {
"items": {
"google": "",
"facebook": "",
"twitter": "",
"linkedin": "",
"youtube": "",
"yelp": "",
"houzz": ""
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": ""
}
},
"show_credit_cards": false
}
}
Header Components
| Components | Description |
|---|---|
menu |
set up/style for the menu items and sub items. |
contact_info |
set up/style for the information in the footer. |
social_media |
set up for the social media. |
Menu
| Items | Description |
|---|---|
name |
(string) the name is whats desplayed when redering the item. |
href |
(string) the href is displayed in the URL search while page (below) is the actual page navigation. If the page (below) is empty, you much specify a DocXsite page entry. If the page (below) is filled, is masked. |
page |
(string) the page entree. |
arguments |
(object) passing arguments to the page through the click. |
menu > items > sub_menu_items |
(array) to create a sub menu for one of the items you need to create a sub_menu_items array, then insert name, href and page. |
To better understand how the items are built and rendered please refer to the items section in the code.
Contact Info
| Items | Description |
|---|---|
name |
(string) |
address |
(string) |
email |
(string) |
tel |
(string) |
Social Media
| Items | Description |
|---|---|
google |
(string) URL (https://) |
facebook |
(string) URL (https://) |
facebook |
(string) URL (https://) |
linkedin |
(string) URL (https://) |
youtube |
(string) URL (https://) |
yelp |
(string) URL (https://) |
houzz |
(string) URL (https://) |
Credit Cards Icons
| Items | Description |
|---|---|
show_credit_cards |
(boolean) true/false |
Example of how the built in footer looks like
SITE
SITE Structure:
{
"default_page": "home",
"info": {
"domain": "%domain_name",
"name": "%company",
"owner": "",
"address": "%address",
"email": "%email",
"tel": "%tel",
"category": ""
},
"allow_live_preview_domains":"",
"micro_data_itemtype": "",
"google_business_verifintion_code": "",
"google_tag_manager_id": "",
"common": {
"favicon": "%logo",
"logo": "%logo",
"logo_href": "%logo_href"
},
"desktop": {
"google_fonts": [
"%site_font_family"
],
"external_css": [],
"external_js": [],
"default_fore_color": "%site_text_color",
"default_background_color": "%site_background_color",
"default_background_image": "",
"default_font_family": "%site_font_family",
"default_css_class": "text-inset-css",
"google_analytics_tracking_id": "",
"arguments": {
"device": "d-"
}
},
"mobile": {
"google_fonts": [
"%site_font_family"
],
"external_css": [],
"external_js": [],
"default_fore_color": "%site_text_color",
"default_background_color": "%site_background_color",
"default_background_image": "",
"default_font_family": "%site_font_family",
"default_css_class": "text-inset-css",
"google_analytics_tracking_id": "",
"arguments": {
"device": "m-"
}
},
"arguments": {
}
}
SITE Components
| Components | Description |
|---|---|
default_page |
default landing page |
info |
info for the website |
allow_live_preview_domains |
domain name |
micro_data_itemtype |
micro data support (website industry) |
google_business_verifintion_code |
google verification code |
google_tag_manager_id |
google tag manager |
common |
common assets used in the website |
common > favicon |
favicon |
common > logo |
logo |
common > logo_href |
logo href upon clicking |
desktop |
DESKTOP SETTINGS |
desktop > google_fonts |
fonts import |
desktop > external_css |
importing external css to the website |
desktop > external_js |
importing external js to the website |
desktop > default_fore_color |
default color |
desktop > default_background_color |
default background color |
desktop > default_background_image |
default background image |
desktop > default_font_family |
default font family |
desktop > default_css_class |
default class |
desktop > google_analytics_tracking_id |
google analytics id |
desktop > arguments |
desktop device detect |
mobile |
MOBILE SETTINGS |
mobile > google_fonts |
fonts import |
mobile > external_css |
importing external css to the website |
mobile > external_js |
importing external js to the website |
mobile > default_fore_color |
default color |
mobile > default_background_color |
default background color |
mobile > default_background_image |
default background image |
mobile > default_font_family |
default font family |
mobile > default_css_class |
default class |
mobile > google_analytics_tracking_id |
google analytics id |
mobile > arguments |
mobile device detect |
arguments |
variables for site |
CSS_CLASSES
CSS Classes enables full customization experience for both desktop and mobile.
CSS_CLASSES Structure:
{
"desktop": {},
"mobile": {}
}
CSS_CLASSES Components
| Components | Description |
|---|---|
desktop |
custom classes for desktop |
mobile |
custom classes for mobile |
DATA
| Components | type | Description |
|---|---|---|
TXT |
textarea | Plain text area |
RTF |
textarea | Rich Text Format (RTF) |
XXX |
input | Text |
NUM |
input | Number |
TEL |
input | Telephone number (xxx) xxx-xxxx |
NUM |
input | Number |
URL |
input | URL https://domain.com |
IMU |
input | Image URL |
DNA |
input | Domain name domain.com |
MP4 |
file | MP4 file |
IMX |
file | XSmall Image (30px) |
IMS |
file | Small Image (150px) |
IMM |
file | Medium Image (400px) |
IML |
file | Large Image (800px) |
IMH |
file | HD Image (1920px) |
IMG |
file | Any Size Image |
YTB |
input | YouTube video Id: RGynCZn7UpE |
CLR |
input | Color |
EMA |
input | Email email@server.com |
PAG |
input | Page |
Page Entry
Page Structure:
{
"name": "", // page name
"style": { // page style
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
},
"title": {
"style": { // header section settings
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"fit_background_width": "screen", // header section width
"fit_background_height": "screen_half", // header section height
"animation": "fade_out"
},
"items": [ // items for header section
{
"main": "",
"sub": "",
"description": "",
"html": "",
"background_image": "",
"button": "",
"button_href": "",
"style": {
"background_parallax": "",
"background_color": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"animation": "",
"vertical_align": "", // valign text
"horizontal_align": "", // horizontal align text
"main": { // style for main (title)
"fore_color": "",
"align": "",
"background_color": "",
"font_family": "",
"css_class": ""
},
"sub": { // style for main (subtitle)
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": ""
},
"description": { // style for description
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": ""
},
"button": { // style for button
"fore_color": "",
"background_color": "",
"fore_color_hover": "",
"background_color_hover": "",
"font_family": "",
"css_class": ""
},
"html": { // style for html
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": ""
}
}
}
]
},
"seo": {
"meta_keywords": "", // meta keyword for page
"meta_description": "", // meta description for page
"shortcut_image": "" // meta picture for page
},
"content": [
// all widgets inserted here
]
}
Layout Components
| Components | Description |
|---|---|
title |
title is first component rendered under the header. Its like a slider |
title > style |
the setup/design of the item. |
title > items |
to better understand how the items are built and rendered please refer to the items section in the code. |
seo |
the page SEO, includes meta_keywords, meta_description, shortcut_image. |
content |
all the widgets of the page belong. |
title > style (main usage)
| Style | Description |
|---|---|
fit_background_width |
content / screen |
fit_background_height |
screen / screen_half / conetnt / content_half / custom PX |
title
| Items | Description |
|---|---|
main |
(string) H1 tag of the page, main title. |
sub |
(string) sub title |
description |
(string) description |
html |
(string) render html |
background_image |
(string) background image |
button |
(string) button |
button_href |
(string) button href |
seo
| Item | Description |
|---|---|
meta_keywords |
(string) meta keywords |
meta_description |
(string) meta description |
shortcut_image |
(string) shortcut image, this is an option to customize the preview of the website when its shares, Preview in a thumbnail. |
Example of the page layout
Widget Entry
Widgets can be set either global or private to the page. All widgets are inserted in the content section of the page.
Global Widget
"content": [ // page content
{
"widget": "%some-widget"
}
]
Private Widget
"content": [ // page content
{
"widget": "separator",
"header": {
"title": "",
"description": ""
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
}
}
]
Built-in Variables
DocXsite provides built-in variables which provides standard color palette, fonts, device detect.
| Variables | Description |
|---|---|
highlight_color |
(string) #000000, |
site_background_color |
(string) #cc211e |
content_background_color |
(string) #ffffff |
banner_background_color |
(string) #ffffff |
content_title_color |
(string) rgba(0,0,0,0.6) |
content_sub_title_color |
(string) rgba(0,0,0,0.8) |
banner_title_color |
(string) #000000 |
banner_sub_title_color |
(string) rgba(0,0,0,0.8) |
site_title_color |
(string) rgba(255,255,255,0.6) |
site_sub_title_color |
(string) rgba(255,255,255,0.8) |
site_text_color |
(string) #FFFFFF |
content_text_color |
(string) #000000 |
banner_text_color |
(string) #000000 |
highlight_text_color |
(string) #FFFFFF |
site_font_family |
(string) Barlo |
DocXsite’s Built-In Widgets
The DocXsite built-in widgets are the easiest way to create an awesome and responsive website without the need of writing a single line of HTML!
The widgets can be embedded inside a Page entry or outside as Widget entry (%widget), in which it could be called from other pages.
Widget is an object (JSON) element with predefined properties that can be fully customized upon user’s needs.
Widgets can be Downloaded/Uploaded from/to DocXsite’s Plugin store.
Widget properties dictionary
| Property | Type | Value | Notes |
|---|---|---|---|
picture |
String | Url or ~/uploads-path | |
name |
String | Name of the item | |
title |
String | Free text | |
href |
String | Url / page-name | |
page |
String | Page name | Page entry |
arguments |
Object | “key”:”value” | |
picture_filter |
String | CSS3 filter attribute |
|
description |
String | Url or ~/uploads-path | |
css_classes |
Object | {“desktop”:{“key”:”value”},“mobile”:{“key”:”value”}) | “value”=”color: red; align: right;;” |
fore_color |
String | hex/rgb/color_name | |
background_color |
String | hex/rgb/color_name | |
font_family |
String | font name | Google fonts |
background_image |
String | Url or ~/uploads-path | |
width |
String | Px or % | |
daily_grow |
Number | 1-999 | |
value |
Number | Any | |
value_date |
Number | 20-1-2019 | |
fa |
String | Icon name | Font awesome |
author |
String | Free text | Name of the author |
rating |
Number | 1-5 | |
background_parallax |
boolean | true/false | |
html_file |
String | Url or ~/uploads-path | |
icon |
String | Url or ~/uploads-path/ | image |
css_url |
Object | {"desktop":[], "mobile": []) | |
js_url |
Object | {"desktop": [], "mobile":[]) | |
google_fonts |
Array | List of google fonts names | |
data |
Object | Set variables values | “key”:”value” |
arguments |
Object | Data to send over a page | “key”:”value” |
css_class |
String | CSS class name | |
items |
Array | Collection of values, objects | |
widget |
String | Widget Type | “html”,”feature_gallery”,.... |
align |
String | Text align | Left/Right/Center/Justify |
Widget Header structure
Widget Header structure
{
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "%content_title_color",
"background_color": "",
"font_family": "",
"css_class": "widget-title-css",
"align": "center",
"width": ""
},
"description": {
"fore_color": "%content_sub_title_color",
"background_color": "",
"font_family": "",
"css_class": "titles-css",
"align": "center",
"width": ""
}
}
}
Every widget design to have header structure:
| Items | Description |
|---|---|
title |
(string) show the title text in <h2> element |
description |
(string) show the description text in <p> element |
style |
(object) styling the title and the description elements. |
Widget Plugins structure
Widget Plugins structure
{
"plugin": {
"css_classes": {
"desktop": {},
"mobile": {}
},
"css_url": {
"desktop": [],
"mobile": []
},
"js_url": {
"desktop": [],
"mobile": []
},
"google_fonts": [],
"data": {}
}
}
Provide info to load local resources to the widget.
| Items | Description |
|---|---|
css_classes |
(object) css classes to apply on the widget |
css_url |
(object) external css to load |
js_url |
(object) external js to load |
google_fonts |
(object) google_fonts to load |
data |
(object) data to set for the widget |
Widget Style structure
Widget Plugins structure
{
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "%content_background_color",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "services_style",
"align": "center"
},
"item": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "350px",
"height": "520px",
"css_class": "",
"align": "center",
"picture": {
"css_class": "",
"align": "left",
"width": "250px"
}
}
}
}
Controls the styling of the inner part of the widget and could be various on the widget type.
Widget Style structure
| Items | Description |
|---|---|
style |
(object) controls the WIDGET appearance (show in Blue) |
style -> content |
(object) controls the CONTENT appearance (show in Orange) |
style -> item |
(object) controls the ITEM/S appearance (show in Green) |
Feature Gallery
Widget Name: feature_gallery
Feature Gallery Example:
{
"widget": "feature_gallery",
"plugin": {
"css_classes": {
"desktop": {},
"mobile": {}
},
"css_url": {
"desktop": [],
"mobile": []
},
"js_url": {
"desktop": [],
"mobile": []
},
"google_fonts": [],
"data": {}
},
"header": {
"title": "%company",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center",
"width": ""
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center",
"width": ""
}
}
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"item": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "370px",
"height": "400px",
"css_class": "",
"align": "center",
"picture": {
"css_class": "",
"align": "right",
"width": "370px"
},
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center",
"width": "370px"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "right",
"width": "370px"
}
}
},
"items": [
{
"picture": "",
"name": " ",
"title": "",
"href": "",
"page": "",
"arguments": {},
"picture_filter": "",
"description": ""
}
]
}
Feature Gallery structure
Slide Gallery
Widget Name: slide_gallery
Feature Gallery Example:
{
"widget": "slide_gallery",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "justify"
}
}
},
"gallery_folder": "",
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"align": "center",
"background_filter": " ",
"font_family": "",
"css_class": ""
},
"item": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "100%",
"height": "100%",
"css_class": "",
"picture": {
"css_class": "",
"align": "left"
}
}
}
}
Slide image gallery animated random from folder by using gallery_folder
Slide Gallery structure
Separator
Widget Name: separator
Separator Example:
{
"widget": "separator",
"header": {
"title": "",
"description": ""
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
}
}
The separator is designed to make a space between the sections. You can add a title and description.
Separator structure
Counters
Widget Name: counters
Counters Example:
{
"widget": "counters",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "font_sub",
"align": "center"
}
}
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_filter": "",
"background_width": "screen",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
},
"item": {
"icon": {
"fore_color": "%banner_text_color",
"background_color": "",
"css_class": ""
},
"title": {
"fore_color": "%banner_title_color",
"background_color": "",
"css_class": ""
},
"description": {
"fore_color": "",
"background_color": "",
"css_class": ""
},
"value": {
"fore_color": "",
"background_color": "",
"css_class": ""
}
}
},
"items": [
{
"title": "",
"description": "",
"href": "",
"value": "",
"daily_grow": "",
"value_date": "",
"fa": "g"
}
]
}
Designed to make daily growth action by passing a parameter of daily_growth.
Counters structure
Person Gallery
Widget Name: person_gallery
Person Gallery Example:
{
"widget": "person_gallery",
"plugin": {
"css_classes": {
"desktop": {},
"mobile": {}
}
},
"header": {
"title": "<br>",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
}
}
},
"style": {
"layout": "0",
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"background_width": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"align": "center",
"background_filter": "",
"font_family": "",
"css_class": ""
},
"item": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "400px",
"height": "700px",
"css_class": "",
"picture": {
"css_class": "",
"align": "left"
},
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center",
"width": "300px"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "left",
"width": "300px"
},
"social_media": {
"fore_color": "",
"background_color": "",
"font_family": "",
"align": "center",
"width": "300px",
"css_class": ""
}
}
},
"items": [
{
"picture": "",
"title": "",
"description": "",
"href": "",
"picture_filter": "",
"social_media": {
"items": {
"google": "",
"facebook": "",
"twitter": "",
"linkedin": "",
"youtube": ""
}
}
}
]
}
Designed to show team or persona style, including social media buttons for each item (person).
Person Gallery structure
Reviews
Widget Name: reviews
Reviews Example:
{
"widget": "reviews",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
},
"description": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
}
}
},
"style": {
"layout": "",
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"item": {
"fore_color": "%site_text_color",
"background_color": "%site_background_color",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"align": "",
"css_class": ""
}
}
},
"items": [
{
"name": "",
"text": "",
"author": "",
"rating": "5"
}
]
}
Designed to show reviews
Reviews structure
Icon Gallery
Widget Name: icon_gallery
Icon Gallery Example:
{
"widget": "icon_gallery",
"plugin": {
"css_classes": {
"desktop": {},
"mobile": {}
},
"css_url": {
"desktop": [],
"mobile": []
},
"js_url": {
"desktop": [],
"mobile": []
},
"google_fonts": [],
"data": {}
},
"header": {
"title": "",
"description": ""
},
"style": {
"random": "1",
"fore_color": "",
"background_color": "%banner_background_color",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"background_width": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"items": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"align": "center",
"width": "300px",
"height": "600px",
"title": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"width": "250px",
"background_filter": "",
"font_family": "",
"css_class": "icon-title",
"align": "left"
},
"description": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"align": "left"
}
},
"icons": {
"fore_color": "%banner_text_color",
"background_color": "",
"css_class": ""
}
},
"items": [
{
"title": "",
"description": "",
"icon": "",
"href": "",
"fa": "",
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"width": "250px",
"height": "520px",
"font_family": "",
"css_class": "",
"icons": {
"fore_color": "",
"background_color": "",
"background_image": "",
"css_class": ""
}
}
}
]
}
Designed to show icons as picture. Please refer to font-awesome for icon usage.
Icon Gallery structure
HTML
Widget Name: html
HTML Example:
{
"widget": "html",
"html_file": "",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "left"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "justify"
}
}
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"align": "left",
"font_family": "",
"css_class": "",
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "left"
},
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"align": "left",
"height": "800px",
"background_filter": "",
"font_family": "",
"css_class": ""
}
}
}
Designed the usage of external html file as a widget and assign a section to the page. This widget includes an external css and js into the JSON
HTML structure
Button Gallery
Widget Name: button_gallery
Button Gallery Example:
{
"widget": "button_gallery",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "justify"
}
}
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": ""
},
"item": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "150px",
"height": "150px",
"css_class": "",
"title": {
"fore_color": "",
"background_image": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
}
}
},
"items": [
{
"description": "",
"title": "",
"href": "",
"page": "",
"arguments": {
"argument1": "",
"argument2": "sale"
},
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"font_family": "",
"width": "150px",
"height": "150px",
"css_class": "",
"title": {
"fore_color": "",
"background_color": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"description": {
"fore_color": "white",
"background_color": "#24346c",
"font_family": "",
"css_class": "",
"align": "center"
}
}
}
]
}
Designed to build navigation with buttons widgets.
Button Gallery structure
YouTube Gallery
Widget Name: youtube_gallery
YouTube Gallery Example:
{
"widget": "youtube",
"header": {
"title": "",
"description": "",
"style": {
"title": {
"fore_color": "%banner_title_color",
"background_color": "",
"font_family": "%site_font_family",
"css_class": "",
"align": "center",
"width": ""
},
"description": {
"fore_color": "",
"background_color": "",
"font_family": "%site_font_family",
"css_class": "",
"align": "left",
"width": ""
}
}
},
"style": {
"fore_color": "black",
"background_color": "%banner_background_color",
"background_image": "",
"align": "left",
"font_family": "%site_font_family",
"css_class": "",
"content": {
"fore_color": "black",
"background_color": "",
"background_image": "",
"align": "center",
"background_filter": "",
"font_family": "%site_font_family",
"css_class": ""
},
"items": {
"width": "900px",
"height": "400px",
"title": {
"fore_color": "black",
"background_color": "",
"font_family": "%site_font_family",
"css_class": "",
"align": "left",
"width": "140px"
}
}
},
"items": [
{
"title": "",
"youtube_id": ""
}
]
}
Designed to display a Youtube video.
YouTube Gallery structure
Coupons
Widget Name: coupons
Coupons Example:
{
"widget": "coupon",
"header": {
"title": "",
"description": ""
},
"style": {
"fore_color": "black",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"content": {
"fore_color": "black",
"background_color": "%content_background_color",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"align": "center"
},
"item": {
"fore_color": "black",
"font_family": "",
"css_class": "",
"align": "left",
"title": {
"fore_color": "black",
"font_family": "",
"css_class": "",
"align": "left"
},
"description": {
"fore_color": "black",
"font_family": "",
"css_class": "",
"align": "left"
}
}
},
"terms": "",
"items": [
{
"title": "",
"description": "",
"code": ""
}
]
}
Designed to generate a coupon preset price.
Coupons structure
Maps
Widget Name: maps
Maps Example:
{
"widget": "map",
"header": {
"title": "",
"description": ""
},
"address": "",
"style": {
"fore_color": "",
"background_color": "",
"background_image": "",
"background_parallax": "",
"background_filter": "",
"font_family": "",
"css_class": "",
"item": {
"width": "30%",
"height": "250px",
"layout": "0"
}
}
}
Designed to show a map (by google) from an address
Maps structure
Template Variables
Template variables powers the magic behind DocXsite Live Preview and DocXsite Live View Engine.
The template variables is simply defined by prefixing variable with a % character, for example:
Usage in page (inside the template)
<h1> %company is the best company</h1>
%company is becoming a variable that will output dynamic data.
Supported data types:
The template variables can accept any data type such as: string | number | objects | arrays | html | css | etc.
Setting data to variables
Template variables values can be set in multiple ways:
| options | description |
|---|---|
| 1 | In the SITE entry |
| 2 | In URL call |
| 3 | GET call |
| 4 | POST call |
| 5 | API call |
| 6 | Page call |
| 7 | HTML widget call |
| 8 | DocxDB |
We have provided setup examples corresponding to the methods above.
Setting the data in the SITE
Setting the data in the SITE
"arguments": {
"company": "Puppies Inc"
}
Using this method of setting data in the site, every variable set in the site will be exposed to the entire site. Variables in the SITE are set by:
In the example above, the company is now visible to the entire website.
Setting the data in URL with GET call
https://puppies.com/?id=puppies.com & page=home & company=Puppies Inc
This will result:
Setting the data with GET call
Setting the data with GET call
$.get("https://puppies.com/?id=puppies.com&page=home&company=Puppies Inc",
function(data, status){
});
Using this method of post, Variables containing a name will change
Setting the data with POST Method
Setting the data with POST Method
<form method="post" action="https://puppies.com">
<input name="company" value="Puppies Inc">
<input type="submit" value="Submit">
</form>
Using this method of post, Variables containing a name will change
Setting the data with API Calls
Setting the data with API Calls
"arguments": {
"company": "API-https://api.example.com/get_company_name.php"
}
Using this method of post, Variables containing a name will change:
## Setting the data with Page Call
Setting the data with Page Call
{
"href": "new-york-city",
"page": "puppies-location",
"arguments": {
"location": "Our New York city location"
}
}
The above example will generate new-york-city webpage on the fly and will set the location variable to Our New York city location.
## Setting the data with HTML widget call
Setting the data with HTML widget call
{
"items": [
{
"href": "new-york-city",
"page": "puppies-location",
"arguments": {
"location": "Our New York city location"
}
},
{
"href": "boca-raton",
"page": "puppies-location",
"arguments": {
"location": "Our Boca Raton location"
}
}
]
}
The above example will register (new-york-city and boca-raton) location to be accessible for every page.
Setting the data with DocxDB
Will be covered in docxDB reference guide.
DocXsite Live Preview Engine
DocXsite Live Preview Engine is a powerful tool to render website preview on the fly. This feature is easy to use for creating landing pages, dynamic iframes, demos, live preview, etc.
With URL
https://your-domain.com/?id=your-domain.com & page = home & tel = 555-333-2222
With Post
POST Method
<form method="post" action="https://vinyl-template.docxsite.net/ds-api">
<input type="text" name="company" value="ABC Company.">
<input type="submit" value="Submit">
</form>
Both examples will result in an instant change to the website’s phone number.
DocXsite Live View Engine
Unlike static websites, DocXsite Live View Engine introduces a lightweight solution to build dynamic web pages content.
The DocXsite Live View Engine interpitate instructions on the fly and serves the results (HTML,CSS, JAVASCRIPT) to the user’s browser in a split of a second. It uses cached dynamic variables array which accelerates the rendering process of the web pages.
The DocxDB is where the data is stored and translated into JSON. It interacts with the web pages without the need of expensive integration to an external databases with APIs.
Our DocXsite Live View Engine is optimized to work faster than ever and deliver quick results. DocXsite’s server infrastructure utilizes micro services to work with our local controllers to ensure best performance and durability.
How can the DocXsite Live View Engine help me?
In DocXsite Live View mode, you can create an extremely complex, multi-location website with hundreds of pages from only a few web pages template structure! With DocXsite Live View technology, you can build a mass array of websites by using master template approach that helps to control depended websites from single point.
DocXsite Live View Engine language markup is very simple to be used and maintained by an average user or entry level developer. Feel free to dive in to our documentation to learn more..
Hosting Plan
BASIC HOSTING PLAN
The Basic Hosting Plan is for those who want to create an awesome, responsive, and efficient website for desktop, mobile, and tablets. It is the most popular plan and commonly provides the basic necessary features for a day-to-day website use. Most businesses who might want to have a Basic Plan would be those who already have added value to their business.
This plan features:
- Secured SSL
- Unlimited Bandwidth
- Unlimited Storage
- Analytics Support
- IpDoctor Protection
SEO HOSTING PLAN
The SEO Booster Hosting Plan is designed for users who are more interested in promoting their website in any search engine and to be user-friendly for Google ad-words campaigns.
The website will be stored on powerful optimize web server for best performance.
This plan features:
- Secured SSL
- Unlimited Bandwidth
- Unlimited Storage
- Analytics Support
- Extended Site Map
- High performance Server
- Keywords & Metadata Management
- Microdata Schema Support
- IpDoctor Protection
PRO HOSTING PLAN
The Pro Hosting Plan is designed for professional users who wish to create templates in DocXsite’s ecosystem. The user gets further control over DocxDB and API request calls that allows integration with external systems.
This plan features:
- Secured SSL
- Unlimited Bandwidth
- Unlimited Storage
- Analytics Support
- Extended Site Map
- High performance Server
- Keywords & Metadata Management
- Microdata Schema Support
- IpDoctor Protection
- Template Studio
- Free Master Template
ULTIMATE HOSTING PLAN
The Ultimate Hosting Plan is recommended for users who require complete control of DocXsite’s functions to create and manage large amount of websites through API calls.
This plan is perfect for users/agencies who wish to integrate DocXsite with their systems.
This plan features:
- Secured SSL
- Unlimited Bandwidth
- Unlimited Storage
- Analytics Support
- Extended Site Map
- High performance Server
- Keywords & Metadata Management
- Microdata Schema Support
- IpDoctor Protection
- Template Studio
- Free Master Template
- Advanced API Access
Errors
The DocXsite API uses the following error codes:
| Error Code | Meaning |
|---|---|
| -5 | request rejected - use https only. |
| -10 | missing docxsite parameter. |
| -20 | empty docxsite data. |
| -30 | missing api-key. |
| -40 | wrong api-key. |
| -50 | method not defined. |
| -100 | method not found. |
| -1110 | invalid domain_name. |
| -1120 | invalid country_code. |
| -1125 | invalid state_code. |
| -1130 | invalid recipient_email. |
| -1600 | missing docxsite_id. |
| -2010 | missing suspend_code. |
| -2020 | invalid suspend_code. |
| -2710 | error loading file. |
| -2720 | file too big. |
| -2730 | ext not supported. |
| -2810 | missing file_name. |
| -2820 | forbidden slash character in file_name. |
| -2830 | forbidden dot character in file_name". |
| -2840 | file_name too long. |
| -2850 | file_name not found. |
| -2910 | missing file_name. |
| -2912 | forbidden slash character in file_name". |
| -2914 | forbidden dot character in file_name. |
| -2916 | file_name too long. |
| -2918 | file_name not exist. |
| -2920 | missing new_file_name. |
| -2922 | forbidden slash character in new_file_name. |
| -2924 | forbidden dot character in new_file_name. |
| -2926 | new_file_name too long. |
| -2928 | new_file_name already exist. |
| -2930 | ext not supported. |
| -3010 | missing file_name. |
| -3012 | forbidden slash character in file_name. |
| -3014 | forbidden dot character in file_name. |
| -3016 | file_name too long. |
| -3018 | ile_name not exist. |
| -3030 | ext not supported. |
| -3220 | invalid country_code. |
| -3225 | invalid state_code. |
| -3510 | missing rev_id. |