<link rel="stylesheet" href="//platform.cmtelecom.com/3.3.6/css/platform.min.css" />
<script src="//platform.cmtelecom.com/3.3.6/js/platform.min.js"></script>
ng-app="cm-platform"
<platform-header do-not-track="{boolean}" title-text="{your application name}" app-icon="{your icon} *search-filter="{cmoogle-filter}" *language="{site-language}" *return-url="{return url after redirecting}" *product-account-type="{type of product account needed}" ></platform-header>
* search-filter, language, return-url and product-account-type is optional
That's it! You now have a fully working CM platform header!
You can use the global function openCmAccountDialogue();
You can set specific styling targeting a version of the header by using the 'data-platform-header-version' attribute set on the body by the header.
// set the backgroundcolor to BadAss for example
body[data-platform-header-version="3.0.0"]{
background-color: #BADA55;
}
Your HTML should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CM platform Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CM | Platform Template">
<meta name="robots" content="noindex" />
<meta name="author" content="CM">
<link rel="shortcut icon" href="https://cdn.cmtelecom.com/latest/favicon.ico">
<link href="//platform.cmtelecom.com/3.3.6/css/platform.min.css" rel="stylesheet" />
</head>
<body ng-app="cm-platform">
<platform-header title-text="CM Header Template" app-icon="fa fa-gamepad"></platform-header>
<h1>This is the demo template.</h1>
<script src="//platform.cmtelecom.com/3.3.6/js/platform.min.js"></script>
</body>
</html>
If you set the class attribute on the platform header to "cl-white" the text will be white
A site specific menu can be included by inserting it inside the platform-header directive
<platform-header title-text="CM Header Template" app-icon="fa fa-gamepad">
<!-- DESKTOP -->
<nav class="cm-pfh-menu-content cm-pfh-app-menu-content">
<span class="cm-pfh-angle"></span>
<ul class="cm-pfh-menu-content-body cm-pfh-app-menu-list"> <!-- MAIN MENU ITEMS -->
<li class="open-on-hover">
<a href="#Features" class="cursor-pointer " for="a_m_1">Features</a>
<ul class="cm-pfh-hide-sm"> <!-- INNER MENU ITEMS - SHOWN ON HOVER OF MAIN MENU ITEM -->
<li>
<div class="cm-pfh-menu-content-body" style="left:150px;width:900px;max-width:150vw">
<span class="cm-pfh-angle" style="position:fixed;margin-left:-150px"></span>
<div class="row">
<div class="col-md-3">
<div>
<h5 >
<div class="cl-blue">Messaging</div>
<small class="cl-grey">Engage with your customer</small>
</h5>
<div>
<a href="#">Customer care (GIN)</a>
</div>
</div>
</div>
<div class="col-md-3">
<div>
<h5 class="cl-blue">
<div class="cl-blue">Payments</div>
<small class="cl-grey">Payments made easy</small>
</h5>
<div>
<a href="#">Carrier billing</a>
</div>
<div>
<a href="#">AutoCollect</a>
</div>
</div>
</div>
<div class="col-md-3">
<div>
<h5 class="cl-blue">
<div class="cl-blue">Security</div>
<small class="cl-grey">Security solutions</small>
</h5>
<div>
<a href="#">Authenticator</a>
</div>
<div>
<a href="#">One time passwords</a>
</div>
</div>
</div>
<div class="col-md-3">
<div>
<h5 class="cl-blue">
<div class="cl-blue">Voice</div>
<small class="cl-grey">Talk to your customers</small>
</h5>
<div>
<a href="#">Sip Trunk</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<a href="#" style="margin-right:10px">Pricing</a>
<a href="#" style="margin-right:10px">Support</a>
<a href="#" style="margin-right:10px">API&SDK</a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="cm-pfh-login-menu">
<a href="#" class="cm-pfh-btn cm-pfh-btn-orange ">
Try now
</a>
<a href="#" class="cm-pfh-btn cm-pfh-login-btn" >
Login
</a>
</li>
</ul>
</nav>
<!-- MOBILE MENU -->
<nav class="cm-pfh-menu-content cm-pfh-show-sm cm-pfh-app-menu-content">
<label class="cm-pfh-close-menu-btn" for="cm-pfh-app-menu">
</label>
<span class="cm-pfh-angle"></span>
<ul class="cm-pfh-menu-content-body cm-pfh-app-menu-list">
<li>
<a href="#Features" class="cursor-pointer " for="a_m_1">Features</a>
<a href="#Enterprise_Solutions" class="cursor-pointer">Enterprise Solutions</a>
<a href="#" class="col-6">Pricing</a>
<a href="#" class="col-6">About CM</a>
<a href="#" class="col-6">Help Center</a>
<a href="#" class="col-6">Contact</a>
<a href="#" class="col-6">Developers</a>
<a href="#" class="col-6">Careers</a>
<a href="#" class="col-6">Blog</a>
</li>
<li class="cm-pfh-login-menu">
<a href="#" class="cm-pfh-btn cm-pfh-btn-orange ">
Try now
</a>
<a href="#" class="cm-pfh-btn cm-pfh-login-btn" >
Login
</a>
</li>
</ul>
</nav>
<platform-header/>