{"id":5899,"date":"2021-12-13T10:25:36","date_gmt":"2021-12-13T10:25:36","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-button-widget\/"},"modified":"2022-06-10T05:32:37","modified_gmt":"2022-06-10T05:32:37","slug":"email-button-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/email\/creator\/button\/","title":{"rendered":"Email Button Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Button<\/strong> widget helps you add a CTA Button to your Email.<\/p>\n<p>You can configure multiple actions for the Button clicks.<\/p>\n<blockquote class=\"elevio-box-success\"><p><strong>For example<\/strong>, you can use this Button:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>To <strong>redirect&nbsp;<\/strong>the clicks to:\n<ul style=\"list-style-type: disc;\">\n<li style=\"margin-left: 20px;\">an external web URL, or<\/li>\n<li style=\"margin-left: 20px;\">a Landing Page, or<\/li>\n<li style=\"margin-left: 20px;\">an Email address<\/li>\n<\/ul>\n<\/li>\n<li>To confirm an <strong>Opt-In<\/strong> request and redirect the clicks to a <strong>T<\/strong><strong>hank You<\/strong> page<\/li>\n<li>As a <strong>Call <\/strong>Button (Clicks redirected to call the specified phone number)<\/li>\n<li>To <strong>download<\/strong> a file on the Button click<\/li>\n<\/ul>\n<\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Button Widget in an Email campaign<\/h2>\n<h3>Step 1<\/h3>\n<h3>Navigate to the Email Creator<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create an <strong>Email&nbsp;<\/strong>and subsequently <a href=\"\/hc\/en_GB\/email\/creator\/how-to-create-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to our Email Creator<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add a clickable Button to your Email<\/h3>\n<p>The blank area on the left is the <strong>Work area<\/strong> where you design your Email, and the area on the right is the Tools area where all the available design elements are displayed as <a href=\"\/hc\/en_GB\/email\/creator\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3303\" title=\"Email drag and drop button\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-drag-drop-area.png\" alt=\"Email creator, button widget. The work area is highlighted\" width=\"640\" height=\"490\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>In order to add a clickable Button to your Email, drag and drop the <strong>Button<\/strong> widget to the <strong>Work area<\/strong> <em>(as highlighted in the screenshot below)<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2014\" title=\"Email creator button CTA\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-cta-button.png\" alt=\"Email creator, button widget. The CTA button widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Configure the click action for the Button.<\/h3>\n<p>Once you drop the button widget into the <strong>Work area<\/strong>, the widget <strong>Settings&nbsp;<\/strong>are displayed on the right <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2015\" title=\"Email button settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-button-settings.png\" alt=\"Email creator, button widget. Button settings tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3><strong>Fill in the fields:<\/strong><\/h3>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button Text<\/strong> <em>(as highlighted in the screenshot below)&nbsp;<\/em>to add\/edit the text that appears on the clickable Button.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2016 size-full\" title=\"Email button text\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-button-text.png\" alt=\"Email creator, button widget. Button text field is highlighted\" width=\"567\" height=\"461\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<\/li>\n<\/ul>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button Action<\/strong><span style=\"color: #969696;\">&nbsp;<\/span><em>(as highlighted in the screenshot below)&nbsp;<\/em>to <a href=\"\/hc\/en_GB\/email\/creator\/CTA-button\/\" target=\"_blank\" rel=\"noopener noreferrer\">specify the action that you want to trigger with the click of this Button<\/a>.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2017 size-full\" title=\"Email button actions\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-button-actions.png\" alt=\"Email creator, button widget. Button action field is highlighted\" width=\"568\" height=\"469\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<\/li>\n<\/ul>\n<ul style=\"list-style-type: circle;\">\n<li>Based on the option you select in this field, the subsequent field gathers the required information relevant to that action.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style the Button Widget<\/h3>\n<p>You can edit the appearance of your button using the <strong>Style<\/strong> tab <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2018\" title=\"Email button style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-button-widget-styling.png\" alt=\"Email creator, button widget. Button style tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>The different design options available are:<\/p>\n<h4>4.1 Button Font settings and Background color<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Background Color<\/strong> to change the color of the Button background<\/li>\n<li><strong>Border Size and Color<\/strong> to change the color of the Button border<span style=\"color: #969696;\">&nbsp;<\/span>(use the subsequent sizing bar to adjust the thickness of the border)<\/li>\n<li><strong>Border Style<\/strong> to change the type of Button border \u2013 solid, dotted, etc.,<\/li>\n<li><strong>Rounded Corners<\/strong> sizing bar to add rounded corners to the Button.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Button Text Style<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li>Edit the <strong>Font Color<\/strong>, <strong>Font Size, Font Family<\/strong>, and <strong>Font Weight<\/strong> of the Button text.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Button Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button width<\/strong> to adjust the width of the Button<\/li>\n<li><strong>Button Position<\/strong> to change the alignment of the Button in the design<\/li>\n<li><strong>Padding<\/strong><strong><em>&nbsp;<\/em><\/strong>to enter the desired padding measurements.<strong><em>&nbsp;<\/em><\/strong>Padding refers to the gap between the text entered inside the Button and the Button boundary.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2019 size-full\" title=\"Email button formatting\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-button-formatting.png\" alt=\"Email creator, button widget. Button formatting options are highlighted\" width=\"559\" height=\"281\"><span style=\"color: #969696;\"><br \/>\n<\/span><span style=\"color: #969696;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added a custom CTA Button to your Email!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add text to an Email campaign using the <a href=\"\/hc\/en_GB\/email\/creator\/text\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text<\/a> Widget!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The button widget helps you add a CTA button to your Email and offers a multitude of click action configurations for the button.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[354],"ht-kb-tag":[],"class_list":["post-5899","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-email-creator-en_gb"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/comments?post=5899"}],"version-history":[{"count":8,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5899\/revisions"}],"predecessor-version":[{"id":9859,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5899\/revisions\/9859"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/media?parent=5899"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-category?post=5899"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-tag?post=5899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}