{"id":5880,"date":"2021-12-13T10:25:40","date_gmt":"2021-12-13T10:25:40","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-social-widget\/"},"modified":"2022-06-10T05:36:22","modified_gmt":"2022-06-10T05:36:22","slug":"email-social-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/email\/creator\/social\/","title":{"rendered":"Email Social Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Social<\/strong> widget helps you add social media profile links to your Email. You can add links to your Facebook page, Instagram profile, Twitter handle, Youtube channel, and LinkedIn profiles.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Social Widget in an Email campaign?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\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 the Email Creator<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add a Social widget 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<p>In order to add links to your social media profiles to your Email, drag and drop the <strong>Social<\/strong> widget to the work area <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-2075\" title=\"Email social widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-social-widget.png\" alt=\"Email creator, the social widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Select the Social media icons that you wish to add to your Email.<\/h3>\n<p>Once you drop the widget into the work area, the widget <strong>Settings&nbsp;<\/strong>are displayed on the right<em>&nbsp;(as highlighted in the screenshot below)<\/em>. You\u2019ll notice that all available Social media platforms are displayed as a list.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2076\" title=\"Email social settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-social-media-settings.png\" alt=\"Email creator, social widget. The social widget settings tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2077 size-full\" title=\"Email social media icons\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-media-display.png\" alt=\"Social media icons display option. Facebook twitter and linkedin\" width=\"540\" height=\"157\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>As highlighted in the above screenshot, against each listing, there is:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>a <strong>D<\/strong><strong>elete button<\/strong>, and<\/li>\n<li>an <strong>Expand button<\/strong> to get further options<\/li>\n<\/ul>\n<p>Use the <strong>D<\/strong><strong>elete&nbsp;<\/strong>button to delete the irrelevant social media icons from your Email campaign. For the icons that you wish to retain, click the <strong>Expand<\/strong> button to enter the subsequent details.<\/p>\n<p><strong>Let&#8217;s look at the Expanded settings for the various social media profiles:<\/strong><\/p>\n<h4><strong>Facebook, Twitter, and LinkedIn<\/strong><\/h4>\n<p>For these social media profiles, you have two settings available:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2078 size-full\" title=\"Email social facebook URL\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-social-widget.png\" alt=\"Email creator, social widget. Share this page URL on facebook\" width=\"511\" height=\"292\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<ul style=\"list-style-type: circle;\">\n<li>\n<h4>&nbsp;<strong>Share this page URL on Facebook<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p>If you select this setting, then once a visitor clicks the <strong>Facebook<\/strong> icon in the Email, he\/she will be prompted to share the Email on his\/her <strong>Facebook<\/strong> page. Similar prompts would be displayed for clicks on the <strong>Twitter<\/strong> and <strong>LinkedIn<\/strong> icons.<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>\n<h4>&nbsp;<strong>Share another URL<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p>If you want your visitors to <strong>Share another&nbsp;<\/strong><strong>URL<em>,<\/em>&nbsp;<\/strong>other than the Email sent to them, select this setting. Enter the URL that you would like your visitors to share on their Social media accounts in the following field.<\/p>\n<h4><strong>Instagram and Youtube<\/strong><\/h4>\n<p>For these Social media profiles, use the field <strong>Link to profile<\/strong> to specify the URL to which you would like to redirect the visitor clicks.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2079 size-full\" title=\"Email social instagram link\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-social-instagram.png\" alt=\"Email creator, social widget. Instagram icon, link to instagram profile\" width=\"509\" height=\"247\"><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style your Social media icons<\/h3>\n<p>By default, we display the Social media icons with their original branding styles, but you can customize the icons&#8217; appearance if you wish to. To customize the look and feel of the icons, click 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-2080\" title=\"Email social widget style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-social-style.png\" alt=\"Email creator, social widget. The social widget style tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>The different design options available are:<\/strong><\/p>\n<h4>4.1 Social 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 widget background. You can also choose to make the <strong>Widget Background Transparent<\/strong>.<\/li>\n<li>Use the <strong>Rounded Corners<\/strong> sizing bar to add rounded corners to the icons.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Social Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li>Select the <strong>Orientation<em>,<\/em><\/strong> i.e.,<strong><em>&nbsp;<\/em><\/strong>whether you would like to display the icons vertically (one below the other) or horizontally (side by side)<\/li>\n<li><strong>Social Position<\/strong> &#8211; to choose the alignment of the icons within the widget boundary.<\/li>\n<li><strong>Social Button Style<\/strong> \u2013 to specify if you would like to display the icons in color (the default style) or grayscale.<\/li>\n<li><strong>Horizontal Icon Gap<\/strong> &#8211; to select the distance between the icons.<\/li>\n<li><strong>Vertical Icon Gap<\/strong> &#8211; to adjust the distance between the icon and widget boundaries.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added your brand&#8217;s social media profile links to your Email campaign!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a footer to an Email using the <a href=\"\/hc\/en_GB\/email\/creator\/footer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Footer Widget<\/a>!<\/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 social widget helps you add social media profile links to your Email campaign (Facebook, Instagram, Twitter, Youtube, and LinkedIn).<\/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-5880","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\/5880","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=5880"}],"version-history":[{"count":4,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5880\/revisions"}],"predecessor-version":[{"id":9868,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5880\/revisions\/9868"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/media?parent=5880"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-category?post=5880"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-tag?post=5880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}