Metrixstream allows users the ability to take existing html pages and import them, along with any images, style-sheets and javascript files. The process of integrating these pages into Metrix is made extremely easy.

To import an html page into metrixstream, do the following:

1. Log into your Metrixstream CMS account.

2. Navigate to the top menu and select "Browse" and then "Sites". Select the site that you want to build your page in.

3. After you have selected your site, you will see a list of links under the "Developer Guide" header, select the link that says "Files". Click this link and it will take you to a page with a list of files that correspond with the pages currently in that site (if any).

4. You can use the "Upload" button or the "Advanced Java Uploader", which is located to the right of the "Refresh" button.

Using the Advanced Java Uploader:

Locate the .CSS and/or .JS files on your hard-drive and drag and drop them into the Advanced Java Uploader. Select the images (if any) that appear in your html code, and also drag those into the Advanced Java Uploader. When you have all of these files in the uploader, click the "Upload" button and the system will start with the upload process. When the uploads are complete, refresh the page and all uploaded files should be visible in the file lists below the upload box.

Using the "Upload" button:

Click on the "Upload" button. In the pop-up window, locate the files individually on your hard-drive and click "Open". This will upload that file into the list under the upload box. Once you have all of you files uploaded, refresh the page and they all should be visible in the list below.

Now you have all of the files that you need for your html code to reference.

Importing you html file into Metrixstream:

1. Navigate to the top menu of the CMS and select "Browse" and "Sites"

2. Once you are on the "Sites" page, select your website that you wish to import the code into (this should be the same site that was selected to import the CSS, JS and images for your page).

3. Scroll down the page until you see a link that says "Add Page". This option will create a blank html page inside of the site you have selected.

4. On the "Add Page" page, select all of the settings that correspond to the functionality of your new page. For importing an already built and functioning html page, you can leave the default as is and simply give the page a name and click "Next" at the bottom of the page.

5. You will be placed on the "Edit Page" page. This is where you will enter the existing source code for you page. 

6. After you have pasted the source code into the "content" box, Scroll down to the bottom of the page and click "Save". This will save all changes that you have made to the page.

7. In order to update the html code  and call in the existing photos that may appear on your page, go back to the Files page and locate your uploaded images.

8. In Metrix, there is an option attached to each file called "Site Code For Link". In order to link the html code with these images, you will have to replace the "src" code in the html file with this code. Simple copy this code and locate the corresponding code in the html and replace it. For instance, consider the following:

The original image code in your html might look like this:

<img src="a1.jpg" />

If you locate this file (a1.jpg) on the "Files" page, to the right of the name, you will see this code: 

<?cs call:getStaticUrl("a1.jpg") ?>

Replace the code in the html file so that it reads like this: <img src="<?cs call:getStaticUrl("a1.jpg") ?>"

After you have updated the image codes in your html, save the page and test the changes by going back to the "Sites" page and clicking on the site where the page is located and clicking "Click Here" to the far right or the page, in order to open it in your browser. If the code was updated successfully, all images uploaded and called in your html document will load and be visible in the browser.

In order to make sure your page is referencing the appropriate style sheet, do the following:

If you are using you existing html, you can replace the link to you style sheet in a similar way that you replaced the code for your images. For instance:

<link href="<?cs call:getVersionedStaticUrl("home.css") ?>" rel="stylesheet" type="text/css" />

would be used to replace:

<link href="http://yoursite.com/home/home.css" rel="stylesheet" type="text/css" />

in the header of your page. After the change has been made, simply save the page and preview again in your browser.