{"id":296,"date":"2019-09-07T09:45:35","date_gmt":"2019-09-07T09:45:35","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&p=296"},"modified":"2022-03-11T07:35:35","modified_gmt":"2022-03-11T07:35:35","slug":"how-to-use-call-to-action-cta-in-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-use-call-to-action-cta-in-pwa\/","title":{"rendered":"How to use Call To Action (CTA) in PWA"},"content":{"rendered":"\n

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

If you want to add Call To Action in PWA then first you need to purchase and install the Call to Action for PWA<\/a><\/strong> <\/a>plugin.<\/p>\n\n\n\n

For more details on how to download an extension for this Click Here<\/a><\/strong>
<\/p>\n\n\n\n

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

\"\"<\/figure>\n\n\n\n

Now Call to Action feature is activated on your website.<\/p>\n\n\n\n

Note:<\/strong> If you are using above version 1.7.7 of PWAforWP plugin then Call To Action option is available on Feature tab<\/p>\n\n\n\n

1.<\/strong> After activating this plugin click on the Settings option like below the screenshot. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.<\/strong> Once you click on settings links it will redirect to the Features option here enable the \u201cCall to action<\/strong>\u201d option. Click on the \u201cgear<\/strong>\u201d icon like below the screenshot. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. <\/strong>Once you click on the gear icon you can see Call To Action<\/strong> page which option do you want just check this option.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Note:<\/strong> If you are using below version 1.7.7 of PWAforWP plugin then Call To Action option is available on Premium Features tab.<\/p>\n\n\n\n

We have three types of Call To Actions.<\/strong><\/p>\n\n\n\n

  1. Sticky Bar<\/a> <\/li>
  2. Menu Button<\/a> <\/li>
  3. Shortcode<\/a><\/li>
  4. Ios popup content<\/a><\/li><\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    1. Sticky Bar <\/mark> <\/h4>\n\n\n\n

    <\/p>\n\n\n\n

    Once you check the “Sticky Bar<\/strong> ” option three options will be displayed. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    • Message:<\/strong> In this “field” you need to enter a message to show on the Sticky bar<\/li>
    • Button Text:<\/strong> Button Text will be the Text which you want to show on Call To Action Button. <\/li>
    • Position:<\/strong> In this option, two option will be displayed “Top<\/strong>” or “Bottom<\/strong>” as per your requirement where you want to display sticky bar. <\/li>
    • Show on Desktop CTA: <\/strong>Check this option to show Desktop CTA on the Sticky bar.<\/li>
    • Show CTA banner without scroll:<\/strong> Check this option to show CTA banner without scroll on the Sticky bar and then click on the “Save Changes<\/strong>” button. <\/li><\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Design:<\/strong><\/h4>\n\n\n\n
      • Bar Background Color: <\/strong>In this field, you can change the background color of the Sticky Bar. <\/li>
      • Bar Text Color:<\/strong> In this field, you can change the text color of the Sticky Bar. <\/li>
      • Button Background Color:<\/strong> In this field, you can change the background color of the Sticky Bar button. <\/li>
      • Button Text Color:<\/strong> In this field, you can change the text color of the Call TO Action button. <\/li>
      • Button Font Size:<\/strong> In this field, you can change the font size of the Call To Action button. <\/li><\/ul>\n\n\n\n

        The Output of the Sticky Bar<\/h4>\n\n\n\n
        \n
        \n

        Top Sticky Bar <\/strong> <\/p>\n<\/div>\n\n\n\n

        \n

        Bottom Sticky Bar <\/strong> <\/p>\n<\/div>\n<\/div>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        To make it easy, we have created a video.<\/h4>\n\n\n\n