Client Reference

Let us dive deeper in what can you achieve with Zonka Feedback web widgets.

Web Surveys and Workspaces

Our web client for web surveys is workspace specific and each workspace may contain multiple surveys. The web client will expose at max ONE type of each widget - Pop over, Pop Up and Side bar. There could be multiple surveys with enabled pop overs or pop ups and side bars, the one which was enabled or updated last, will be visible through the workspace web client.

You don't need to re-install the code if you build a new widget or survey within a workspace and you already have it installed on your website.

Identify logged-in visitors

Identifying your Users allows you to link your Survey Responses to your customers, visitors or users of your product or app. For example, if you're running an eCommerce Website and are taking feedback after a purchase is completed, identifying a respondent can help you connect and link the survey response and satisfaction to the shopper on your website and the items they purchased.

Identifying Users also allows you to better segment and target the user and sync the responses to other tools and systems you use.

Once you have successfully installed our client, you should probably start by identifying your users. Although the client can be used in anonymous mode, identifying your users will provide you access to many useful features like segmenting your users and building target audiences, among others.

We can identify users with these variables

Attributes

Variable Name

Contact Mobile

contact_mobile

Contact Email

contact_email

Contact Unique Id

contact_uniqueId

Contact Name

contact_name

You can create more such attributes in Survey > Build > Variables.

// Some code

Passing additional variables

When you're copying the code from the Install JS Client Code section, you can choose from Anonymous Mode or Logged In Mode. The following code block is responsible for identifying your users. When using the Logged In mode code, make sure that you replace the static code values with dynamic user data.

In addition to identifying the users, you can also pass other variables (Contact Variables, Survey Variables or Hidden Variables) in the code like country, subscription plan, user ID and more.

_zf('variables', {  
contact_email: "[email protected]",  // Replace with User Email 
contact_name: "Robert Hopkins",  // Replace with User Name
subscription_plan: "Professional", 
subscribed_date: "August 1, 2022",
country: "United States", 
gender: "Male" 
})

Passing variables in Web Surveys enriches your responses and reports, and these variables are available as filters in the platform.

Manually trigger surveys

Use the following JS code to manually open the widget when a button or link is clicked.

You can place the manual trigger in the on Click event in your webpage in the following way.

<a onclick = "_zf('startForm','SURVEY CODE');">
Click Me</a>

You can place the manual trigger in the on Hover event.

<a onhover="-zf('startForm','SURVEY CODE';">
Button</a>

You can add this manual trigger in the onload event as well.

<a onload="_zf('startForm','SURVEY CODE');">
PageURL</a>

You can get the manual trigger code under the JS Client Code Tab in the widget configuration page.

Setting up Multilingual Survey

Zonka Feedback's web client supports multilingual survey widgets, allowing your surveys to automatically load in the correct language for each visitor. There are two methods for controlling widget language — automatic detection from the browser/website, and explicit language configuration via the JS client.

Method 1 — Automatic Language Detection (Default)

By default, the Zonka Feedback JS client reads the lang attribute on the <html> tag of the page it is installed on, and maps it to the corresponding language configured in your survey.

<!-- Example: A French website -->
<html lang="fr">

This will result in the we widget showing the survey in French Language detecting the language fro the lang tag.

Note: The mapping is case-insensitive. Both fr and FR will resolve correctly.

No additional configuration is required for this method to work. If the detected language matches a language that has been added to your survey, the widget will load in that language automatically.

Method 2 — Passing a Language Explicitly

If you want to override the automatically detected language and force the widget to load in a specific language, you can pass a lang parameter using the settings function in the JS client code.

Important: When Method 2 is used, it takes precedence over Method 1. The automatically detected page language is ignored.

_zf('settings', { language: 'fr_FR' })

Place the settings call within your Zonka Feedback JS snippet, after the core embed script and before any other _zf calls.

Example:

