> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usertick.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design and branding

> Set how a survey displays (popup, side button, embedded, page template, steps and controls) and style it with a theme your whole organization shares.

A survey's look has two parts in the **Appearance** tab of the editor. **Display** belongs to the survey alone and sets where and how it shows. **Theme** sets colors, typography and shapes, and a saved theme can be reused by every survey in the organization. The same theme styles the website widget, the hosted link and QR pages, and the email design.

## Display

**Display** holds the settings that belong to this survey only.

On a website survey, **Display type** selects one of three:

* **Popup**: a card in a corner of the page, or centered with a dimmed backdrop, set under **Placement on screen**. On mobile, every corner position becomes a full-width panel at the bottom of the screen.
* **Side button**: an always-visible tab on an edge of the screen that opens the survey, with its edge, an icon, a label or both.
* **Embedded**: the survey sits in your page, before, after or inside an **Element** you name by CSS selector (such as `#feedback` or `.pricing-table`). The survey shows as soon as the element is on the page, and if your site renders the element late, the widget waits for it. Embedded surveys have no close or minimize button, have no trigger conditions, and stay on the page after the thank-you screen. Page rules, devices, audience and frequency still apply.

On every channel, **How are questions shown?** selects **Single screen** (all questions at once), **Step by step** (one page at a time with Back and Next buttons) or **Chat** (one question at a time as a conversation, described below). Branching and question time limits need **Step by step** or **Chat**. Display also holds:

* **Progress bar**, the **Back button** and **Auto advance** for step-by-step surveys. In a chat survey the same switches are **Change answers** and **Auto advance**, and there is no progress bar.
* **Show header bar**: the widget's title bar, or the title panel on a hosted page. When the first question is a message screen, the header is usually left off, since the message screen works as the introduction.
* **Close button** and the corner it sits in.
* **Minimize button**: visitors can shrink the popup into a small card instead of closing it, and their answers are kept. **Start minimized on desktop** and **Start minimized on mobile** show the small card first.
* **Language picker**: when the survey has more than one language, visitors can switch languages before they start.
* **Light and dark switch**: visitors can switch between light and dark. When it is off, the survey follows the visitor's system setting.

On link, QR and email surveys, Display also sets the hosted page:

* **Page template**: **Split** places the title beside the questions, **Cover** fills the page and shows the questions on a card, and **Card** centers the questions on the page background.
* **Panel side**, **Panel width**, **Question width** and **Question position**.
* The survey's logo, with its size, alignment and a version for dark mode.

### Chat

In a chat survey, each question appears as a message, word by word, and its answer control appears under it. When the visitor answers, the answer becomes a short bubble on the visitor's side of the conversation, and the next question follows. The visitor types only where a question asks for text. Chat is on every plan and works on every channel: the popup, the side button, an embedded survey and the hosted page for link, QR and email surveys. Branching, time limits, required questions and languages work as in a step-by-step survey. Each question is shown alone, so questions can't share a page and there is no Back button.

Messages appear about a quarter of a second after the previous one, and no message takes longer than about 1.2 seconds to appear. Selecting anywhere in the card or pressing a key shows the whole message at once. A welcome or other message screen appears as in a step-by-step survey, as its own screen with its own button, and the conversation continues when the visitor selects it. The Next, Skip and Submit buttons span the width of the question, and the conversation scrolls to keep the open question and its button in view. When the visitor's device is set to reduce motion, messages appear whole.

When **Chat** is selected, Display adds these settings:

* **Change answers**: visitors can select an earlier answer to change it. The questions after it are removed, and the visitor answers again. Answers to later questions are kept, and the conversation fills them in again until it reaches a question without an answer. When it is off, the answers can't be selected.
* **Built-in replies**: after a rating, score or written answer, the chat adds a short sentence when the question has no reply of its own, such as "Thank you for the rating." or "Thank you for the detail." The last answer gets only a reply you wrote. Built-in replies are in English for now. Replies you write always show.
* **Avatar**: **Theme** shows the first letter of the chat name in the theme's brand color, **Image** shows a picture from the media library cropped square, and **None** shows no avatar.
* **Chat name**: up to 40 characters, filled with the organization's name when Chat is first selected or when **Create with AI** drafts a chat survey. It gives the theme avatar its letter.
* **Show the name**: shows the chat name above the first message of each run of messages. It is off by default.

In the **Content** tab, each question gets a **Replies** group while **Chat** is selected. An empty field uses the built-in reply when the question type has one, and the field shows that sentence as its placeholder. Each reply holds up to 200 characters and is translated like the question.

