Articles in this section

See more

Layouts

Avatar
Yan Mosyagin
  • Updated
Follow

 

Overview

VoC Feedback provides an extensible platform for customizing the layouts your customer sees. By default, your layout might be provided to you by SandSIV as part of the onboarding process or you might use an in-house designed layout. In any case the basic idea is what you put into the layout editor as code is what your customer sees.

 

Requirements and testing

It is necessary to make sure the layout is correctly displayed in the browsers your customers use. You can get a grasp of what are the currently most popular browsers at websites such as NetMarketShare* and StatCounter*. To test your layouts you can use Microsoft*'s BrowserStack*-powered service which will take screenshots of how your survey looks in various browsers. There are plenty of alternatives available online, feel free to use whichever fits your needs and requirements.

If your layout uses a responsive web design approach then you also need to make sure that built-in mobile template is off for the survey in its settings (Allow Mobile Template is set to No) so that your layout is shown to any device despite their capabilities. As with desktop layouts, please make sure to test the functionality in the most popular browsers and see if your layout is displayed properly and works properly.

 

Basics

To create a new layout you need to go to Global Settings and click the "WEB Layouts" tab. You will be presented with a list of existing layouts:

1new_layouts.PNG

Now click the Add Layout button. A window will pop up where you will be presented with a clean slate layout:

2add_layout.PNG

This is the point where you start designing your layout. While the provided WYSIWYG editor can be used to create a basic layout we recommend to use specialized tools for this purpose. You can refer to a design & marketing department in your company to get more information on how to obtain the layout which is approved for your company.

As you can see, there's another tab available next to WYSYWIG editor which is called Edit HTML. This is where you can paste your existing layout provided by a design company or by your design team. You could also create an HTML page using a web design app, in this case this is also the place to paste the generated code into.

3html.PNG

If your design has CSS styles or JS styles in a separate file, as well as external images, you can host them on your own server or CDN. However, we recommend to upload them via the File Manager to rehost them on our static assets server which will guarantee the assets' availability. File Manager is available in the WYSIWYG tab as you can see in the screenshot below:

4insert_image.PNG

Next, click the File Manager icon next to the Source input field:

5source.PNG

Once in the File Manager, click the Upload button to upload your resource. It can be a CSS style file, a JS file, an image, a font or anything else which is used in your layout.

6upload.PNG

Once you click the Upload button you will be prompted by your browser to select a file from your computer. Choose the one you want to upload and proceed.

After the upload is complete you will find your file in the list of uploaded files. Right click the file you need and click the Copy image address item in the context menu (note that the option name might depend on your browser).

7img_url.PNG

Once copied, you can go back to the HTML source editor and paste the resource's URL to the relevant place in your HTML code.

 

Supported placeholders

You can use the following placeholders in your HTML code to get required functionality for your surveys:

Placeholder Description Example
{{question_text}}

This is the most important placeholder. It outputs the actual survey in the predefined HTML structure. You will need to take that structure into account when applying your styles and customizations.

To check how the questions are presented by our survey answering system we advise to create a simple "Question Text" layout first which will only consist of this placeholder. That way you can see the HTML structure of our answering system as is.

It is not possible to make modifications to the output of {{queston_text}} other than changing the questions themselves.

This is how the unstyled layout looks:

8FAS.PNG

You can check the structure of the layout using Dev Tools or by investigating the source code of the page.
{{status_bar}}

This placeholder outputs a set of <div>s which contain values on how far into the survey your customer is.

You can use these values to create a dynamic progress bar of your choice with JS and/or CSS.

The structure of the <div>s into which this placeholder transforms is as follows:

<div class="questionnaire_statusbar_wrapper">
    <div class="questionnaire_statusbar_wide">
        <div class="questionnaire_statusbar_line" style="width:100%">&nbsp;</div>
    </div>
    <div>
        <span class="questionnaire_statusbar_percentage">100%</span>
        <span class="questionnaire_statusbar_delimiter"> - </span>
        <span class="questionnaire_statusbar_numbers">1 / 1</span>
    </div>
</div>
{{question12345_answer}} This placeholder outputs the value of one of the previous questions (Question ID 12345 in this example). For more information on how this placeholder works, please see this article. Article in the description contains examples.
{{questionnaire | meta:"CUSTOM_DATA" | default:"None"}}

This placeholder outputs the value of the metadata column provided in the import file (CUSTOM_DATA is the column name in this example, it can be any column from your original import file for the survey).

 Given the following text

Hi {{questionnaire | meta:"Firstname" | default:"Dear"}} {{questionnaire | meta:"Lastname" | default:"Customer"}},

the placeholders will transform into customized ones based on individual customer's values in the import file. For example:

Hi Jane Doe,

 

 

 

* Independent companies which are not affiliated with SandSIV.

 

Related articles

Comments

0 comments

Article is closed for comments.