How to use Call To Action (CTA) in PWA

We are giving authority to the user to add or install the 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 the 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 activating this plugin click on the Settings option like below the screenshot.

2. Once you click on settings links it will redirect to the Features option here enable the “Call to action” 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 do 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

Once you check the “Sticky Bar ” option three options 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.
Show on Desktop CTA: Check this option to show Desktop CTA on the Sticky bar.
Show CTA banner without scroll: Check this option to show CTA banner without scroll on the 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

To make it easy, we have created a video.

2. Menu Button

Once you check the “Menu Button ” option two options 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 downloaded on your end

To make it easy, we have created a video.

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

To make it easy, we have created a video.

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

2. Once you click on settings links it will redirect to the Features option here enable the “Call to action” 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 the instruction option you can add text that you want to display on Ios popup content and then click on the “Save Changes” button.