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

# Modes

> Choose how the widget sits on your site, as the island at the bottom centre or as a chat window that opens from the corner.

The **mode** is how the widget sits on your site before and after visitors open the chat. Jun has two, and you switch between them on the desk without changing your snippet.

## Pick one

Go to **Appearance** and pick a card under **Mode**. The preview on the right switches with it. Press **Save**; visitors get the change within a minute.

| Mode | Setting value | What visitors see | Good for |
| - | - | - | - |
| **Chat window** (default) | `window` | A button in the corner that opens a chat window. With **Greeting card** on (the default), a welcome card sits over the button | Most sites, app dashboards |
| **Island** | `island` | A small pill at the bottom centre that turns into the question, the progress and the answer | AI-first sites, and page actions that run in steps |

<Tip>
  Both modes share the same chat, AI, debug context, page actions and API. Only the shape of the widget and the way the chat opens differ.
</Tip>

A desk that never picked a mode gets **Chat window** with the greeting card on. Desks set up before modes existed keep what they had: the old greeting card is **Chat window** with the greeting card on, the old chat button is **Chat window** with it off, and the old "Ask anything…" bar is now the **Island**. Your snippet doesn't change, and loaders already cached in visitors' browsers keep working.

## Chat window

A button in the corner (the side you set in **Side of the page**) that opens the chat window: about 380×540 in the corner, full screen on phones. **Esc** closes it.

Chat window options, shown only when **Mode** is **Chat window**:

* **Greeting card**: a welcome card over the button. On by default.
* **Button shows**: **Company logo** or **"Chat with us"** on the round button. Shown only while the greeting card is off, since the card takes the button's place.
* **Side of the page**: **Right** (the default) or **Left**.

### With the greeting card

The card sits in the corner and shows:

* your logo and the **Name shown in the chat**, with the reply-time line under it (or "We're away · back …" outside [business hours](/inbox/business-hours));
* your **Greeting**;
* two buttons, **Contact the team** and **Start a new chat**;
* a message box that opens the chat, with your placeholder text.

The × hides the card for the rest of that page, leaving a "Chat with us" pill. Clicking anywhere else on the card opens the chat window.

When a proactive nudge or a teammate's invite arrives, the card shows that line instead of the greeting. Opening the chat from it starts a conversation with that line.

### Without the greeting card

A 52px round button in your brand colour. It shows your logo once you've uploaded one (a chat bubble until then). Set **Button shows** to **"Chat with us"** to show the words instead.

On a dark brand colour (one that gets white text), the button uses your [logo for dark backgrounds](/widget/appearance#logos) if you've uploaded one.

This is the lightest setup: the chat frame loads only on the first click. The greeting card and the island draw themselves inside the frame, so they load it right away.

A red badge on the button counts unread replies from your team (up to "9+"). Nudges and invites appear as a small card above the button with a **Chat with us** button.

## Island

A pill at the bottom centre of the page that morphs to fit the moment, then returns to rest. It never touches your page: everything happens inside its own transparent frame, which is clipped so the rest of your page stays clickable.

| Moment | Shape |
| - | - |
| Rest | The pill, typing out your [suggested questions](/widget/appearance#suggested-questions). With a chat going, a one-line summary of the last answer |
| Open | A question box with your suggested questions above it |
| Thinking | One status line while the AI works |
| Answer | The latest exchange, the question as its title, over the pill |
| Panel | The whole conversation (a teammate's chat, or **Earlier**) |
| Nudge | A one-line offer of help, for about 8 seconds |

How it behaves:

* **`/` opens it** from anywhere on the page, unless the visitor is typing in a field.
* An AI answer **folds itself** back to the rest pill once it has had time to be read (8 seconds plus reading time, at most 30 seconds), and not while the visitor is hovering, typing or scrolled down in it, or while something waits on them. It never auto-folds in a teammate's chat or an [intent](/widget/intents) chat.
* When a [page action](/widget/page-actions) runs, the pill stays one live line ("Checking fares… · step 2") and grows only when the customer is needed: a **Confirm**, a missing detail, or a card waiting for input. A card that waits on the visitor is shown on its own, and while collapsed the pill says "*card* · tap to finish".
* Hovering shows **Minimize** and **End** in the top corner. End starts the next question as a new chat; the old one stays open for your team.

Island options, shown only when **Mode** is **Island**:

* **Island colour**: **Dark**, near-black with white text on every page whatever the theme, like Dynamic Island (the default), or **Match theme**, which follows **Theme**.
* **Neon border**: a slowly turning multi-colour glow around the island. On by default.

The island uses your brand colour and rounding. It always sits at the bottom centre, so there's no side to set. On the dark surface, a near-black brand colour would vanish, so its buttons turn white instead.

## How to choose

<AccordionGroup>
  <Accordion title="You want people to start talking">
    **Chat window** with the greeting card. A visible greeting and two clear buttons get more first messages than a bare icon.
  </Accordion>

  <Accordion title="You want the least visual weight">
    **Chat window** with the greeting card off. It loads nothing but the loader until someone clicks.
  </Accordion>

  <Accordion title="The AI answers most questions, or does things on your pages">
    **Island.** The typed-out suggested questions show visitors what they can ask, and it's built around runs of [page actions](/widget/page-actions): it keeps a run to one line and only grows when the customer has to confirm or fill something in.
  </Accordion>
</AccordionGroup>

## Open the chat from your own buttons

Both modes respond to the [JavaScript API](/widget/javascript-api):

```js theme={null}
document.querySelector("#help").addEventListener("click", () => window.JunDesk?.open());
```

`JunDesk.close()` and `JunDesk.toggle()` work the same way, and `JunDesk.open({ intent })` starts a purpose-built chat ([Intents](/widget/intents)).

<CardGroup cols={2}>
  <Card title="Appearance" icon="palette" href="/widget/appearance">
    Every option on the Appearance page.
  </Card>

  <Card title="JavaScript API" icon="brackets-curly" href="/widget/javascript-api">
    Open, close and control the widget from code.
  </Card>
</CardGroup>


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