iperceptions Comment Card Methodology

Transcription

1

2 INTRODUCTION Comment Cards provide the ability to collect tactical feedback from your website visitors using a passive, user- initiated invitation methodology. The goal of this document is to provide the technical instructions to implement and activate an iperceptions Comment Card. Note that Comment Cards are available starting at the Premium plan. USER EXPERIENCE Upon entry to a page where the iperceptions JavaScript has been implemented, visitors will see a Feedback button appearing in any of 8 possible positions (any of the 4 corners or sides of the screen), with the default position being in the bottom-right corner: At any time, visitors can hover over the Feedback button. After doing so, the feedback button will be replaced with a message box inviting them to provide their feedback. The message can be customized within the iperceptions portal. Hover mouse over Feedback button 2

3 After clicking on the message box, a new window will open which will contain the Comment Card that you have created. After completing a Comment Card, visitors will still be able to see the Feedback button on their screen. No limit is set to the number of Comment Cards that can be completed, so visitors will be able to fill out as many as they would like. 3

4 TECHNICAL INSTRUCTIONS Within the Collect section of the iperceptions portal, you can choose from 3 different Feedback button styles. You will also be able to modify the Feedback button s position on the visitors screen, as well as its color. The text within the message box (the one seen when hovering over the Feedback button) can also be modified, along with its colors. STEP 1: SET YOUR FEEDBACK BUTTON S POSITION The Feedback button can be displayed within any of the 4 corners or 4 sides of the visitor s screen, and will remain in this position even when the visitor scrolls or zooms within a page. You can specify the Feedback button s position by using the drop-down provided: 4

5 STEP 2: MODIFY YOUR FEEDBACK BUTTON You have the ability to select between 3 different Feedback buttons. You can also choose to change the color of both the icon and the font / image within the button by using their respective color palettes. The default colors chosen are orange for the icon, and white for the font / image: STEP 3: MODIFY THE MESSAGE BOX A default message is provided whenever a visitor hovers over the Feedback button: Got something to say? We re listening! You have the ability to change the text within this message box, while you can also choose to change the color of the message box s border and background color, as well as the color of the font. The default colors for these items are dark grey for both the border of the message box and text within it, while white is used for the background of the message box: 5

6 STEP 4: SAVE AND PREVIEW YOUR MODIFICATIONS After you have finished making your selections from Steps 1 through 3, click the Apply button provided to save your changes. Upon doing so, you will be able to preview the Feedback button that you have customized within the window provided to the left side of the page: If you would like to modify your Feedback button, simply repeat Steps 1 through 3, save your changes, and refer to the Preview screen until you are satisfied with the modifications you have made. STEP 5: OBTAIN THE REQUIRED FILES FOR YOUR COMMENT CARD After you have completed making the desired modifications for your Feedback button, click on the Download All Files button provided to obtain the files you will require to implement the Comment Card on your website: 6

7 These files will be provided within a.zip folder, and will contain the following items: - A JavaScript file which you will need to implement on all of the pages for which you would like the Comment Card to appear - A PNG image file for the Feedback button that you modified - A PNG image file for the roll-over message box seen when visitors hover over the Feedback button STEP 6: IMPLEMENT THE COMMENT CARD FILES The.zip file you downloaded in Step 5 will include a folder named iperceptions, within which you will find the items listed above. The iperceptions folder should be placed on the root of your website. If you choose to place the iperceptions folder in a different location, you will need to update the JavaScript variable iperceptions.imgrootpath to point to the absolute folder location of the PNG images for the Feedback button and roll-over message box. Once the necessary files have been added, the Feedback button can be included on your website through a JavaScript tag. For best performance, we recommend loading the iperceptions Comment Card JavaScript library asynchronously after page load, or to use a standard script tag with the defer attribute: <script src= defer= defer ></script>. The JavaScript library to include is contained in the.zip file, inside the folder iperceptions/[project ID]/[language]/. 7

