Survey Appearance: Position, Colour and Corners

The Theme step, "Appearance, frequency and texts", sets where the survey sits and how it is coloured. The preview beside the form shows each change as you make it. The same step holds the widget texts, see Writing Survey Questions, Options and Texts, and the frequency limits, see How Often a Visitor Sees a Survey.

Position

• bottom right: the default. Out of the way of most page content.
• bottom left: for sites whose chat widget or cookie notice already holds the bottom right corner.
• bottom center: centred along the bottom edge.
• center: in the middle of the screen, with the page behind it dimmed. This is the most noticeable placement and the most interruptive, so keep it for moments that warrant it, such as straight after a purchase. The page can still be scrolled behind it, and clicking the dimmed area does not close it.

The widget is 360px wide, or the screen width less 40px on narrower screens, and sits 20px in from the edges. It slides in briefly when it appears, and does not animate for visitors whose system asks for reduced motion.

Accent colour

The Accent colour is used for the selected answer and the Next and Submit buttons. Pick it with the colour picker or type a six digit hex value such as #2563eb. Three digit shorthand is not accepted.

The card itself is white with dark text. Background colour, text colour and font are not set from the builder.

Corner radius

Corner radius (px) rounds the card's corners, from 0 for square corners to 32. The default is 12. Matching it to the buttons on your own site makes the survey look like part of the page rather than something laid over it.

How questions are drawn

The card shows one question at a time, with Next between questions and Submit on the last, and a counter such as 2/3 when there is more than one. CSAT scores are drawn as five stars that fill up to the one chosen. NPS and CES scores are drawn as numbered buttons, with the end labels underneath. Choice questions are drawn as a list of options, and text questions as a box.

After Submit, the card shows the thank-you message for two seconds and then disappears.

Closing

The × button closes the survey. Escape closes it too when it is in the center position, or when the visitor's focus is inside it. If the visitor closes it after answering every required question, their answers are submitted; otherwise it counts as a dismissal, see How Often a Visitor Sees a Survey.

The survey never takes focus when it appears, so it does not interrupt someone typing. After Next, focus moves to the next question.

Powered by Pertento

Every survey shows a small "Powered by Pertento" mark with the Pertento logo, on every plan. It is drawn inline, so it still shows on sites with a strict Content Security Policy for images, and it is not a link. It cannot be removed.

It does not inherit your site's styles

The survey renders in its own isolated container, so your site's CSS cannot restyle it by accident and the survey's CSS cannot leak into your page. It also works on sites with a strict Content Security Policy for styles.

It sits above your page content but deliberately below the very top layer, so a cookie banner or a checkout dialog that needs to be on top still is. Because it is fixed to the screen rather than placed in the page, it never pushes your content around when it appears.