CSAT Widget

The CSAT widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.

Introduction

CSAT stands for “Customer Satisfaction”. This widget allows your visitors to rate, on a scale defined by you, how satisfied/happy they are with your website, services or products. 
AB Tasty’s default example of a CSAT widget:

Configuration

Layout tab

The layout tab lets you choose the position of the CSAT widget on the website. There are 4 options:

  • Modal
  • Top banner
  • Bottom banner
  • Free placement

Top and bottom banner will anchor the widget either to the top or to the bottom of the screen.

Free placement will allow you to choose the HTML element of the page in which you want to place the widget. This requires basic knowledge of HTML and knowledge of how your website is designed.

As a modal, the widget will appear as a pop-up displayed on top of the website. When it is chosen, you are allowed to choose its position on the page:

The layer options allow you to choose the z-index of the widget (whether it is above or below your website’s content, perpendicular to your screen).

For example, this is what Above means: 

This is what Under means:

All the contents of a website are usually on the same level as each other (they have the same z-index of 0)
The custom option allows you to choose the value of the z-index of the widget. That value can take positive or negative values and whichever element has a higher z-index will appear above elements with a lower z-index, if they happen to overlap on the screen.

Widget dimensions

The widget dimensions can be set to automatically expand or contract according to the amount of content it has, if you toggle it on.

If toggled off, then it will keep a fixed size that you can set it to keep.

The “Width” section contains 2 boxes:

  • The value of the width
  • The unit of the width

Description of each unit and value:

  • vw (% of viewport width)
    • The percentage of the window’s width. The value inserted will be the percentage. 100% will occupy the whole width of the window.
  • px 
    • Stands for pixels. The value will specify the number of pixels the width of the widget will be
  • em  
    • Em is a unit of measurement which indicates size relative to the size of the font. 1em means "equal to the current font size", and 2em means 2 times the current font size
  • vh (% of viewport height)
    • Similar to vw - the percentage of the window’s height. The value inserted will be the percentage of the height that you want the width to be equal to. 
  • vmin (% of viewport minimum)
    • This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of 1 vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of 1 vmin will be equal to 1% of the viewport width.
  • vmax (% of viewport maximum)
    • This unit is based on the larger dimension of the viewport. If the viewport height is larger than the width, the value of 1 vmax will be equal to 1% of viewport height. Similarly, if the viewport width is larger than the height, the value of 1 vmax will be equal to 1% of the viewport width.

The preserve ratio toggled on will set the widget’s height automatically.

Turning it off will provide you with more options to set up the widget’s height:

Content tab

The content tab allows you to customize the contents displayed in the CSAT widget. There are 3 aspects that you can customize:

  • The question and emojis
  • The open-ended questions
  • The “Thank you” message

The main message and the emojis for representing the rating of satisfaction

AB Tasty has a default one: “How satisfied are you with your experience on AB Tasty?”. This can be customized to be any other version that you prefer, with the restriction being 10,000 characters maximum

The emojis range from a minimum of 2 emojis to a maximum of 5 emojis. 

Having 2 emojis only is suitable if you are only looking for a binary rating from your customers (Satisfied/Unsatisfied or Good/Bad). Having 3 and above gives a broader spectrum of ratings and thus a more precise rating from customers, if this is what you are after.
The emojis can be the AB Tasty default ones representing different levels of satisfaction:

These emojis can be customized to be any icon you want by choosing to have “Custom Emojis” and uploading a new one for each emotion using the Image Upload option. Or you can paste the link of an icon hosted somewhere external to AB Tasty, by choosing the Image Path option.

The standard text emojis allow you to use the regular emojis that people usually use on phones.

To be able to put emojis in these text boxes, you can simply search for the emojis online, and copy & paste them. It is also possible to simply input raw text, if this is something you want.

Open-ended question

You can choose whether you want open-ended questions to the visitors for each type of rating that they give.
From the customers’ point of view, they will first have a choice of ratings to give (the emojis). Then, whichever rating they give will cause a different question to be asked to them.
First, you have to toggle on that you want open-ended questions.

If toggled on, you will have the following choices:

Each of them can be customized, again with a restriction of 10,000 characters.
If toggled off, open-ended questions will not be asked to customers after they submit their rating.
The Button text section is simply text that will appear on the button that submits their answers to the open-ended question.

The Thank You Message

This toggle allows you to display a simple “Thank you” message to the customer after they have completed their rating. An example of a “Thank you” message is already provided.
When toggled on, you will have the option to customize the message to your liking, again with a restriction of 10,000 messages.

Style tab

The style tab allows you to customize the general appearance of the CSAT widget including the:

  • Emoji colors and spacing
  • Text alignment in the box, color, font, font size
  • Margin, padding and background of the whole CSAT widget
  • Border style of the CSAT widget
  • Whether you want an underlay with the CSAT widget
  • Style of the close button (if you want a close button)

Emoji colors and spacing

The color and opacity of each emoji can be changed as shown in the screenshot above. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque)
The emoji margin slider is the margin size on the left and right of the emoji, in pixels.

Text alignment, font, font color and font size

