CMS Integration Process

Integration of CMS

Four stages are required to integrate our CMS:

  1. All navigational menus; i.e. header, side navigation, footer, etc. must be formatted into an unordered list. The use of server side includes are recommended for navigational menus.
  2. Add the CMS Code as a comment to each navigational menu and editable content area on every page (see example code).
  3. Add the authorization script to activate your account. An Authorization script and associated key code(s) will be provided after the completion of the product registration. This will need to be prevalent on every page.
  4. Manually enter all navigational menus in CMS by clicking Manage Site. Use the corresponding CMSMenu element name when adding each navigational menu. Click here to view a video tutorial.

Breakdown of the CMS Code

CMS Code requires two element types:

Each element has two states:

Lastly, each element has a name:


CMS Class

This class call will show all CMS editable regions that are hidden when a user logs into CMS.


CMS Load Complete Event


Integration Notes

For best results, each CMS element must be contained within a tag. Keep in mind, all html within the start and end state of a CMS element will be overwritten each time it is saved.

The use of server side includes are recommended for navigational menus. However, all editable content areas must be contained on the page. Editable content areas located within an include file will be ignored.

Download CMS Example     Sample Code




<html><body>
<div id="header_navigation">
<!-- CMSMenuStart:Main -->
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<!-- CMSMenuEnd:Main -->
</div>

<div id="side_navigation">
<!-- CMSMenuStart:Side -->
<ul>
<li>Side Nav 1</li>
<li>Side Nav 2</li>
</ul>
<!-- CMSMenuEnd:Side -->
</div>

<div id="side_content">
<!-- CMSContentStart:Side -->
<p>Start side content...</p>
<!-- CMSContentEnd:Side -->
</div>

<div id="main_content">
<!-- CMSContentStart:Main -->
<p>Start main content...</p>
<!-- CMSContentEnd:Main -->
</div>

<div id="footer_navigation">
<!-- CMSMenuStart:Footer -->
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<!-- CMSMenuEnd:Footer -->
</div>
<!-- Add authorization script here. This script needs to be visible on every page -->
</body></html>
<html><body>
<table>
<tr>
<td>
<!-- CMSMenuStart:Main -->
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<!-- CMSMenuEnd:Main -->
</td>
</tr>
</table>
<table>
<tr>
<td>
<!-- CMSContentStart:Side -->
<p>Start side content...</p>
<!-- CMSContentEnd:Side -->
</td>
<td>
<!-- CMSContentStart:Main -->
<h1>Title</h1>
<p>Start main content...</p>
<!-- CMSContentEnd:Main -->
</td>
</tr>
</table>
<table>
<tr>
<td>
<!-- CMSMenuStart:Footer -->
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<!-- CMSMenuEnd:Footer -->
</td>
</tr>
</table>
<!-- Add authorization script here. This script needs to be visible on every page -->
</body></html>