REMOVED
This component has been removed from the Framework.
- Taxonomic name: M-AGENT-CALLBACK
- Added on: v3.0.0 (15/09/17)
- Removed on: v4.0.0 (20/07/18)
Agent profile call back
This card is the form that allows users to request a call back (within the agent card)
Design and usage
- The agent callback card is a component within the overall agent card
- Only one call back link should be included per agent card.
Examples
Interactive example
Code example
<div class="l-section t-accent-light t-accent-light--white m-agent-callback-wrapper">
<div class="l-content-container">
<div class="l-max l-max--10-column-large">
<div id="callback" class="m-agent-callback l-form--left-align" data-module="m-agent-callback">
<!-- Callback content (form/completed message) -->
</div>
</div>
</div>
</div>Development and test
Notes for developers
This element is an extension to the Framework rather than a core module; include the following code in your header to attach the relevant additional stylesheets:
<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile.css" rel="stylesheet" />
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile-unmq.css" rel="stylesheet" />
<![endif]-->The section containing the call back form should be the last section on the page (before the contextual help bar and footer).
Ensure that the callback button within the agent profile card references the call back form eg.
<p><a class="a-button a-button--primary a-button--full-width m-agent-profile__button" href="#callback">Request call back</a></p>To automatically open the call back area on page load add the additional class m-agent-callback--open.
To include a close button within the call back area use the following code.
<p class="m-agent-callback__close-button"><a href="..." class="a-button a-button--primary">Request call back</a></p>Changing locale settings
Default text for the close link and the loading indicator can be changed for a particular locale.
var locale = {
en: {
agentCallback: {
closeText: 'Close'
}
}
};For more information on this, see our page on how to change locale settings within JavaScript.
Notes for testers
- When JavaScript is available and the 'Request call back' button within the agent profile card is selected the call back form should be made visible and focus transfered to the call back form, so that hitting tab again will transfer focus to the first tabbable element within the call back box.
- When JavaScript is available and close link or button is selected the call back form is hidden and focus is tranfered to the contact information section so that hitting tab again will transfer focus to the first link within that section.
- When JavaScript is not available the call back form is visible at the bottom of the page and selecting the 'Request call back' button scrolls the user down to the form/area.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-agent-callback-wrapper |
Base style for the section containing the callback form so that it is hidden with JS is available | Yes | l-section |
|
.m-agent-callback |
Base style the container directly containing the form / completed message | Yes | #callback |
|
.m-agent-callback--open |
Modifier to automatically show call back area on page load | .m-agent-callback |
||
.m-agent-callback__close-button |
Base style to add functionality to close button added within call back area | .m-agent-callback p |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.