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

# Website Layout

> Configure how the form appears when embedded on a website.

Found under **Settings → Layout** in the **Website** section.

## Display & Style

Choose how the form appears on your site:

| Mode         | Description                                                            |
| ------------ | ---------------------------------------------------------------------- |
| **Inline**   | Embeds directly into the page body — always visible, no trigger needed |
| **Popup**    | Centered modal with a dimmed backdrop                                  |
| **Slider**   | Slides in as a panel from the side                                     |
| **Popover**  | Floating card in the corner with a chat-style bubble                   |
| **Side Tab** | Fixed tab on the page edge that slides out when clicked                |

### Mode-Specific Settings

| Setting             | Applies to        | Description                           |
| ------------------- | ----------------- | ------------------------------------- |
| **Size**            | Popup             | `Standard` or `Fullscreen`            |
| **Padding**         | All               | Space between form and container edge |
| **Inset**           | Fullscreen popup  | Gap between popup edge and viewport   |
| **Position**        | Popover, Side Tab | `Left` or `Right` side                |
| **Overlay Color**   | Popup, Slider     | Background overlay color              |
| **Overlay Opacity** | Popup, Slider     | Overlay transparency (0-100%)         |

### Trigger Button

For popup, slider, popover, and side tab modes:

| Setting          | Description                                           |
| ---------------- | ----------------------------------------------------- |
| **Button Label** | Text on the trigger button (default: "Take the Quiz") |

## First Page Configuration

| Setting           | Options                             | Description                                                                                       |
| ----------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Mode**          | `First question` / `Welcome screen` | What visitors see first. Use Welcome Screen to provide more context or show an introductory text. |
| **Image**         | `None` / `Left` / `Right`           | Optional hero image.                                                                              |
| **Alignment**     | `Left` / `Center` / `Right`         | Text alignment.                                                                                   |
| **Image on**      | `First page only` / `All pages`     | Display image on the first screen or across all form pages.                                       |
| **Minimal style** | On/Off                              | Hide progress bar, page number, and OK button on page 1.                                          |

### Welcome Screen (when Mode = Welcome screen)

| Setting               | Description                   |
| --------------------- | ----------------------------- |
| **Headline**          | Large heading text            |
| **Description**       | Paragraph below the headline  |
| **CTA Label**         | Button text to start the form |
| **Social Proof Pill** | Badge above the headline      |

## Form Controls

| Setting             | Description              |
| ------------------- | ------------------------ |
| **Progress Bar**    | Show completion progress |
| **Question Number** | Show "Question X of Y"   |

## Picture Choice Settings

| Setting             | Description          |
| ------------------- | -------------------- |
| **Columns**         | Image grid columns   |
| **Max Image Width** | Constrain image size |