8 Frequently Asked Questions (FAQs) Q. Where on my website should I implement the iperceptions JavaScript? For a consistent user experience, we recommend to include the Comment Card icon on all pages of your website. An easy way to achieve this is through a website global footer. Q. Where within my code should I implement the iperceptions JavaScript? It is strongly recommended that the iperceptions JavaScript be implemented directly above the closing </body> tag. You must also ensure that the iperceptions JavaScript is not placed within any iframe tags. Q. Are there any plugins available within which I can implement the iperceptions Javascript? Yes there are. Visit for all available plugins and instructions. Q. How can I preview the live version of my Comment Card? You can preview the live version of your Comment Card by either placing the iperceptions JavaScript within a staging / testing environment. However, if one is not available to you, then you could consider placing the iperceptions JavaScript on a test page which is not linked to your website s navigation. Q. What type of changes would require me to download and implement new files for my Comment Card? If you were to implement the iperceptions JavaScript for your Comment Card today, and you chose to make modifications at a later date, you would need to download and implement new files for your Comment Card if you choose to modify the Feedback button s position, style and color, and also if you choose to modify the message box s text or color. Doing so would ensure that the modifications you made to these aspects of the Feedback button can be applied. Otherwise, any changes that you make to the Comment Card itself (e.g. modifying the Focus of Comment question) would automatically be applied to the iperceptions JavaScript that you have already implemented. 8

9 Q. I want to use my own Feedback button and roll-over message box. Is this possible? Yes it is. You would need to update the JavaScript variable iperceptions.imgrootpath to point to the absolute folder location of the images you would like to use for the Feedback button and roll-over message box. You would just need to ensure that the images you choose are the same sizes as the default ones (68 x 68 for the Feedback button, 180 x 68 for the message box). Q. Do I need to use a floating icon? Can I use a text link or a static image instead? The floating icon can be disabled by removing a line at the end of the JavaScript library. The Comment Card can be opened from a text link or static image by attaching a small JavaScript code to the onclick event of the link or image. If you want to load the iperceptions Comment Card from a link or image, associate the onclick event handler to call the JavaScript function, iperceptions.ipecc(). If you want do not want to show the iperceptions floating icon, you should remove the call to iperceptions.ipeicon(); at the end of the JavaScript library. Q. Do I implement the same iperceptions JavaScript and files for multi-lingual Comment Cards? No you do not. Each language pack that you add to your Comment Card requires its own set of files and JavaScript. To obtain the files for each of the language packs for your Comment Card, simply use the Language drop-down menu provided in the top-right corner of the Collect page for your Comment Card, apply your desired modifications for this language, then click the Download All Files button. Overall, the English version of the iperceptions JavaScript needs to be implemented on the English language version of your website, the French JavaScript needs to be implemented on the French language version of your website, etc. Starting at the iperceptions Professional plan, you have the option to add our Implementation Support professional service where we can provide a customized iperceptions JavaScript and files for your Comment Card for a more standard implementation process. Please feel free to reach out to our Sales team for more information at (then select Sales when given the option), or you can click here to schedule a meeting. Q. Can I use a Tag Manager to implement the iperceptions JavaScript? Yes you can. In fact, iperceptions strongly recommends using a Tag Manager solution to place the iperceptions JavaScript on your website. iperceptions has worked with a variety of tag management solutions, including Ensighten, Satellite, Tealium, Bright Tag, and several homegrown tag management systems. The iperceptions JavaScript tag obtained from the iperceptions portal can be injected as a piece of custom JavaScript content. For example, if you use Ensighten the iperceptions 9

10 JavaScript can be configured through the Ensighten App Library interface. All you need to do is choose iperceptions from the Apps section of Ensighten, and the Ensighten wizard will prompt you for your survey s ID and language, as well as the deployment conditions for the survey. 10

11 Please contact your iperceptions consultant for more information iperceptions, Inc. is the inventor of Active Research, the evolution of Enterprise Customer Feedback Management and Digital Analytics. The company s solutions are powered by the Active Research platform, which addresses specific business objectives by capturing visitor perceptions in the Moment of Truth using advanced engagement technologies and trusted research frameworks to drive actions in existing business processes. Founded in 1999, iperceptions has more than 14,000 clients worldwide that trust iperceptions for in-depth analysis of real visitor s behavior. See how iperceptions can improve the entire customer lifecycle and your bottom line today, visit iperceptions.com.