<!-- Zonka Feedback JavaScript Code Starts -->
<script id="zfEmbed">
  window._zfQueue = window._zfQueue || []; function _zf(){_zfQueue.push(arguments); }
  (function() { ZonkaFeedback = function (en, fb){ document.body.addEventListener(en, fb, false); };
  var sc, w, d = document, ce = d.createElement, gi = d.getElementById, gt = d.getElementsByTagName,
  id = "zfEmbedScript"; if (!gi.call(d, id)) { sc = ce.call(d, "script"); sc.async=!0; sc.id = id;
  sc.src = "https://us-js.zonka.co/61645143923bbb00070e3670";
  w = gt.call(d, "script")[0]; w.parentNode.insertBefore(sc, w); }})();

  _zf('settings', { language: 'fr_FR' })   // Force the widget to load in French

  _zf('variables', {
    contact_name: "John Appleseed",
    contact_email: "[email protected]",
  })
</script>
<!-- Zonka Feedback JavaScript Code Ends -->

Language code reference

Please use this table as a reference for passing the laguage code for your survey language for the language parameter.

Language

Language Code

English

en_US

French

fr_FR

Tamil

ta_IN

German

de_DE

Italian

it_IT

Hindi

hi_IN

Arabic

ar_AE

Gujarati

gu_IN

Spanish (Latin)

es_US

Spanish (European)

es_ES

Malay

ms_MS

Indonesian

id_ID

Russian

ru_RU

Portuguese (Brazilian)

pt_BR

Portuguese (European)

pt_PT

Swedish

sv_SV

Danish

da_DA

Norwegian

nb_NB

Dutch

nl_NL

Finnish

fi_FI

Japanese

ja_JA

Korean

ko_KO

Bengali

bn_IN

Marathi

mr_IN

Odia

or_IN

Punjabi

pa_IN

Kannada

kn_IN

Telugu

te_IN

Malayalam

ml_IN

Romanian

ro_RO

Chinese

zh_CN

Azerbaijani

az_AZ

Canadian French

fr_CA

Hungarian

hu_HU

Haitian Creole

ht_FR

Burmese

my_MM

Vietnamese

vi_VN

Hebrew

he_IL

Thai

th_TH

Chinese (Traditional)

zh_TW

Turkish

tr_TR

Polish

pl_PL

Cantonese

yue_CN

Gaeilge

ga_IE

Cymraeg

cy_GB

Afrikaans

af_ZA

Czech

cs_CZ

Croatian

hr_HR

Slovenian

si_SI

Bulgarian

bg_BG

Dhivehi

dv_MV

Nepali

ne_NP

Somali

so_SO

Hmong

hmn_HMN

Serbian

sr_RS

Ukrainian

uk_UA

Latvian

lv_LV

Slovak

sk_SK

Khmer

km_KH

Filipino

fil_PH

Language Resolution Behaviour

The table below summarises how the client resolves language in every possible scenario:

Situation

Behaviour

Detected/passed language matches a language added to the survey

Widget loads in that language. Language selection popup does not appear.

Detected/passed language does not match any language added to the survey

Widget loads in the survey's default language. Language selection popup does not appear.

No language is detected and no language is passed

Widget loads in the survey's default language. Language selection popup behaviour follows your survey configuration.

The language selection popup will never open when a language has been detected from the page or explicitly passed via settings, regardless of whether the language matches a survey language or not.

Configuring Button Text for Multiple Languages

For Bottom Bar & Side Tab type widgets

For the Bottom Bar and Side Tab widgets, the button text visible to your visitors before they open the survey can be customised per language.

To add translated button text:

Go to the widget configuration for your Bottom Bar or Side Tab.
Click Add for other languages — this opens a language panel listing all languages currently added to your survey.
Enter the button text for each language and save.

When a visitor's language is detected or passed, the button text will automatically display in the matching language. If no matching translation is found for the button text, the default language text is used.

This multilingual button text configuration is available only for the Bottom Bar and Side Tab widget types.

Throttling Options for Manual Triggers

Zonka Feedback provides the ability to control how and when widgets appear on your website even when you are using Manual Triggers. This feature can help improve user experience by ensuring that the widget is not displayed too frequently.

