Skip to main content

Customization

The Customization sub-tab lets you style how your website survey looks and behaves visually. You'll find it next to Questions in the survey editor (sidebar Content → Customization).

Layout​

The Customization screen has three areas:

  • Top of the sidebar — a Desktop / Mobile toggle (two icons) that switches the preview between the two device formats. The customization settings themselves apply to both modes — the toggle only changes how the preview is rendered.
  • Sidebar sections — 7 collapsible sections, each opening as a small popover when clicked: Color, Cover, Position, Avatar, Badge, Close, Overlay.
  • Live preview area — a mockup that shows your survey widget in real time as you change settings. In Desktop mode it's rendered as an overlay on a fake website page; in Mobile mode it's rendered fullscreen inside a phone frame.

Color​

The Color section has two tabs:

Background​

Set the background color of the widget. Two sub-modes:

  • Solid — pick a single color via the color picker (HEX / R / G / B / A inputs and a 2D picker with hue and opacity sliders)
  • Gradient — pick a gradient between two colors

The default background is the Told brand blue (#1E266D).

Text​

Choose the text color theme. Two options:

  • Light (default) — light text on dark backgrounds
  • Dark — dark text on light backgrounds

There is no free color picker for the text — only the two themes.

Cover​

The Cover section lets you upload a single fallback image that's displayed on every question that doesn't have its own Add a media image.

It contains a placeholder thumbnail and an Upload button. Once uploaded, the image becomes the default media for all questions in the survey.

tip

The cover image only shows on questions that don't have their own media set. If a question has its own image or video via Add a media in the question editor, that one wins over the cover.

Position​

Pick where the widget appears on the host page when rendered in Desktop mode. The section shows a 3x3 grid representing the 9 possible positions:

top-left      top-center      top-right
middle-left   middle-center   middle-right
bottom-left   bottom-center   bottom-right

By default, the widget appears at bottom-right. The selected cell is highlighted in blue.

In Mobile mode, the widget is always rendered fullscreen, so the position setting effectively doesn't apply.

Avatar​

Toggle to show or hide an avatar image inside the widget. Off by default.

When enabled, you can upload an image — useful to put a face or a logo on the widget for a more personal touch.

Badge​

A single toggle: "Hide the Told badge" (off by default).

When enabled, the small "told" badge at the bottom of the widget is removed.

warning

This option is plan-locked — it requires the Expert plan or higher. On lower plans, the toggle is disabled and the Told badge always appears.

Close​

A single toggle: "Hide closing button" (off by default).

When enabled, the close (×) button at the top-right of the widget is removed. Use this when you want the survey to be unavoidable until completed.

Overlay​

A single toggle: "Add overlay?" (off by default).

When enabled, a grey overlay div is rendered behind the widget, dimming the rest of the page. This is purely visual — it focuses the user's eye on the survey but does not turn the widget into a modal (no fullscreen blocker, no automatic close-on-outside-click behaviour).

Desktop vs Mobile preview​

The Desktop / Mobile toggle at the top of the sidebar only changes how the preview is rendered. All customization settings are shared between both modes — there is no per-device override. Use the toggle to verify how your settings look in each context, especially for the Position setting (which only matters on Desktop).