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 two types of CTA buttons you can Add.

  1. CTA BOX
  2. CTA 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.

From, WordPress Dashboard itself you can Create New CTA Box.

Click on Add New CTA Box

Add New CTA Box Steps
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.

Here is an example, how CTA looks in AMP

AMP CTA Example
AMP CTA Example

The positioning of your CTA

CTA Box Positioning
CTA Box Positioning
  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.

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.

Go to AMP settings > AMP CTA > 1. BOX

Style AMP CTA
Style AMP CTA

From here you can Add styling to your Call To Action Plugin. You can Add your desired colors to 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 Schema:

  • 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:
AMP CTA Bar Example
AMP CTA Bar Example

3. Contact Bar:

Goto WordPress admin area  -> 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.

Updated on April 23, 2019

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

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.

Leave a Comment