1. Home
  2. Extension
  3. How to use Call To Action (CTA) in PWA

How to use Call To Action (CTA) in PWA

We are giving authority to the user to add or install PWA app in multiple ways like Sticky Bar, Menu Button, and Shortcode.

If you want to add Call To Action in PWA then first you need to purchase and install Call to Action for PWA plugin.

For more details on how to download an extension for this Click Here

After installing you need to activate the license key you will find this option in the WordPress Dashboard -> Navigate to PWA -> Premium Features ->Add Ons -> Enter the License Key after that click on the “Activate” button.

Now Call to Action feature is activated on your website.

Note: If you are using above version 1.7.7 of PWAforWP plugin then Call To Action option is available on Feature tab

1. After Activate this plugin click on the Settings option like below the screenshot.

2. Once you click on settings links it will redirect to Features option here enable “Pull To Refresh” option. Click on the “gear” icon like below the screenshot.

3. Once you click on the gear icon you can see Call To Action page which option you want just check this option.

Note: If you are using below version 1.7.7 of PWAforWP plugin then Call To Action option is available on Premium Features tab.

We have three types of Call To Actions.

  1. Sticky Bar
  2. Menu Button
  3. Shortcode
  4. Ios popup content

1. Sticky Bar

Once you check “Sticky Bar ” option three option will be displayed.

  • Message: In this “field” you need to enter a message to show on the Sticky bar
  • Button Text: Button Text will be the Text which you want to show on Call To Action Button.
  • Position: In this option, two option will be displayed “Top” or “Bottom” as per your requirement where you want to display sticky bar and then click on the “Save Changes” button.

Design:

  • Bar Background Color: In this field, you can change the background color of the Sticky Bar.
  • Bar Text Color: In this field, you can change the text color of the Sticky Bar.
  • Button Background Color: In this field, you can change the background color of the Sticky Bar button.
  • Button Text Color: In this field, you can change the text color of the Call TO Action button.
  • Button Font Size: In this field, you can change the font size of the Call To Action button.

The Output of the Sticky Bar

Top Sticky Bar

Bottom Sticky Bar

2. Menu Button

Once you check “Menu Button ” option two option will be displayed.

  • Background Color: In this field, you can change the background color of the Menu Button.
  • Text Color: In this field, you can change the text color of the Menu Button.
  • Once you check this “Menu Button” option in Menu option one option will display “Mark this as PWA installable” on which menu you want display Call To Action you need to check this option and click on the “Save Menu” like below the screenshot.

The Output of the Menu Button

Once you click on the menu button call to action will be download on your end

3. Shortcode

Copy this shortcode and paste where you want to display add to home button.

For example, I’m copying this “[pwaforwp-add-home] “shortcode and paste in the post like below the screenshot.

The Output of Add To Home

4. Ios popup content

After Activate this plugin click on the Settings option like below the screenshot.

2. Once you click on settings links it will redirect to Features option here enable “Pull To Refresh” option. Click on the “gear” icon like below the screenshot.

3. Once you click on the gear icon you can see Call To Action page in instruction option you can add text which you want to display on Ios popup content and then click on the “Submit” button.

The Output of Ios popup content

That’s it for this tutorial!

We hope we’ve clear your doubts in case If you have any feedback or questions, Just contact us here and we are always available for you.

Updated on February 6, 2020

Was this article helpful?

Related Articles

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

Comments

  1. How do I center the button in a column? It seems to only want to left-justify.

  2. Hi,

    Seems to be great.
    I have one question; is it possible to use the CALL TO ACTION link from another website to download the PWA of a particular wordpress website?

    Regards
    Filip

    1. Hi Filip,

      PWA is work on the same domain, serve by ServiceWorker & manifest so, we cannot use it link only or other domain.

  3. Hi,

    Can you check my site? some phones it works, some phones it doesn’t work.
    wonder why it is not stable and how do i change the color and text?
    i want to say add to homescreen not add to home.
    https://thefarmersforum.co.nz/pwa

      1. Thanks. I will change them. for iphone it’s 320 x 460. my icon is a square shape. does it have to be exactly that size? or can it be 320 x 320 or has to be 460 x 460.
        sorry for the silly question. Im new to this website world.

Leave a Comment