{"id":5769,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-nps-widget\/"},"modified":"2022-08-18T07:19:01","modified_gmt":"2022-08-18T07:19:01","slug":"landing-page-nps-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/landing-pages\/builder\/nps\/","title":{"rendered":"Landing Page NPS Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>NPS&nbsp;<\/strong>widget helps you add an NPS survey form to your landing page.<\/p>\n<p><a href=\"\/hc\/en_IN\/a-z-guide\/nps-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Net Promoter Score (NPS)<\/a> is a globally recognized and widely accepted metric that helps you measure your customers&#8217; loyalty and satisfaction.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use an NPS widget in your landing pages?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 1<\/h3>\n<h3>Navigate to the landing page builder<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create a <strong>landing page<\/strong> and subsequently <a href=\"\/hc\/en_IN\/landing-pages\/builder\/create\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the landing page builder<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add an NPS widget to your landing page<\/h3>\n<p>The blank area on the left is the <strong>Work area<\/strong> where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as <a href=\"\/hc\/en_IN\/landing-pages\/builder\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Widgets<\/a>.<\/p>\n<p>In order to add an NPS survey form to your landing page, click the <strong>NPS widget<\/strong> icon or drag and drop it onto the work area.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1793 size-full\" title=\"Landing page NPS widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-builder-nps-widget.png\" alt=\"Landing page NPS widget. The NPS widget is highlighted\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Edit the NPS widget texts to customize your NPS form as per your preferences.<\/h3>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1795\" title=\"Landing page NPS settings\" src=\"\/hc\/wp-content\/uploads\/2022\/08\/landingpage-net-promoter-score-settings.png\" alt=\"Landing page NPS widget. The settings tab is highlighted\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>As you drop the widget into the work area, the widget settings are displayed on the right <em>(as highlighted in the above screenshot)<\/em><\/p>\n<p>Here&#8217;s what the different sections under <strong>Settings&nbsp;<\/strong>mean:<\/p>\n<ul style=\"list-style-type: disc;\">\n<li><strong>Rating Type<\/strong> lets you select:\n<ul style=\"list-style-type: circle;\">\n<li><strong>NPS Rating Block Display Style<\/strong> to edit how the rating scale appears to your audience.<\/li>\n<\/ul>\n<\/li>\n<li><strong>NPS Submit Button Text<\/strong> \u2013 It allows you to edit the <strong>Button Text<\/strong> as it appears to your audience.<\/li>\n<li><strong>NPS Standard Question Text<\/strong> \u2013 Use this section to customize the text of your NPS survey question.<\/li>\n<li><strong>NPS Text<\/strong>\u2013 Use this section to:\n<ul>\n<li style=\"margin-left: 20px;\">Specify the pointer texts that you wish to display below the extreme ratings <em>(0, 10)<\/em><\/li>\n<li style=\"margin-left: 20px;\">Specify the text for a <strong>Thank you message<\/strong> &#8211; This text is displayed to the user once they submit the survey.<\/li>\n<li style=\"margin-left: 20px;\">Specify the <strong>After NPS Rating Text<\/strong> &#8211; This text is displayed to the user when they click on a score <em>(on the 0-10 scale on the NPS widget)<\/em>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>NPS Follow-up Question<\/strong>\u2013 Use this section to add a follow-up question to your NPS form. Herein, you can\n<ul>\n<li style=\"margin-left: 20px;\"><strong>Enable a follow-up question<\/strong>, or<\/li>\n<li style=\"margin-left: 20px;\">Choose to <strong>Enable Default &#8211; <\/strong>If you choose to enable default, a follow-up question will be displayed only if a customer enters a rating of 6 or less. But if you choose to enable a follow-up question, the follow-up question will be visible regardless of the customer&#8217;s rating.<\/li>\n<li>Edit your <strong>Follow up Question<\/strong> that you want to ask your audience.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<blockquote class=\"elevio-box-info\"><p>We recommend that you always enable a follow-up question for your NPS survey. Doing so helps you seek additional comments\/ remarks from your customers. These customer comments can provide valuable insights into your customers&#8217; pain points and expectations from your brand.<\/p><\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style your NPS widget.<\/h3>\n<p>Use the options under the <strong>Style&nbsp;<\/strong>tab to customize the look and feel of the NPS widget.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1797\" title=\"Landing page NPS style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2022\/02\/landingpage-nps-styling.png\" alt=\"Landing page NPS widget. The style tab is highlighted\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, the different design options available are:<\/p>\n<h4><strong>4.1 NPS Font settings and Background color<\/strong><\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Background Color<\/strong> \u2013 use it to change the color of the widget background. You can also choose to make the widget background transparent.<\/li>\n<li><strong>Button Background Color<\/strong> &#8211; use it to change the background color of submit button.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.2 NPS Text Style<\/strong><\/h4>\n<p>Use this section to customize the fonts used in the NPS widget.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.3 NPS Box Style<\/strong><\/h4>\n<p>Use this section to customize the text color and the background color for the rating scale displayed in the NPS widget. You can also scale the roundness of the NPS Box&#8217;s corners.<\/p>\n<blockquote class=\"elevio-box-info\"><p>Note: While you can alter the roundness of the corners when you select Default Block or Merged Rating Block in NPS Rating Block Display Style, you cannot do so when you select NPS Pod.<\/p><\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.4 Button Text Style<\/strong><\/h4>\n<p>Use this section to customize the font settings of the Submit button.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.5 Button Setting<\/strong><\/h4>\n<p>Use this section to customize the width, position, and padding of the Submit button as per your design preferences.<\/p>\n<div style=\"padding: 14px 0;\">If you want, you can check the <strong>Top Bottom Gap<\/strong> to put some gap above and below NPS widget.<\/div>\n<p>Click <strong>Save&nbsp;<\/strong>and that&#8217;s it! You have successfully added an NPS form to your landing page.<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add an animated progress bar to a landing page using the <a href=\"\/hc\/en_IN\/landing-pages\/builder\/progress-bar\/\" target=\"_blank\" rel=\"noopener\">Progress Bar<\/a> Widget!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The NPS widget helps you add an NPS survey form to your landing page.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[349],"ht-kb-tag":[],"class_list":["post-5769","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder-en_in"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/comments?post=5769"}],"version-history":[{"count":6,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5769\/revisions"}],"predecessor-version":[{"id":11282,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5769\/revisions\/11282"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/media?parent=5769"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb-category?post=5769"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb-tag?post=5769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}