The text alignment options will allow you to horizontally position your text within the widget box.
The text color and opacity can be changed as shown in the screenshot above. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque)
The text font can also be chosen from a variety of different font styles. 

One important option to note is the “Inherited from element” option - this means it will inherit the font of the HTML element the widget is found in. For example, if the widget is located in an element which already contains some text, the widget will have the same font as that element. If the widget is in no particular element, then it will inherit the default font set on that webpage.

The text style can be regular, bolded, italicized or underlined and the slider is for the font size.

Margin, padding and background of the CSAT widget

The margin refers to the space between the widget border and other elements of the page outside it.
The padding refers to the space between the widget border and the elements inside the widget.
The margin and padding on all 4 sides of the widget can be customized with the following controls:

All the values are in pixels and you can see the values apply after setting the values and clicking on the page. 
The background color of the widget is also customizable. The color and opacity can be changed the same way: 

The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque)
A background image can also be inserted in the CSAT widget by toggling the background image toggle:

There are 3 ways to upload the image:

  1. Drag and drop the image from your computer
  2. Click and open a dialog box to browse your computer and upload the image
  3. Use the “Image Path” option to paste the URL of an image hosted on another website.

The background fitting has 4 options:

  1. Cover - A snippet of the image will appear inside the widget.
  2. Contain - The whole image will fit inside the widget while preserving its aspect ratio
  3. Fill - the image will fill the widget without preserving the aspect ratio
  4. None - No restrictions will apply to the image

There is an option to add a shadow around the border of the widget as well, and can be turned on/off using a simple toggle:

Border style of the widget

The border thickness dictates the thickness of the widget’s border in pixels.
The border color can also be changed. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque)
The border radius dictates how round the corners  of the widget will be. The smaller the radius, the sharper the corner.

Underlay

An underlay is a transparent and unclickable “cover” that appears in between the widget and the rest of the web page. This makes the widget focused to the user and forces them to notice and use it, or close it completely.

The underlay color can also be changed. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque). It is recommended that the opacity is set to a reasonable amount, and never 100% (40% - 60% is a reasonable amount).
The “Underlay clickable to hide widget” will simply make clicking anywhere on the screen (except the widget) hide the widget.

Close button

 

You can choose to have a close button for your widget by toggling it on/off. And if you choose to have it, it can be either inside or outside the widget.
The close button’s cross size can also be customized.

The cross size is in pixels and dictates the length (and height) of the cross’s container box. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque).
The box containing the cross can also have its color and opacity changed in the same way.

The close button can also have a customisable border. If the border thickness is set to 0px, then it will simply not exist.
Otherwise, after setting the border thickness to a value greater than 0, the following options will appear:

The border radius dictates the sharpness of the corners of the close button’s border. The smaller the radius, the sharper the corners. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. 
The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque).

Conditions tab

The Conditions tab allows you to decide 3 aspects of the widget:

  • Triggering - What causes its appearance and disappearance
  • Recurrency - How often it should appear to the customer
  • Animation - The animation with which it appears/disappears

Triggering

You can choose which event will cause the widget to appear on the screen of the customer. The list of events and what they mean is as follows:

  • When the page is loaded
    • When all the contents of the page have finished loading
  • As soon as possible
    • As soon as possible
  • At exit intent
    • When the customer intends to leave the page by switching tabs or closing the tab/browser
  • After x seconds of activity
    • The number of seconds after which the customer interacts with the page continuously
  • At click on element
    • When the user clicks on an element specified by you
  • When hovering over an element
    • When the customer’s mouse moves on an element specified by you
  • When an element is visible
    • When an element specified by you appears on the customer’s screen
  • When scrolling up
  • When a scroll percentage is reached
    • Scroll percentage here means how much of the total pages length has been reached by scrolling (E.g: 50% means the customer scrolled halfway down the whole page)
  • When the visitor has seen x pages
  • When a tracking is or has been sent
  • When the visitor rage clicks
    • When the customer repeatedly and very quickly clicks on the page (out of anger or dissatisfaction)
  • Custom trigger

All of the triggering events have a “Delay” option, which allows you to specify how much time after the event happens should the widget be displayed.
The auto-hide toggle lets you choose whether to have the widget disappear by itself (toggled on) or not. If toggled on, you will be able to choose how many seconds after submitting the rating should the widget disappear.

Recurrence

The recurrence of 3 events can be customized:

  1. When the widget is displayed
  2. When the widget is displayed again after closure
  3. When the widget is displayed after submitting a rating

All 3 events have the same frequencies listed:

  1. Every time
  2. Every session
  3. Every x days
  4. Every x weeks
  5. Every x months
  6. Once only

Animation

The animation refers to the way the widget will appear to the customer. There are 3 animations:

  1. None
  2. Slide
  3. Fade

“None” will make the widget simply appear/disappear.
“Slide”, as its name suggests, will cause the widget to slide into view. Choosing slide will give you some options about:

  1. How long the slide will last for
  2. The speeds at which the widget will slide (fast/slow at the start, middle and end)
  3. The direction from which the widget will slide in

“Fade” will have the widget slowly appear into view from completely transparent to full opacity. The options for “Fade” are similar to “Slide”, except that there is no direction to fade from.

Was this article helpful?

/