Clicky

How to add Call To Action in AMP

Call To Action (CTA) is a very important feature, with which you can make your visitors aware of your Product/Website.

To use Call To Action in AMP, we have a developed a plugin extension named AMP CTA. You can get that from here > Get AMP CTA

AMP CTA lets you add Call To Action feature in AMP. With Call To Action, you can encourage users to take some Action on your website. You can Add some Actionable phrases such as  “find out more” or “visit a store today” with links. With AMP CTA you can make more conversions through mobile visitors.

Let’s get started to know, How to add Call to Action in AMP

How to add Call To Action in AMP

After Installing & Activating AMP CTA plugin extension, follow the below steps.

In the AMP CTA Extension, there are three types of CTA buttons you can Add.

  1. CTA BOX
  2. CTA BAR
  3. Contact Bar
Introduction to AMP CTA
Introduction to AMP CTA

Let’s see, How CTA works in AMP.

1.CTA BOX

CTA BOX: Which goes between the content. It can be delivered with the shortcode manually and automatically. This is how it looks.

AMP CTA Box Demo
AMP CTA Box Demo

Let’s see how can we create this! 

After Installing & Activating AMP CTA, you can see AMP CTA Box in your WordPress Dashboard Create New CTA Box.

Click on Add New CTA Box

Add New CTA Box Steps

  1. Here CTA TITLE represents the title of your Call To Action button. It can be anything of your choice.
  2. CTA Description is what you want to tell users. It can also be anything of your choice.
  3. Button Title will be the Text which you want to show on Call To Action Button. Some examples of Button Titles are,  ‘Learn More’, ‘Read More’, ‘Buy Now’, ‘Subscribe’ and can be anything of your choice.
  4. URL is the destination where you want to take your visitors. It may be a product page, a landing page, a subscription page or other.
  5. AMP CTA Comes with Shortcode, with which you can use the same Call To Action Box where ever you want
  6. When you are finally done with designing Call To Action Box, you can Publish it and start using.

The Output of the CTA Box in AMP

The positioning of your CTA

You will find this option in WordPress Dashboard -> Navigate to AMP option panel -> AMP CTA

  1. If you want to show CTA Box in Content, First of All, Turn ON ” Automatically Show CTA Box in Content “
  2. Select a CTA to display from the Drop Down.
  3. Turning ON CTA Above Content, Make your CTA BOX Appear above the Content.
  4. Turning ON Between the 50% Content, Make your CTA BOX Appear Between half of your content.
  5. Turning ON CTA Below Content, Make your CTA BOX Appear Below the Content.

Show Modal CTA

  • You will find this option in WordPress Dashboard -> Navigate to AMP option panel -> AMP CTA -> Enable “Show Modal CTA” option.

  • Show Modal CTA: Enable Show Modal CTA option
  • Select a CTA to display: In this option, you need to select CTA
  • Image Logo: In this option you need to upload a image for the CTA popup modal.
  • Image Position: In this option, you can change the position of the Show Modal CTA

The Output of Show Modal CTA

Once you click on the Modal button you will be able to see the output as shown below.

Floating CTA

The Floating button sticks to the top or bottom of the screen and stays with users wherever they scroll.

  • You will find this option in WordPress Dashboard -> Navigate to AMP option panel -> AMP CTA -> Enable “Floating CTA” option.

  • Select a CTA to display: In this option, you need to select CTA.
  • Image Logo: In this option, you need to upload a image for the CTA Floating Button.

The Output of Floating CTA

Once you click on the Floating button you will be able to see the output as shown below.

Styling your CTA

You can Change the Colors and Appearance of CTA Box. If you want to style your Call To Action, you can follow the below steps.

You will find this option in WordPress Dashboard -> Navigate to AMP option panel -> AMP CTA -> BOX

  • Box Background: In this field, you can change the Box background color of the CTA BOX.
  • Title Color: In this field, you can change the text color of the CTA BOX
  • Button Background: In this field, you can change the Button background of the CTA BOX.
  • Button Text Color: In this field, you can change the Button text color of the CTA BOX.

2. CTA Bar:

CTA Bar: Which sticks on the bottom of the browser window throughout the website. This is how it looks

AMP CTA Bar Demo
AMP CTA Bar Demo

