CM platform Template

This version is depricated and is replaced by
https://platformheader.cmtelecom.com/en/app/header/the-selected-account-guid

Switch to Aurora

CM Platform header implementation

Adding the CM platform header functionality to your HTML project.

Since this version of the platform header is rendered serverside you could just get the raw header HTML.
Requesting it serverside (curl) by a GET request (with the CMAuthentication cookie in the header)
At least one get parameter is required to get the raw HTML.
https://platformheader.cmtelecom.com/en/the-selected-account-guid?language=en&country=BE&title-text=My Title&innerhtml=[[[innerhtmlplaceholder]]]

The first part of the uri is the language, "en" in this case
The second part is the selected Account Guid (optional) , "the-selected-account-guid" in this case

The following Get Parameters are supported:

language
country (for the deskrpor-chat when not logged in, otherwise the company country ID is used)
'INT,FR,DE,BE,ZA,JP,NL' Are supported, 'INT' is the default
title-text (the title of the app/site)
logo-url (optional , the url the logo links to)
account-id (optional)
the guid of the Logical Account you want to show (as a default the javascript will use the second uri parameter when valid) Otherwise the current selected account(if one) wil be used and set.
innerhtml (optional)
It's best to use a small placeholder string that you replace with the html for your site/app menu
use-nps (optional, type: boolean, default: false)
Use the NPS module to request feedback from our customers.
Note The NPS module should only be used in the aurora platform header. The styling is not compatible with other versions of the platform header.

Add the following stylesheet line to your <head> tag.

<link rel="stylesheet" href="https://platformheader.cmtelecom.com/css/platform.min.css" />

<link rel="stylesheet" href="https://platformheader.cmtelecom.com/css/platform.aurora.v2.min.css" />

(for the Aurora version)

Add the platform-header directive inside the body tag.

<platform-header

    title-text="{your application name}"

    *language="{site-language}"
    *country="{site-country}"
    *login-url="{the loging url}"
    *logo-url="{the url a click on the logo redirects to}"
    *account-id="{the id of the account}"
    *use-nps="false"
    *module-help-path="{the url a click on the the help button redirects to}"
     >
</platform-header>

* search-filter, language, return-url and product-account-type is optional

AND

Add the following script line just before the closing <body> tag.

(Vanilla Javascript version)

Staging/Test:
<script src="https://platform.cmtest.nl/js/platform-header-js.min.js"></script>

Production:
</script src="https://platformheader.cmtelecom.com/js/platform-header-js.min.js"></script>

(Angular 1.5 version)

Staging/Test:
<script src="https://platform.cmtest.nl/js/platform-header.min.js"></script>

Production:
</script src="https://platformheader.cmtelecom.com//js/platform-header.min.js"></script>

use the platform-header API to get the header Sever Side.

There is no Angular or other frontent-framework dependency

Add the platform-header directive inside the body tag.

<platform-header title-text="{your application name}" *country={site-country} *language="{site-language}"></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!

Specific styling for a platform header version

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">
    <meta name="theme-color" content="#FFFFFF">
    <meta name="msapplication-navbutton-color" content="#FFFFFF">
    <meta name="apple-mobile-web-app-status-bar-style" content="#FFFFFF">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="https://cdn.cm.com/cm/favicon-32x32.png" rel="icon">

    <lt;link href="https://platformheader.cmtelecom.com/css/platform.min.css" rel="stylesheet" />
</head>
<body ng-app="cm-platform">
    <platform-header title-text="CM Header Template" app-icon="fa fa-gamepad" use-nps="false" ></platform-header>
    <h1>This is the demo template.</h1>
    <script src="https://platformheader.cmtelecom.com/js/platform-header.js"></script>
</body>
</html>

Site specific menu in header

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 col-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 btn-primary  cm-pfh-btn btn-primary -orange ">
                    Try now
                </a>
                <a href="#" class="cm-pfh-btn btn-primary  cm-pfh-login-btn btn-primary " >
                    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 btn-primary " 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 btn-primary  cm-pfh-btn btn-primary -orange ">
                    Try now
                </a>
                <a href="#" class="cm-pfh-btn btn-primary  cm-pfh-login-btn btn-primary " >
                    Login
                </a>
            </li>
        </ul>
    </nav>
<platform-header/>

Available platform global functions.

Identity
- getCmSSO()
logical Account:
- getCmAccount( )
- openCmAccountDialogue() (only when available)

What's loaded with the platform-header-js.min.js?

Only the html and the internally used Javascript

What's loaded with the platform-header.min.js?

Angular 1.5 , ngCookie,the html and the internally used Javascript

What's loaded with the platform.min.css?

Platform header specific CSS.
FontAwesome (v4.7.0).
CM-icons.

Extra Javascript functionality

Opening the select account dialog.

You can use the global function openCmAccountDialogue();

Opening the 'Sign Up' flow (only when no user is found).

You can use the global function cmR.startRegister(options)
where options is an object with:
    {
        country:'countryID',
        appID  :'(optional) ID of the app you want to be installed',
        endurl :'(optional) The url you want to redirect to after completing the registration'
        marketingSource:'(optional) The marketingsource  you want to provide to ease the life of our customer Support Team'


    }

Get the SSO account (if set)

You can use the global function getCmSSO();

Get the SSO account the angular way (if set)

{{vm.identity|json}}

Get the Locgical account (if set)

You can use the global function getAccount();

Get the Logical account (ProductAccountSession) the angular way

{{vm.accountSession|json}}

Get the account the angular way

{{vm.account|json}}

Toggle colors of the header.

Display NPS popup

The Net Promoter Score asks the user to rate the platform on a scale from zero to ten. The popup is only visible if the request towards the nps api responds with the "AskNpsFeedback" property to true

If you don't want a redirect when using IE you need to add the cm-no-redirect to the head of your page.

<meta name="cm-no-redirect" content="IE"/>

Author: Peter Evrard.
Document version: 2017-12-01
Platform version: 3.1.0

This version is depricated and is replaced by https://platformheader.cmtelecom.com/en/app/header/the-selected-account-guid