Button/Link Widget - Custom Tag
<widget-button attributes> ... </widget-button>
The button/link text goes between the opening and closing tags.
Note:The button/link widget is not allowed in the subscriber page customization. If the custom tag is used anyway, it will not be recognized and will be handled like any other unknown HTML tag!
Allowed attributes:
-
align: Defines if the button/link shall be left, center or right aligned.
Possible values:
left
,center
,right
-
data-lsoft-do-not-track: Defines if clicks on the button/link shall be exempt from tracking.
Possible values:
true
. Any other value, or omitting the attribute completely, means that the click on the button/link is tracked. -
href: Defines if the action URL (target URL) for the button/link.
Possible values: Any valid URL.
If the href attribute is empty (or not supplied at all), then normally this simply means, that the button/link widget is not completely defined and that the recipient will get a 404 "not found" error when he clicks on the button/link.
But in the standard template editor, if the widget is used outside of an editable block widget, if you leave the href attribute empty, then this signifies that the action URL will be supplied by the template end user (when the template is used in the content of a mail job). Or in other words: In this special case, leaving the href attribute empty marks the widget's URL as "action URL editable" for the end user, even though the widget is not in an editable area of the template. In this case, it is also possible to define the widget as "texteditable", "deletable" and/or "conditional" (see below). -
name: Defines the optional widget name. You can specify any name you like to label the widget. This name is shown in the widget hierarchy panel (in design mode) and makes it easier to identify the widget in the hierarchy. It also makes it easier it identify the widget here in code mode. However, the name is entirely optional and does not have any additional functional purpose.
Possible values: Any text
-
style: Defines the styling of the button/link. With proper styling, the result can look like a button or like a standard text link.
Possible values: A list of styles, separated by semicolons, similar to the standard HTML
style="..."
attribute. The following styles are allowed:-
background-color
: Defines the background color of the button/link. -
border
: Defines the border around the button/link. -
border-radius
: Defines the radius for the rounded corners of the button/link. Contrary to the standard "border-radius" style, this style allows only a single number that is applied equally to all four corners. -
color
: Defines the text color of the button/link. -
font-name
: Defines the font of the button/link text by specifying its name. The name must be one of the standard fonts that is also available from the font drop-down in design mode (i.e. one of the fonts that has been defined on the Editor Fonts page; see menu item "Preferences" -> "Editor Fonts"). If any other font name is specified, it is ignored and the widget uses the default font instead (as specified in the "Fluid Design Widget Default Font" panel on the right). If this style is not present, the widget also uses the default font.
Note: Although similar, this style is not the same as the standardfont-family
style. Most importantly, you cannot specify a comma separated list of fonts. Instead, only a single font name must be specified. -
font-size-rel
: Defines the size of the button/link text font, relative to the default font size, in percent. The size is always interpreted with the unit "%", even if no unit is specified. If a different unit is specified, it is ignored and "%" is used instead. If an invalid size or unit value is specified, it is ignored and the widget uses the default font size instead (as specified in the "Fluid Design Widget Default Font" panel on the right). If this style is not present, the widget also uses the default font size. Also, the specified size must be one of the standard sizes that is also available in the widgets properties dialog in design mode. If a different size is specified, the default font size is used instead.
Note: Although similar, this style is not the same as the standardfont-size
style. Most importantly, you can only use the "%" unit and can only specify one of the standard sizes. -
font-style
: Defines if the font of the button/link text shall use the "italic" style or not. The only allowed values for this style areitalic
andnormal
. If any other value is specified, it is ignored and the inherited style is used. The inherited style is also used if this style is not present at all. -
font-weight
: Defines if the font of the button/link text shall use the "bold" weight or not. The only allowed values for this style arebold
andnormal
. If any other value is specified, it is ignored and the inherited style is used. The inherited style is also used if this style is not present at all. -
padding
: Defines the padding inside of the button/link (between the button/link box and its text). -
outer-padding
: Defines the padding outside of the button/link (between the button/link box and its surroundings or parent). -
text-decoration
: Defines if the font of the button/link text shall use the "underline" style or not. The only allowed values for this style areunderline
andnone
. If any other value is specified, it is ignored and the inherited style is used. The inherited style is also used if this style is not present at all.
-
Additional attribute when editing the message content of a mail job:
-
condition: Sets the widget condition for the button. The widget will only be shown if this condition is true (or if there is no condition at all). See here about special issues when specifying a condition formula in code mode.
Possible values: Any valid calculation formula that does not have a number set or text set as its result.
Additional attributes when editing a standard template:
-
These additional attributes are only allowed when editing a standard template and if the widget is not already nested into a
template-editableBlock
, and if the href attribute for the widget is not supplied (marking the button/link as "action URL editable" by the end user).
If the above is not the case, then these attributes are ignored if specified. -
deletable: Defines if this widget shall be deletable by the template end user or not.
Possible values:
true
orfalse
-
condition: Same as the "additional attribute when editing the message content of a mail job", see above.
-
conditioneditable: Defines if this widget shall allow the template end user to edit the widget condition (or define one, if the widget currently does not have one) or not.
Possible values:
true
orfalse
-
texteditable: Defines if this button/link's text shall be editable by the template end user or not.
Possible values:
true
orfalse
Examples:
<widget-button align="left" href="URL_HERE" style="background-color:#007f18; border-radius:15px; color:#ffffff; font-weight:bold; padding:10px 30px 10px 30px;"> Button text goes here... </widget-button> <widget-button align="center" deletable="true" texteditable="true" style="color:#fffff; text-decoration: underline;"> Button text goes here... </widget-button>