* **A choice question** with one answer (multiple choice, dropdown, and emoji or dial with options) has one field per option.
* **A scale question** (stars, CES, NPS, big scale, emoji and dial) has **Low answer**, **Middle answer** and **High answer**. NPS uses 0 to 6, 7 to 8 and 9 to 10. Other scales use the lowest 40 percent, the highest 30 percent and the range between them.
* **A yes or no question** has **Yes** and **No**.
* **Every question that takes an answer** has **Any answer**, used when no more specific reply applies. A question that is skipped never gets a reply.

When the survey is sent, the thank-you title and message appear as the last message, and the conversation stays on screen.

## Theme

The **Style** row shows the theme the survey uses. Selecting it opens **Select a style**, with the built-in **Styles** first and **Organization themes** below them, and a search box. Each theme can be applied with **Use this theme** or opened with **Preview**, which shows the whole survey in that theme. A built-in style can't be changed directly; **Edit a copy of this theme** creates a theme of your own from it.

Organization themes are saved in the organization's library, so everyone sees the same list. Their menu offers **Edit theme**, **Duplicate**, **Set default** and **Delete theme**. The theme marked **Default** is the one new blank surveys start in, and a survey created from a template starts in the template's own theme. **Create theme** creates a new theme.

### Edit a theme

The theme editor is one scrolling panel, with a live picture of the theme at the top and a switch for the light or dark look being edited. It shows only the settings that apply to the survey's channel and page template:

* **Basics**: **Brand color**, **Font** and **Heading font**, **Corners**, **Buttons** (filled, outline or soft), **Answer options** (cards or a plain list), **Spacing**, and **Light or dark**: Auto follows the visitor's system or their choice in the light and dark switch, while **Always light** and **Always dark** show that look to every visitor.
* **Typography**: a text size that scales the whole survey, and the size and weight of titles and question labels.
* **Shape**: button shape (rounded, pill or square), the field style, and for the website widget its shadow and the accent bar along the top edge.
* **Colors**: separate colors for the light and dark looks. Brand color is used for buttons, selected answers, the focus ring, the progress bar and links, and the other colors cover button text, accents, panels, surfaces, text, borders, fields, scale steps, stars, success and errors. A color left on Auto is calculated from the brand color.
* **Survey page**: for link, QR and email surveys, a **Background style** (a solid color, a two-color gradient or an image with a dim and a blur), a **Cover graphic** drawn in the theme's colors (such as blobs, waves, dots, lines, rings or mesh) or a cover image, and a faint **Pattern** under a solid or gradient page.
* **Advanced**: custom CSS added to the website widget for fine-grained control.

Edits stay in a draft until you save them, and the survey keeps its current look until then. When other surveys use the theme, saving asks first: **Update theme** changes every survey that uses it, and **Save as new theme** keeps the changes as a separate theme. Leaving the editor with unsaved changes asks whether to discard them.

## Plan features

On the Starter plan and above, a survey can hide the **Powered by Usertick badge** (in the **Settings** tab), and link, QR and email surveys can show a logo, a background picture or cover media. After a move to the Free plan, published surveys show the badge again and their survey pages lose the logo, background picture and cover media at once; a drawn cover graphic stays. Publishing such a survey again needs the badge shown and those pictures removed, or an upgrade.

On website surveys, a **Report abuse** link sits beside the badge, on the questions and on the thank-you screen. It opens Usertick's report form in a new tab, and the report names the page and the survey; the page address goes without its query or fragment. Hiding the badge hides the link too. Survey pages of link, QR and email surveys always show **Report abuse**, with or without the badge.

Custom CSS, in the theme editor's **Advanced** section, is available on the Pro plan and above, and it applies only to website surveys: link, QR and email survey pages never use it. On a lower plan, a new theme with custom CSS can't be saved, a theme with custom CSS can't be saved while a website survey uses it, and a website survey with custom CSS can't be published until the CSS is removed. After a downgrade, published surveys show their theme without the custom CSS.

A custom domain for hosted pages, added under **Settings → Developers → Custom domains** and picked per survey in the **Share** step, is also available on the Pro plan and above. See [Link surveys](https://docs.usertick.com/channels/link.md).

## Mobile behavior

On screens up to 480 pixels wide, the widget becomes a full-width panel at the bottom of the screen; on larger screens it stays a popup. To keep a survey off phones entirely, clear mobile under **Show on devices** in its **Display rules**.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.