This help guide covers the advanced use of the Web Rating widget.

You always need to use the basic setup first as shown on the Code tab of a survey. The script tags with the feedletterId and the embed are only set up once per page.

Show the Inline Widget Multiple Times On a Page

You can show the same Web Rating widget multiple times inline on the same page by adding the following code where you want to place it:

<div data-feedletter-widget></div>

Show the Inline Strip

The inline strip is a slim row with the question on the left and the rating on the right, for example below an article. The comment field and the thank you message open in the same place. Use this element instead of the inline widget’s:

<div data-feedletter-widget="strip"></div>

You can also copy it from the Code tab by picking Inline strip.

Match the Widget to Your Site

The widget uses your page’s font. The inline widget and the inline strip have no background of their own and use your page’s text color. The popup and the panel of the feedback button show dark text on white. Your site’s CSS doesn’t change the widget otherwise. To set its colors, the font or the corner radius, add these CSS variables to your site’s CSS:

:root {
  --fl-background: #1f2937;
  --fl-text: #f9fafb;
  --fl-accent: #e11d48;
  --fl-on-accent: #ffffff;
  --fl-font: "Inter", sans-serif;
  --fl-radius: 8px;
}

--fl-accent colors the buttons and the feedback tab, --fl-on-accent the text on them. Set only the ones you want to change.

To change a single inline widget only, set them on its element, for example #feedletter-widget { --fl-accent: #2563eb; }.

Use Inline Widget and Timed Popup On the Same Page

You can show the inline widget and a timed popup on the same page by doing the basic setup of the Inline Widget and adding the following after the feedletterId line:

var feedletterEnablePopup = true;