Last Updated on February 21, 2020

How to create a page where you can promote your client’s customers to leave positive reviews/feedback

Overview Video

Review Experience Popup

  1. Install and activate the “popup-builder-platinum.zip” plugin which is found on Egnyte under Website Build Resources -> Plugins and Themes
  2. Create a “HTML” popup with the plugin.  Set the title to “Review Experience Popup” or whatever you want it to say
  3. Paste the code below in the “Text” view in the general section.
  4. Replace yourplaceidgoeshere with the business PlaceID within the code.
  5. By default, we will be sending poor experience to “/satisfaction-survey/” URL which you will create later.  If you want it to go to a different URL then set the URL to be what you want it to go to.
  6. Press the “Save Changes Button”
  7. Go to “All Popups” and take note of the shortcode for the popup you just created.  As long as it is your first one and you didn’t press the “Preview” button when building it it should be sg_popup id=1

[js]<style>#sgcboxLoadedContent { text-align: center; } .review-popup-a i.fa { font-size: 70px; margin-right: 0; padding-top: 15px; } a.review-popup-a { border: 1px solid; display: inline-block; padding: 5px 20px; text-align: center; font-size: 30px; font-weight: bold; border-radius: 8px; margin: 20px; } </style>
<h2>How was your experience?</h2>
<a class=”review-popup-a” href=”https://search.google.com/local/writereview?placeid=yourplaceidgoeshere” target=”_blank” rel=”noopener”><i class=”fa fa-smile-o” aria-hidden=”true”></i>
Good</a> <a class=”review-popup-a” href=”/satisfaction-survey/”><i class=”fa fa-frown-o” aria-hidden=”true”></i>
Poor</a>[/js]

Satisfaction Survey Page

  1. Create a new page and name it “Satisfaction Survey” and make sure the permalink is “/satisfaction-survey/”. If you want the page to have a different URL then be sure to update the URL in the Review Popup as well.
  2. Put whatever information you want on this page.  If you want it to look like the following survey you will need to use Gravity Forms with the “Survey Add-On”.

Gravity Forms with Survey Add-on

  1. Install Gravity Forms and add in the license key if the site doesn’t already have it
  2. Install the Survey Add-on by going to Forms -> Add-Ons and find the add-on and install it
  3. You can now either build out your own survey form or if you want a starting point you can download the example form and import it into your WordPress site
    1. To import the sample, go to Forms -> Import/Export and choose “Import Forms” and upload the file and press the import button.
    2. You can now go to “Forms” and make any other changes you like to the form such as add/remove fields or setup a confirmation page and notifications.
  4. Add the survey form to the Satisfaction Survey Page

Google Reviews Plugin

  1. Install the “google-reviews-business.zip” plugin which is found on Egnyte under Website Build Resources -> Plugins and Themes
  2. To activate the plugin you will need to provide a license key.  From within the same folder on the Egnyte drive there is a txt file called “Google Review Plugin Licenses.txt”.  Open it up and you will see a list of license keys.  Take the next available one and enter the name of the website before the license key and save the file.  Now copy that license key and within WordPress go to Settings -> Google Reviews Business -> Settings and enter in the license key
  3. You will then need to enter in an API key.  To do this you will need to:
    1. Follow the directions in the plugin to do this.  Do not add sites to our billing profile
  4. Once the plugin is installed and active with a valid license go to Plugins and update it to the latest version.
  5. You can now configure the plugin by going to Settings -> Google Reviews Business -> Shortcode Builder and fill out the prompts
    1. Enter the name of the place (and address if it doesn’t pull up)
    2. Select the Place
    3. Under Review Options be sure to check the first two options “Try to get more than 5 Google reviews” and “Enable Google Rich Snippets”
    4. Under Display Options choose a photo for the icon.  The icon is in the shape of a circle so using a square image is best
    5. Enable/Disable the other settings as you see fit and grab the shortcode
  6. Alternatively, you can use the following pre-built shortcode and just replace the following:
    • place_name – nameoftheplace
    • place_id – placeidgoeshere
    • place_photo – http://theurloftheimagegoeshere.png

[js][google-reviews-pro place_name=’nameoftheplace’ place_id=placeidgoeshere auto_load=true rating_snippet=true pagination=10 sort=1 min_filter=4 place_photo=http://theurloftheimagegoeshere.png disable_user_link=true view_mode=list open_link=true lazy_load_img=true reviews_lang=en][/js]

Leave us a Review Button

Simply add the following html where you would like the button to go. Inside of the a tag you will notice that there are 2 classes. “button” and “sq-confirm-popup-1”. The first class should make the link look like a button depending on the theme styles. If not, add in the necessary classes to your theme that will make it look like a button. The second class is what causes the popup to happen. Make sure this class matches the shortcode of the review popup.

[js]<div style=”text-align: center;”><a class=”button sg-confirm-popup-1″ href=”#”>Leave us a review</a></div>[/js]

Look at the page and make adjustments as necessary

If the popup works but you don’t see the smiley and frowny face then the site might not be using Font Awesome.  Add the following script to the top of the popup html and it should fix them

[js]<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.8/css/all.css” integrity=”sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S” crossorigin=”anonymous”>[/js]

If this doesn’t work, you may need to add the style sheet to the header, or you may need to download the font awesome 4 and add it directly to your site and link to that style sheet instead.

If the faces are working but the words are next to the faces, add <br> in front of both Good and Poor inside the Popup text.

If the words are now under the faces, but when hovering the space next to the faces is underlined, add the following code before </style>.

[js]a.review-popup-a { text-decoration: none;}[/js]

If the line is now gone, but the face color doesn’t change on hover, add the following code before the previous code (make sure to change the color to something that will fit the site – use the dropper tool in the upper right hand corner of the browser to easily copy a color).

[js]a.review-popup-a:hover {
color: [insert color];
}[/js]

If you add a badge to the footer of the website it will have the reviews show up on all of the pages of the website which will in turn allow Google to be able to show star ratings on any/all pages in their search results.  We obviously aren’t in control which pages Google will add these ratings to but at least the markups are there for Google to be able to grab them if they choose to.

Using the plugin you will want to generate a shortcode that will give the right type of badge you want.   Here is the shortcode for the badge we are using on SeboMarketing.com  You will obviously have to modify the shortcode to match your client’s needs.

[google-reviews-pro place_name=’Sebo Marketing’ place_id=ChIJse7hmjKFTYcRP5gXax4CCdY auto_load=true rating_snippet=true place_photo=https://www.sebomarketing.com/wp-content/uploads/2017/10/square-icon-sebo.png view_mode=badge_inner lazy_load_img=true]