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.

AMP CTA Box
AMP CTA Box

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

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

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 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 AMP settings > AMP CTA > 2. BAR

AMP CTA Bar
AMP CTA Bar
  1. First of All, turn ON CTA Notification Bar
  2. Give Title to your CTA Bar
  3. Write your desired Actionable text to the Button. For example, ‘Register Now’, ‘Subscribe Now’, or anything of your choice.
  4. Enter your Destination URL where you want to take your visitors.
  5. From the next step onwards, you can style your CTA Bar according to your desired colors.
AMP CTA Bar Example
AMP CTA Bar Example

Hope it helps. If you have any questions, feel free to comment below.

 

Updated on September 15, 2017

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?

Add A Comment