HTML Outlook Button Rendering
Use newbutton for improved HTML button rendering in Outlook.
Last updated
Was this helpful?
Use newbutton for improved HTML button rendering in Outlook.
Last updated
Was this helpful?
Outlook’s unique rendering engine often requires specific adjustments to ensure buttons display and function correctly. This article explains how to use the newbutton
query string parameter when transforming Beefree SDK JSON into HTML using the to enhance button rendering in Outlook.
newbutton
Query ParameterBy default, the HTML output from the CSAPI includes a VML block for Outlook rendering placed before the <a> tag. While this ensures compatibility with Outlook, it has the following limitations:
Accessibility Issues: The <a> tag cannot be activated using a keyboard because it resides inside the VML block.
Forwarding Issues: Buttons may become unclickable when emails are forwarded in Outlook due to how Outlook handles nested elements.
Example: HTML Without newbutton
newbutton
Query ParameterSetting the newbutton=true
query parameter ensures buttons are accessible and functional. This adjustment:
Moves the <a> tag outside the VML block, enabling full keyboard accessibility.
Places the VML block after the <a> tag, ensuring compatibility with Outlook and resolving forwarding issues.
Wraps the button label inside a <span>, providing improved layout control for consistent padding and word-breaking compared to the inline <a> tag in the default HTML.
Example: HTML With newbutton
newbutton
Accessibility: Buttons are fully keyboard-activated due to the <a> tag placement.
Forwarding Compatibility: Buttons remain clickable in forwarded Outlook emails by addressing Outlook's handling of nested elements.
Styling Flexibility: Button text is enclosed within a <div>, allowing for easier customization and consistent padding.
You can enable the newbutton
option using two options:
Option 1: Query String Parameter
Include newbutton=true
in the query string of your CSAPI call:
Option 2: JSON Property
Add "newbutton": true
to the JSON payload: