Note: The following eSpots are PanEmerson and can be used on all Emerson domains with the HCL Commerce online store enabled.
HCL eSpot Names: MyAccountDashboard1, MyAccountDashboard2, MyAccountDashboard3, MyAccountDashboard4, and MyAccountDashboard5
The My Account Dashboard allows for the display of up to 5 optional eSpot placements.
The ‘MyAccountDashboard1’ eSpot displays in the header, to the left of the page title and above the main content panel. The remaining eSpot placements (‘MyAccountDashboard2’ through ‘MyAccountDashboard5’) when included display below the Task Grid section of the main content panel.
‘MyAccountDashboard1’ can display the 3-Line Text-Only eSpot or the Text CTA with Optional Image eSpot shown below. Each of the other MyAccountDashboard eSpots (2–6) in the main content panel can use any of the eSpot design options excluding the eSpot 1 design options.
• Account-related notification or message text with CTA
eSpot HTML Content
<div class="left_espot">
<div class="account-dashboard-espot image-based">
<div class="image-container">
<img src="[HL]https://www.emerson.com/resource/image/7639552/portrait_ratio1x1/555/555/1a2fa2c7abc3db7ffa45a61faa3b28cb/VO/dashboard-3.png[/HL]">
</div>
<div class="text-container">
<h4>[HL]What's New in MyEmerson?[/HL]</h4>
<p>[HL]MyTraining course catalog | Device Warranty Dates in MyAssets[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.emerson.com/en-us"[/HL]" target="_blank">
[HL]Learn More[/HL]
</a>
</div>
</div>
</div>
Headline: 45
Body Copy: 75
CTA: 25
Asset Size: 320px x 240px
Aspect Ratio: 4:3
Recommended File Weight: <25kb
Width: 160px
Min-Height: 88px (flexible)
Desktop:4:3
Tablet: 4:3
Mobile: 4:3 (clipped)
Width: 880px
Min-Height: 88px (flexible)
• Account-related notification or message text
Approved content authors can copy and paste the available code snippet. Highlighted sections are meant to be customized per the specific use case.
<div class="left_espot">
[HL]Welcome to the new Emerson Climate Portal. Here you can view your order history, location address book, select from entitled accounts, and also gain quick access to helpful tools. Please note, the SELECTED ORGANIZATION below will drive the catalog, price, and ordering function that you see on the site.[/HL]
</div>
Body: 300 (3 lines max desktop)
Width: 880px
Max-Height: 72px (variable)
• Recommended products
• Image calling out trade shows
• Promotional Marketing for Products or Specials
Approved content authors can copy and paste the available code snippet. Highlighted sections are meant to be customized per the specific use case.
<div class="account-dashboard-espot image-based">
<div class="image-container">
<img src="[HL]https://d1-auth.insinkerator.emerson.com/resource/image/3999070/portrait_ratio3x4/414/552/6746185200d5941db958b503f7f95a21/fw/hot-tap-c011.jpg[/HL]" />
</div>
<div class="text-container">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo.
Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Read More[/HL]</a>
</div>
</div>
Headline: 45
Body Copy: 180
Width: 348px
Height: 198px
Width: 810px
Height: 200px (fixed)
• Outside Portals
• Compliance
Text Block with Grey Background
<div class="account-dashboard-espot text-based gray-background">
<div class="text-container">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Read More[/HL]</a>
</div>
</div>
Text Block with White Background
<div class="account-dashboard-espot text-based">
<div class="text-container">
<h3>[HL]Headline lorem ipsum dolor[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi em, volutpat congue nisl egestas, vehicula pulvinar leo. Cras tellus purus, lacinia sit amet orci at, vehicula.[/HL]</p>
<a class="arrow-right-link animated-arrow-right-link" href="[HL]https://www.google.com[/HL]">[HL]Read More[/HL]</a>
</div>
</div>
Headline: 60
Body Copy: 180
Width: 810px
Height: 200px (flexible)
• Extra Links
• News & Events
Approved content authors can copy and paste the available code snippet. Highlighted sections are meant to be customized per the specific use case.
<div class="account-dashboard-espot text-columns">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h3>[HL]Block 1[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi ex volutpat[/HL]</p>
<a class="read-more" href="[HL]https://www.google.com[/HL]">[HL]Read More[/HL]</a>
</div>
<div class="col-xs-12 col-sm-4">
<h3>[HL]Block 2[/HL]</h3>
<p>[HL]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva mus mi ex volutpat[/HL]</p>
<a class="read-more" href="[HL]https://www.google.com[/HL]">[HL]Read More[/HL]</a>
</div>
<div class="col-xs-12 col-sm-4">
<h3>[HL]Block 3[/HL]</h3>
<p><a href="[HL]https://www.google.com[/HL]">[HL]Lorem ipsum dolor sit[/HL]</a></p>
<p><a href="[HL]https://www.google.com[/HL]">[HL]Consectetur adipiscing elit[/HL]</a></p>
<p><a href="[HL]https://www.google.com[/HL]">[HL]Viva mus mi ex volutpat[/HL]</a></p>
<p><a href="[HL]https://www.google.com[/HL]">[HL]Congue nisl egestas[/HL]</a></p>
</div>
</div>
</div>
Headline: 25
Body Copy: 85
Width: 810px
Height: 200px (fixed)