Integration

Note: If you are using Atlas in your project, please reference see these instructions instead.

The first thing you need to do to integrate the global menus is to load the library by adding the following to your page header, and if your application is not using Open Sans font, add it too:

    
<script src="http://assets.ctl.io/dt-GlobalNavigationMenu/1.1.3-beta.2/global-menus.js"></script>

// Import the font only if necessary
<link href='//fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400,600.700,800' rel='stylesheet' type='text/css'>

Global Menu Container

The Services and Sites menu display in a drawer-like fashion that require known positioning inside your application's layout. Because of this, you will need to add an element in the DOM that will be used to display the menu when either the Services or Sites menus are activated.

Add the following element in the DOM where you wish the drawer to be displayed.

    
<global-menu-container></global-menu-container>

Services Menu

To display the Services menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-services-menu-button
  data-services="CAM MH MS CLC DCC"
  data-current-service="CAM">
</global-services-menu-button>

Options

Option	Default Value	Description
`current-service`	`null`	Code of the service that is currently active from the list of available services. If not specified, a generic menu button will be provided.
`services`	`CAM MH MS CLC DCC`	A delimited list of service codes that you wish to be visible in the menu from the list of available services.

Sites Menu

To display the Sites menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-sites-menu-button
  data-sites="MAN OPT MON CAP IMG"
  data-current-site="MAN">
</global-sites-menu-button>

Options

Option	Default Value	Description
`current-site`	`null`	Code of the site that is currently active from the list of available sites. If not specified, a generic menu button will be provided.
`sites`	`MAN OPT MON CAP IMG`	A delimited list of site codes that you wish to be visible in the menu from the list of available sites.

Support Menu

To display the Support menu, all you need to do is include the following tag where you wish to display the button used to trigger the menu (this is typically in the navigation bar of your project).

    
<global-menu-support
  data-create-ticket-url="https://managedservices.ctl.io/msp/oauth/login?state=request"
  data-feedback-url="http://centurylinkcloud.uservoice.com"
  data-knowledge-base-url="https://www.ctl.io/knowledge-base/"
  data-status-url="https://status.ctl.io"
  data-support-center-url="https://managedservices.ctl.io/msp/oauth/login">
</global-menu-support>

Options

Option	Default Value
`create-ticket-url`	`https://managedservices.ctl.io/msp/oauth/login?state=request`
`chat-url`	—
`feedback-url`	`http://centurylinkcloud.uservoice.com`
`knowledge-base-url`	`https://www.ctl.io/knowledge-base/`
`phone-number`	—
`status-url`	`https://status.ctl.io`
`support-center-url`	`https://managedservices.ctl.io/msp/oauth/login`