Small Snap! Logo Snap! Websites

Work in progress
Snap! C++

Incredible Websites for Incredible People

Snap! Feedback Feature

Snap! Feedback

You probably noticed the blue Feedback button on the left side of the Snap! screen. You can also get that button on your very own Snap! Website.

The default looks just like the Snap! Website Feedback button. You can change it with your own graphics and also another one of the graphics we offer as part of Snap! Feedback.

The Snap! Feedback works with your Contact Us page (you get both at the same time.) When you install the feature it automatically installs the page that you can access by going to /contact (i.e. http://snapwebsites.com/contact ) The Snap! Feedback feature makes use of Lightbox2 which is capable of opening your contact page in a local pop-up window (it works even when browsers anti-pop-ups features are turned on.)

Creating a Snap! Feedback Image

As you will notice, when hovering your mouse over the Feedback button, the text changes colors and the button grows inward. This effect is obtained by flipping between "two" images. Technically, we use only one image to avoid flashing effects. We still consider having a left and a right image. The left image is the default one. The right image is shown at the time you hover your mouse over the button.

The following are examples of Feedback images as you want to upload them to change the default Snap! Feedback button:

Feedback left side button.The 2 images of the default Snap! Feedback button.

Bottom Feedback Button for Snap! WebsitesThe 2 images of the bottom Snap! Feedback feature.

A bottom-right corner feedback button with a red background. You define the position of the Snap! Feedback button so you can place it in a corner.

Top Snap! Feedback button.The 2 images of the top Snap! Feedback feature.

We attached the PNG files of those buttons at the bottom of this page. You can simple download them from here and re-load them in your website to make use of them.

In case you wanted to change the colors or text, we also attached the source SVG files (vector graphics files.) You can use them with Inkscape or Illustrator and other software that support vector graphics.

To create a button:

  • Choose the width and height including any shadow and other glowing effects.
  • Create an image of (width × 2) x height pixels (with Inkscape, setup the pixel size in Document Properties)
  • Create the two versions of the image, remember, the hover look is on the right (this is true whether the button is added to the sizes, or the top/bottom, or a corner.)
  • Save the result as a PNG image with Alpha (assuming it is required which is very likely)
  • Upload that image on your site from within the MO Feedback settings screen (see below)

Snap! Feedback Settings

Contact Form

Snap! Contact Form accessWhen you install the Snap! Feedback feature on your Snap! Website (automatic when you get a Snap! Business Website) then you get a Contact Form.

We automatically install a Feedback category for you, but you may want to add other categories such as Support and Returns. Plus, you definitively want to enter your address, a contact email address, phone number and other contact information in the form.

To do so, click on the Admin tab of your Snap! Toolbar and click on the Settings icon (second icon from the left.) In that window, look for Site building under which there is a Contact form link. Click on that link to access your Contact form settings.

That screen gives you a list of existing categories and 3 tabs at the top. The tabs are

  • List (of categories)
  • Add category
  • Settings

Snap! Contact Form

The following describes the functionality of those three tabs.

List

Lists the existing Snap! Contact categories. Click on the edit link of a category to edit it. You can change the default settings (what is selected by default when someone goes to your contact page,) and all the elements as defined under Add categories.

Add categories

To add new categories use the Add category button and enter the name of the category to add.

The name appears first. The list of recipients are plain email addresses (i.e. scott@example.com) where the contact messages will be sent.

The Auto-reply box is used to enter a message to send to anyone who posts a contact message. It is automatically sent and will usually tell the user that you received the contact message and you will respond within the next X number of days, or something of the sort.

The Weight defines the order in which the contact categories are going to be displayed. I suggest you leave all of them at 0 so they get sorted in alphabetical order. Then, to make an item the first use -1 and an item the last, use 1.

The Selected drop-down is a flag (Yes or No) used to determine which of the categories should be shown first when a user arrives on the contact page. Only one category can be selected.

Settings

This is certainly the most important tab for you, at this point. This is where you want to enter your information such as phone number, location and email address. It is suggested that you keep it short so it doesn't overflow in the pop-up window.

The top text box, named Additional Information, is the place where you enter your contact information and thank the user for being willing to send you feedback. Remember that your text should not be specific to one category. It won't change depending on the category selected.

Hourly threshold defines the maximum number of messages someone can send you within one hour. That does not work well to prevent spam since spammers use many different computers each with a different IP address. To fight spam we use a Hidden CAPTCHA instead. That works well.

Snap! Feedback Form

This Feedback form is actually the MO Feedback block configuration form. To reach this form, click on the Admin tab of your Snap! Toolbar, then click on Blocks.

Here you see a complete list of blocks. By default, we place the MO Feedback block in the footer since that's generally less intrusive there. Scroll down until you see the Footer region with the MO Feedback. Look for the configuration link on the same line, on the far right. Click on it to enter the form.

The MO Feedback block in your list of Snap! blocks.

Most of the MO Feedback form elements look a usual Block form. Note that the title is always kept hidden since the button will generally not be in a location where a standard block title would otherwise appear1.

MO Feedback Settings in your Snap! BlocksThe MO Feedback button can be placed on any one side of your screen. You choose that with the drop down that gives you a choice of Top, Left, Right, and Bottom. By default, your Feedback button will be attached to the left side of the screen.

The next parameter is the position of your button on that side. It can be expressed as a percent (i.e. 30%) or a pixel position (i.e. 320px.) It is generally a good idea to use a percent value for it works even in small windows. However, there are times when your theme uses graphics on the same edge you want to place your Feedback button on. In such a case defining the position as a hard coded pixel location may be wise.

Click the image to see a larger version.

To place the button in a corner, use 0% or 100% and one of the sides linked with that corner (i.e. to place something in the top-right corner, choose Top and use 100% in the position, or choose Right and use 0% in the position.)

The Feedback URL is set to contact by default. If you want to use a different system to gather your users feedback, you are free to change the path to anything you want. This can even be a full URL to a 3rd party website.

The Feedback URL Query and Fragment are the part after the ? character and # respectively. In my example, I use edit[cid]=2 which is the category identifier I want to show by default when my Snap! Feedback button is clicked.

You can determine the identifier of a category when you go to the edit the contact form category (see the previous chapter of this document.) At the time you edit a category, your URL looks something like this:

    /admin/build/contact/edit/2

I marked in red the category identifier. This is what you want to use in the Feedback URL Query field as shown earlier.

Finally, you have the Snap! Feedback dual image. We already talked about creating your own feedback button. I will assume you have such. So... click on the Browse... button under Feedback button image and search for your image file on your hard drive. Select it and save on your website by clicking Open (in most cases, the file browser will say Open when ready to select a file.)

Now you are ready to save the MO Feedback settings. Scroll to the bottom and click on Save. You're done.

Note that you may also select "authenticated user" inside the Role specific visibility settings text field if you only want users who have an account on your website to see the MO Feedback button. It is also possible to show or hide the button on specific pages with the last text field initialization.

AttachmentSize
feedback-blue.xcf20.17 KB
bottom.svg8.11 KB
top.svg8.19 KB
top-right-corner.svg4.21 KB
top.png10.1 KB
feedback.png7.35 KB
bottom.png10.36 KB
top-right-corner.png5.12 KB
bottom-right-corner.png5.09 KB
Snap! SEO e-Book Index:
  • 1. Say you use a Top feedback button and put the MO Feedback block your Snap! Website Footer, the title would appear in your footer when the Feedback button would appear at the top of your screen...