Let’s see how can we create this! 

Call To Action bar is similar to the Notification bar, which can be displayed all over the website.

To create custom Call To Action Bar, you follow the below steps.

 Go to WordPress dashboard -> AMP CTA -> CTA Bars.

  2.1: AMP CTA Bar Settings:

  • CTA Bar Content: First of All, enable CTA Bar Content.
  • CTA Bar Description: Here you can enter the description of the CTA Bar.

  • Bar Location: In this option, you will select the bar location here we have two option bottom or top.

  • Primary Button: Enable this option to show the primary button.
  • Button text: In this field, you can enter the button text.
  • Button URL: In this Field, you can enter your Destination URL where you want to take your visitors.
  • Secondary Button: This option is similar to the primary button.

  • Close Button: Enable this option to close button.
  • Close Button Type: Here are two option X and custom text as per requirement you can select any of these.

  2.2: Color Scheme:

  • Title Color: Using this option you can choose the title color for CTA bar.
  • Bar Background: Using this option you can choose the background color for CTA bar.
  • Primary Button Text Color: Using this option you can choose the Primary Button text color for CTA bar.
  • Primary Button Background: Using this option you can choose the Primary Button Background color for CTA bar.
  • Secondary Button Text Color: Using this option you can choose the Secondary Button text color for CTA bar.
  • Secondary Button Background: In this option, you will choose the Secondary Button background color for the CTA bar.
  • Close Button Text Color: In this option, you will choose the Close Button Text Color for the CTA bar.
  • Close Button Background: In this option, you will choose the Close Button Background color for the CTA bar.

  2.3: Display Condition.

Here you can set the display condition to display CTA bar

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.

  2.4: CTA Bar Status.

CTA bar status, there are two option Active and inactive.

  • Active: If you want to make bar status visible then select this option.
  • InActive: If you want to make bar status hide then select this option.

The Output of the CTA BAR

3. Contact Bar:

You will find this option in the WordPress Dashboard  -> Navigate to AMP option panel -> Contact Bar.

  3.1: CTA Contact Bar.

  • Contact Bar: If you enable this option CTA contact bar will be displayed on AMP site.
  • Call: IF you enable this option contact icon will be displayed on your AMP version.
  • Enter Phone Number: In this field, you can enter the phone number.
  • Email: If you want to display an email icon in CTA contact bar then enable this option.
  • Skype: If you want to display a Skype icon in CTA contact bar then enable this option.
  • WhatsApp: If you want to display a WhatsApp icon in CTA contact bar then enable this option.

  3.2: Color Scheme.

  • Contact Bar background: In this option, you will choose the background color for the Contact Bar.

The Output of the CTA Contact Bar:

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on April 15, 2021

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.

    Was this article helpful?

    Comments

      1. Just checked, It seems to work. What went wrong?

    1. The CTA is a great feature! I am using it as the main order button for my site so I want to disable the, “X” to close the AMP CTA Bar so that it is permanent. How can I do this?

    2. How can we make the button link dynamic? Each product has a different link to click on. Is that possible using Advanced Custom Fields? pretty much something like this?: <a href="” target=”_blank”>

      1. Hi Chris Kirksey,

        Right now it is not possible but you can contact our support team from here we will create a document for this.

      1. Hi Kiky Poo,

        Will you please provide a screenshot exactly how you want to create the call to action in AMP pages so that we will check it once and let you know.

    3. For the CTA box, Can we set Display Condition? Or certain posts for instance?

      1. Hi Pierre,

        If you want to Exclude CTA for specific posts/pages for this follow these steps go to WordPress dashboard -> AMP option panel -> AMP CTA -> BOX-> In this option “Exclude CTA for specific posts/pages” you need to select post/pages which don’t want to show CTA BOX like below the screenshot – https://take.ms/nNTX6 if you have issue/problem please contact our technical team – https://ampforwp.com/support/ and they will help you to fix the issue as soon as possible.

    4. Hello Thanks for sharing this valuable information. But i have a question can you please help me
      I’m using Elementor plugin free version and AMP plugin, All my pages & post design in Elementor. When i used button middle of content they will not show on mobile but in desktop and laptop shown the button
      https://www.top2stock.in

    Leave a Comment