Throttling Methods

You can trigger the widget with the following options for controlling its display behavior:

Throttle by Page This option ensures that the widget is shown only once per page load. After the widget is triggered on the page, it will not appear again on the same page.
```
_zf('startForm', {'widgetId': '3xZbV7', 'throttle': 'page'})
```
- Usage: This method is ideal if you want the widget to appear only once per page, regardless of how many times the user refreshes the page.
Throttle by Session This option ensures that the widget will be triggered only once per session. The session is determined based on the user's visit to your site, and the widget will not appear again until the user’s session expires or they close the browser/tab.
```
_zf('startForm', {'widgetId': '3xZbV7', 'throttle': 'session'})
```
- Usage: Use this method if you want the widget to appear only once during the user's entire session. If the user navigates between pages within the same session, the widget will not show again.
Throttle by Session and Page This option combines both session and page throttling. The widget will be shown only once per page load, and it will not appear again on the same page or during the same session.
```
_zf('startForm', {'widgetId': '3xZbV7', 'throttle': 'session-page'})
```
- Usage: This method is useful when you want to ensure that the widget doesn't appear more than once on the same page, and it won’t be triggered again even if the user navigates through different pages within the same session.

Example Use Case

Imagine a scenario where you want to show a survey widget to a user only once per page, but you don’t want it to show again on the same page reload or during the same session. A typical scenario can be a survey being triggered after a purchase or a booking has been made.

You can use the following JavaScript code:

javascriptCopy_zf('startForm', {'widgetId': '3xZbV7', 'throttle': 'session-page'})

This code ensures that the widget will only be triggered once during the entire session, and it won’t show again on the same page load.

Register Callbacks functions

These events allow you to execute any JavaScript code at specific moments in the lifecycle of a survey. For example, redirect a user to a new page once they complete a survey.

Zonka Feedback offers the following functions:

Function

onClose()

Gets called when the user dismissed a survey by clicking on the “x” in the top right corner.

onOpen()

Gets called when a survey widget becomes visible to your user.

onSubmit()

Gets called when the user completed (submitted) the entire survey.

Page overwriting

There are instances when the page titles are difficult to understand and filter, hence you can rename these pages with a user-friendly names. Here is how you can do it.

_zf("pageTracking",
    {
    "title":"This is custom page title", 
    "path":"/product/detail"
    }
   );

Disable client

Next to importing user characteristics, Zonka Feedback also lets you track user event data. You can use event tracking to launch in-app surveys for users that performed – or didn’t perform.

You can turn off the customer tracking by simply manipulating the following variable - disableTracking is enabled/disabled and publishing it within your Javascript client code.

_zf(“disableTracking”,true);

If you wish to turn it back on, you can simply remove it.

Reset on Logout

Zonka Feedback allows you to delete individual logged-in users' browser data by using the resetUser method. The method resets all visitor/logged-in user data stored in their localStorage, or sessionStorage. This information includes attributes, session history, survey responses stored in the browser, etc.

We recommend using this when the user logs out of your web app.

_zf(‘resetUser’);

Getting Help

To get help with the JS client troubleshooting, please contact ZF Support. Our team will help you diagnose the issue you must be facing while setting up your web surveys.

PreviousInstallation NextWhat all data is collected

Last updated 1 month ago

hashtagWeb Surveys and Workspaces

hashtagIdentify logged-in visitors

hashtagPassing additional variables

hashtagManually trigger surveys

hashtagSetting up Multilingual Survey

hashtagMethod 1 — Automatic Language Detection (Default)

hashtagMethod 2 — Passing a Language Explicitly

hashtagLanguage code reference

hashtagLanguage Resolution Behaviour

hashtagConfiguring Button Text for Multiple Languages

hashtagThrottling Options for Manual Triggers

hashtagThrottling Methods

hashtagExample Use Case

hashtagRegister Callbacks functions

hashtagPage overwriting

hashtagDisable client

hashtagReset on Logout

hashtagGetting Help