CSAT Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
The CSAT widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
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:
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.
The widget dimensions can be set to automatically expand or contract according to the amount of content it has, if you toggle it on.
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.
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
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.
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.
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.
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)
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.
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.
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:
There are 3 ways to upload the image:
Drag and drop the image from your computer
Click and open a dialog box to browse your computer and upload the image
Use the “Image Path” option to paste the URL of an image hosted on another website.
The background fitting has 4 options:
Cover - A snippet of the image will appear inside the widget.
Contain - The whole image will fit inside the widget while preserving its aspect ratio
Fill - the image will fill the widget without preserving the aspect ratio
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:
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.
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.
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 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).
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
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.
The recurrence of 3 events can be customized:
When the widget is displayed
When the widget is displayed again after closure
When the widget is displayed after submitting a rating
All 3 events have the same frequencies listed:
Every time
Every session
Every x days
Every x weeks
Every x months
Once only
The animation refers to the way the widget will appear to the customer. There are 3 animations:
None
Slide
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:
How long the slide will last for
The speeds at which the widget will slide (fast/slow at the start, middle and end)
“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.
If toggled off, then it will keep a fixed size that you can set it to keep.
Turning it off will provide you with more options to set up the widget’s height:
The emojis range from a minimum of 2 emojis to a maximum of 5 emojis.
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:
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:
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 direction from which the widget will slide in