What does the widget do?

SmileBack's website widget makes it easy to show off your Net CSAT Score, NPS score and your positive feedback on your website. You can use it to show prospective clients how happy your current customers are with your helpdesk service and how great your overall client relationships are.

You also have full control over which positive CSAT reviews and NPS responses will be displayed.

This article will introduce you to the different types of website widgets that we offer and how to set them up to get more value from your SmileBack feedback.

We also have these instructions available as a video.

Types of widget

Simple widget

The simple widget displays your NPS or Net CSAT score in real-time, plus how many total CSAT reviews or NPS responses you've received in the last 90 days.

Reviews Widget

The Reviews Widget lets you display positive customer comments in a number of different configurations. Only CSAT reviews or NPS responses where your customers have provided marketing permissions can be displayed.

Your options are:

• Show either the Net CSAT or Net Promoter Score and comments
• Show only comments
• Show only CSAT or NPS comments, or show a mix.

Please note: You need to have at least one published CSAT reviews or NPS responses with marketing permissions in order to select the Reviews Widget option. You can select the publishable feedback before configuring your widget. More on that in the next section.

Examples

Net CSAT Score and commentsNPS commentsNPS score and mixed comments

Super Widget

The super widget displays both your Net CSAT and your NPS scores in real-time, plus how many CSAT reviews and NPS responses you've received, respectively, in the last 90 days.

Choosing which reviews are displayed

Please note: You need to be an Account Admin to choose which reviews are displayed in your website widgets AND the reviews have to have marketing permissions from their submitter. You can read more about user permissions here.

CSAT reviews

Go to the CSAT Reviews page and filter the reviews with the Comments filter "Only Reviews with Marketing Permission".

You can then select which reviews can be displayed in your website widget by turning the toggle on in the Published column.

NPS responses

Go to the NPS Dashboard page and filter the responses with the Responses filter "With marketing permission".

You can then select which responses can be displayed in your website widget by turning the toggle on in the Published column.

Configuring your widget(s)

The necessary permissions

Please note You need to be a CSAT Admin or an NPS Admin to see the Website Widget page and to be able to configure all the available website widget options.

You can read more about user permissions here.

How-to

Go to the Website Widget inside the Tools menu and select which website widget you'd like to configure.

Customization

You can customize your website widget's style across different parameters.

• Widget layout: it can be a standard layout that displays the score and the number of reviews or responses; or a compact one that only displays the score.
• Color settings: you can input the color code or use the color picker to choose the widget's background color, score color and the custom colors that control the other text.
• Widget border: you can choose whether your widget has a border or not. The border's color is the same as the Custom Color 02.
• Drop shadow: you can choose whether your widget has a drop shadow or not.
• Language: you can change the language of the standard text.

You can preview what the website widget looks like on different devices i.e. on Desktop, Tablet and Mobile. The preview panel is expandable, the expand icon is in the top right corner.

Additional settings for the Reviews Widget

When configuring a simple widget with reviews, there are further customization settings:

• Author settings: you can control which author and company details will be displayed for the sake of your client's privacy.
• Scroll mode: you can choose whether you'd like the widget to rotate through your reviews automatically (dynamic reviews) or be only navigated manually by website visitors (static reviews)
• Date You can display the date that the reviews were reviewed.

Adding the widget(s) to your website

Once you've customized your widget, click on the "copy value". This will copy the snippet (which is a short piece of HTML code containing a JavaScript script) to your clipboard. This snippet should be inserted in your website.

Please note the following:

• If you want to display both your CSAT and NPS data and your reviews / responses for each, you can create and publish separate widgets!
• If you plan on using multiple widgets on the same website page, make sure you use the same style for all of them.
• You can't add 2 CSAT or 2 NPS widget to the same website even if they are of a different type. However, as mentioned above, you can add a CSAT widget and an NPS widget to the same website.

FAQ and troubleshooting

What's the timeframe of the different elements of the widget?

• The CSAT score, NPS score & the number of reviews are metrics corresponding to the last 90 days.
• The comments in the widget can be from any time, depending on which ones you choose to publish.

How do I update the style and colors of an already published website widget?

If you want to update the colors you just need to generate the widget again with the new settings then replace the old code in your website.

I can't add the widget to my site, help!

While we can't provide in-depth guidance on how to update your own website, here are some common issues to look out for:

• Do you have permission to edit and add content to the site?
• Do you have permission to embed <script> tags on the site?
• Are you using an editor or plug-in that removes <script> tags from content added to the site?
• Are you using the correct module to add scripts?
• WIX users: wrapping the widget code inside <p> tags seems to be required to make it appear inside a WIX iFrame module.

Please consult with your website provider if you need help with any of these issues. 

Watch our tutorial