{"id":13085,"date":"2019-07-26T10:19:38","date_gmt":"2019-07-26T10:19:38","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=13085"},"modified":"2019-07-26T10:50:49","modified_gmt":"2019-07-26T10:50:49","slug":"the-overview-of-settings-options-in-call-to-action","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/the-overview-of-settings-options-in-call-to-action\/","title":{"rendered":"The overview of Settings\/Options in Call To Action"},"content":{"rendered":"\n<p>In this tutorial, we\u2019re going to give you step-by-step instructions on how to set up options of Call To Action. We will cover how to:<\/p>\n\n\n\n<p>If you want to add Call To Action in AMP then first you need to purchase and install <a href=\"https:\/\/ampforwp.com\/call-to-action\/\">Call To Action<\/a>\u00a0plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/Introduction-to-AMP-CTA.png\"><img decoding=\"async\" loading=\"lazy\" width=\"942\" height=\"595\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/Introduction-to-AMP-CTA.png\" alt=\"Introduction to AMP CTA\" class=\"wp-image-256\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/Introduction-to-AMP-CTA.png 942w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/Introduction-to-AMP-CTA-300x189.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/Introduction-to-AMP-CTA-768x485.png 768w\" sizes=\"(max-width: 942px) 100vw, 942px\" \/><\/a><\/figure>\n\n\n\n<p>In the&nbsp;<strong>AMP CTA<\/strong>&nbsp;Extension, there are two types of CTA buttons you can Add.<\/p>\n\n\n\n<ol><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/the-overview-of-settings-options-in-call-to-action\/#1-cta-box\">CTA Box<\/a><\/li><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/the-overview-of-settings-options-in-call-to-action\/#2-cta-bar\">CTA Bar<\/a><\/li><li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/the-overview-of-settings-options-in-call-to-action\/#3-contact-bar\">Contact Bar<\/a><\/li><\/ol>\n\n\n\n<h3><mark style=\"background-color: yellow;\">\n1. CTA Box<\/mark><\/h3>\n\n\n\n<p>You can see <strong>AMP CTA Box<\/strong> in your WordPress Dashboard Create New CTA Box.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"954\" height=\"407\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8.png\" alt=\"\" class=\"wp-image-13095\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8.png 954w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8-300x128.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8-768x328.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8-50x21.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/2-8-100x43.png 100w\" sizes=\"(max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<p>Click on&nbsp;<strong>Add New CTA Box<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"459\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-1024x459.png\" alt=\"\" class=\"wp-image-13099\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-1024x459.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-300x135.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-768x344.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10-100x45.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/3-10.png 1351w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol><li>Here&nbsp;<strong>CTA TITLE&nbsp;<\/strong>represents the title of your Call To Action button. It can be anything of your choice.<\/li><li><strong>CTA Description<\/strong>&nbsp;is what you want to tell users. It can also be anything of your choice.<\/li><li><strong>Button Title<\/strong>&nbsp;will be the Text which you want to show on Call To Action Button. Some examples of Button Titles are, &nbsp;\u2018Learn More\u2019, \u2018Read More\u2019, \u2018Buy Now\u2019, \u2018Subscribe\u2019 and can be anything of your choice.<\/li><li><strong>URL<\/strong>&nbsp;is the destination where you want to take your visitors. It may be a product page, a landing page, a subscription page or other.<\/li><li>AMP CTA Comes with&nbsp;<strong>Shortcode<\/strong>, with which you can use the same Call To Action Box where ever you want<\/li><li>When you are finally done with designing Call To Action Box, you can&nbsp;<strong>Publish<\/strong>&nbsp;it and start using.<\/li><\/ol>\n\n\n\n<h4> The Output of the CTA Box in AMP<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"471\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-1024x471.png\" alt=\"\" class=\"wp-image-13101\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-1024x471.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-300x138.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-768x353.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10-100x46.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/4-10.png 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 style=\"color:#990033;\">1.1: How to Set the position of CTA Box<\/h4>\n\n\n\n<p>You will find this option in <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>AMP option panel <\/strong> -><strong> AMP CTA<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"482\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-1024x482.png\" alt=\"\" class=\"wp-image-13107\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-1024x482.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-300x141.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-768x362.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/5-10.png 1331w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li> If you want to show CTA Box in Content, First of All, Turn ON <strong>\u201d Automatically Show CTA Box in Content \u201c<\/strong><\/li><li> Select a CTA to display from the <strong>Drop Down.<\/strong><\/li><li>Turning ON CTA\u00a0<strong>Above Content,\u00a0<\/strong>Make your\u00a0<strong>CTA BOX\u00a0<\/strong>Appear above the Content.<\/li><li>Turning ON\u00a0<strong>Between the 50% Content,\u00a0<\/strong>Make your\u00a0<strong>CTA BOX\u00a0<\/strong>Appear Between half of your content.<\/li><li>Turning ON CTA\u00a0<strong>Below Content,\u00a0<\/strong>Make your\u00a0<strong>CTA BOX\u00a0<\/strong>Appear Below the Content.<\/li><\/ul>\n\n\n\n<h4 id=\"styling-your-cta\" style=\"color:#990033;\">1.2: Styling your CTA Box<\/h4>\n\n\n\n<p>You can change the Colors and Appearance of CTA Box. If you want to style your <strong>Call To Action,\u00a0<\/strong>you can follow the below steps.<\/p>\n\n\n\n<p>You will find this option in <strong>WordPress Dashboard<\/strong> -> Navigate to <strong>AMP option panel <\/strong> -><strong> AMP CTA<\/strong> -> <strong>BOX<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"386\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-1024x386.png\" alt=\"\" class=\"wp-image-13110\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-1024x386.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-300x113.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-768x289.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-60x23.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10-100x38.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/6-10.png 1327w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Box Background:<\/strong>  In this field, you can change the Box background color of the CTA BOX. <\/li><li><strong> Title Color: <\/strong> In this field, you can change the text color of the CTA BOX<\/li><li> <strong>Button Background:<\/strong>  In this field, you can change the Button background of the CTA BOX.<br><\/li><li> <strong>Button Text Color:<\/strong> In this field, you can change the Button text color of the CTA BOX.<\/li><\/ul>\n\n\n\n<h3 id=\"2-cta-bar\"><mark style=\"background-color: yellow;\">\n2. CTA Bar:<\/mark><\/h3>\n\n\n\n<p>Call To Action bar is similar to the Notification bar, which can be displayed all over the website.<\/p>\n\n\n\n<p>To create custom Call To Action Bar, you follow the below steps.<\/p>\n\n\n\n<p><strong>\u00a0Go to WordPress dashboard -> AMP CTA -> CTA Bars.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"845\" height=\"1024\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-845x1024.png\" alt=\"\" class=\"wp-image-13118\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-845x1024.png 845w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-248x300.png 248w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-768x930.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-41x50.png 41w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-50x60.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9-83x100.png 83w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/8-9.png 1366w\" sizes=\"(max-width: 845px) 100vw, 845px\" \/><\/figure>\n\n\n\n<h4 id=\"2-1-amp-cta-bar-settings\" style=\"color:#990033\n;\"> 2.1:  <strong> AMP CTA Bar Settings<\/strong><\/h4>\n\n\n\n<ul><li><strong>CTA Bar Content:<\/strong>&nbsp;First of All, enable CTA Bar Content.<\/li><li><strong>CTA Bar Description:&nbsp;<\/strong>Here you can enter the description of the CTA Bar.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"929\" height=\"347\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5.png\" alt=\"\" class=\"wp-image-13120\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5.png 929w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5-300x112.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5-768x287.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5-50x19.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5-60x22.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/9-5-100x37.png 100w\" sizes=\"(max-width: 929px) 100vw, 929px\" \/><\/figure>\n\n\n\n<ul><li><strong>Bar Location:<\/strong>&nbsp;In this option, you will select the bar location here we have two option bottom or top.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5.png\"><img decoding=\"async\" loading=\"lazy\" width=\"741\" height=\"66\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5.png\" alt=\"\" class=\"wp-image-7788\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5.png 741w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5-300x27.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5-50x4.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5-60x5.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/5-100x9.png 100w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/a><\/figure>\n\n\n\n<ul><li><strong>Primary Button:<\/strong>&nbsp;Enable this option to show the primary button.<\/li><li><strong>Button text:<\/strong>&nbsp;In this field, you can enter the button text.<\/li><li><strong>Button URL:<\/strong>&nbsp;In this Field, you can enter your Destination&nbsp;<strong>URL<\/strong>&nbsp;where you want to take your visitors.<\/li><li><strong>Secondary Button:&nbsp;<\/strong>This option is similar to the primary button.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6.png\"><img decoding=\"async\" loading=\"lazy\" width=\"826\" height=\"244\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6.png\" alt=\"\" class=\"wp-image-7791\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6.png 826w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6-300x89.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6-768x227.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/6-100x30.png 100w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/a><\/figure>\n\n\n\n<ul><li><strong>Close Button:<\/strong>&nbsp;Enable this option to close button.<\/li><li><strong>Close Button Type:<\/strong>&nbsp;Here are two option&nbsp;<strong>X<\/strong>&nbsp;and&nbsp;<strong>custom text<\/strong>&nbsp;as per requirement you can select any of these.<a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/7.png\"><\/a><\/li><\/ul>\n\n\n\n<h4 id=\"2-2-color-schema\" style=\"color:#990033;\"> 2.2: Color Schema:<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8.png\"><img decoding=\"async\" loading=\"lazy\" width=\"847\" height=\"583\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8.png\" alt=\"\" class=\"wp-image-7799\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8.png 847w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8-300x206.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8-768x529.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8-50x34.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8-60x41.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/8-100x69.png 100w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/a><\/figure>\n\n\n\n<ul><li><strong>Title Color:&nbsp;<\/strong>Using this option you can choose the title color for CTA bar.<\/li><li><strong>Bar Background:&nbsp;<\/strong>Using this option you can choose the background color for CTA bar.<\/li><li><strong>Primary Button Text Color:&nbsp;<\/strong>Using this option you can choose the Primary Button text color for CTA bar.<\/li><li><strong>Primary Button Background:<\/strong>&nbsp;Using this option you can choose the Primary Button Background color for CTA bar.<\/li><li><strong>Secondary Button Text Color:&nbsp;<\/strong>Using this option you can choose the Secondary Button text color for CTA bar.<\/li><li><strong>Secondary Button Background:<\/strong>&nbsp;In this option, you will choose the Secondary Button background color for the CTA bar.<\/li><li><strong>Close Button Text Color:&nbsp;<\/strong>In this option, you will choose the Close Button Text Color for the CTA bar.<\/li><li><strong>Close Button Background:&nbsp;<\/strong>In this option, you will choose the Close Button Background color&nbsp;for the CTA bar.<\/li><\/ul>\n\n\n\n<h4 id=\"2-3-display-condition\" style=\"color:#990033;\"> 2.3: Display Condition.<\/h4>\n\n\n\n<p>Here you can set the display condition to display CTA bar<\/p>\n\n\n\n<p>As per the below condition, the CTA bar will be only will be shown on the post similar you can set the display condition as per your requirement.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9.png\"><img decoding=\"async\" loading=\"lazy\" width=\"874\" height=\"174\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9.png\" alt=\"\" class=\"wp-image-7808\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9.png 874w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9-300x60.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9-768x153.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9-60x12.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/9-100x20.png 100w\" sizes=\"(max-width: 874px) 100vw, 874px\" \/><\/a><\/figure>\n\n\n\n<h4 id=\"2-4-cta-bar-status\" style=\"color:#990033\n;\"> 2.4: CTA Bar Status.<\/h4>\n\n\n\n<p>CTA bar status, there are two option&nbsp;<strong>Active<\/strong>&nbsp;and&nbsp;<strong>inactive.<\/strong><\/p>\n\n\n\n<ul><li><strong>Active:&nbsp;<\/strong>If you want to make bar status visible then select this option.<\/li><li><strong>InActive:<\/strong>&nbsp;If you want to make bar status hide then select this option.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10.png\"><img decoding=\"async\" loading=\"lazy\" width=\"326\" height=\"146\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10.png\" alt=\"\" class=\"wp-image-7812\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10.png 326w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10-300x134.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10-60x27.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/10-100x45.png 100w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/a><\/figure>\n\n\n\n<h4>The Output of the CTA BAR<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"474\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-1024x474.png\" alt=\"\" class=\"wp-image-13125\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-1024x474.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-768x356.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3-100x46.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/10-3.png 1361w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 id=\"3-contact-bar\"><mark style=\"background-color: yellow;\">\n3. Contact Bar:<\/mark><\/h3>\n\n\n\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong>\u00a0 -> Navigate to<strong> AMP option panel <\/strong>-> <strong>Contact Bar<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1312\" height=\"629\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11.png\" alt=\"\" class=\"wp-image-7823\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11.png 1312w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-768x368.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-1024x491.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/04\/11-100x48.png 100w\" sizes=\"(max-width: 1312px) 100vw, 1312px\" \/><\/a><\/figure>\n\n\n\n<h4 id=\"3-1-cta-contact-bar\" style=\"color:#990033\n;\">&nbsp; 3.1: CTA Contact Bar.<\/h4>\n\n\n\n<ul><li><strong>Contact Bar:&nbsp;<\/strong>If you enable this option CTA contact bar will be displayed on AMP site.<\/li><li><strong>Call:&nbsp;<\/strong>IF you enable this option contact icon will be displayed on your AMP version.<\/li><li><strong>Enter Phone Number:<\/strong>&nbsp;In this field, you can enter the phone number.<\/li><li><strong>Email:&nbsp;<\/strong>If you want to display an email icon in CTA contact bar then enable this option.<\/li><li><strong>Skype:&nbsp;<\/strong>If you want to display a Skype icon in CTA contact bar then enable this option.<\/li><li><strong>WhatsApp:&nbsp;<\/strong>If you want to display a WhatsApp icon in CTA contact bar then enable this option.<\/li><\/ul>\n\n\n\n<h4 id=\"3-2-color-scheme\" style=\"color:#990033\n;\">&nbsp; 3.2: Color Scheme.<\/h4>\n\n\n\n<ul><li><strong>Contact Bar background:<\/strong>\u00a0In this option, you will choose the background color for the Contact Bar.<\/li><\/ul>\n\n\n\n<h4><strong>The Output of the CTA Contact Bar:<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"499\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-1024x499.png\" alt=\"\" class=\"wp-image-13131\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-1024x499.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-768x374.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3-100x49.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/07\/11-3.png 1372w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we\u2019re going to give you step-by-step instructions on how to set up options of Call To Action. We will cover how to: If you want to add Call To Action in AMP then first you need to purchase and install Call To Action\u00a0plugin. In the&nbsp;AMP CTA&nbsp;Extension, there&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/13085"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=13085"}],"version-history":[{"count":45,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/13085\/revisions"}],"predecessor-version":[{"id":13265,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/13085\/revisions\/13265"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=13085"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=13085"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=13085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}