The launcher: shape, size, icon, label and position

The launcher is the button down in the corner that visitors use to open the chat. You set it up under /app/projects/{id} in the Appearance tab, section Brand. A live preview, This is your launcher, shows every change immediately. You save with Save, and the change reaches your visitors within a minute.

The launcher's colour is your primary colour, see Colours, font and theme.

Launcher templates

20 ready-made combinations, for example “Virtual assistant – Replies in 2 min”, “Got a question?”, “Customer service – Mon–Fri 8am–6pm” or “AI assistant – Answers in seconds”. One click fills shape, icon, label, second line, display and size. Your colours stay as they are; nothing is saved until you press Save. Then adjust the texts.

The fields

• Shape – circle (default), rounded, square, speech bubble or leaf. With the speech bubble, a pointed corner faces the corner of the screen. With the leaf, two opposite corners are small.
• Size (px) – 44 to 72, default 56. 44 is the smallest area that can still be tapped reliably.
• Size on phones (px) – 40 to 72. Empty means: 48 px, or smaller if the size above is smaller.
• Icon – speech bubble (default), question mark, headset, sparkle or no icon (text only). Without an icon the launcher needs a label and the display always. Otherwise the widget shows the speech bubble.
• Label – visible text next to the icon, 40 characters at most. Empty means: the icon only.
• Second line – a smaller second line below the label, 60 characters at most. Without a label it stays invisible.
• Display – when the label is visible:
• always (default),
• only on mouse-over – the icon only; the label slides out on mouse-over or keyboard focus. On touch devices it stays at the icon.
• only on large screens – label only from 481 px width, below that just the icon,
• Only via your own links (no chat icon) – there is no launcher at all, see below.

Label per language

Label and second line from the form apply in every language. If you want them to differ by language, enter them under Texts & forms → Own wording with the keys launcher.text and launcher.subtext. An entry there takes precedence over the fields here. More on this in Texts and languages.

Chat with no launcher at all

With the display Only via your own links (no chat icon), no launcher appears. Visitors open the chat from your own links or buttons:

<a href="#rc-open">Help & support</a>

Put at least one such link on every page where the chat should be reachable. Then copy the embed snippet under Installation again: the new one no longer carries your brand colour, so the launcher does not flash up while the page loads.

As long as the widget could not get your setting from the server, for example without a connection or on a first visit before cookie consent, the launcher still appears as a safety net. If it must never appear, also add this to the snippet:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

data-rc-hide-launcher always applies, whatever is set in your account. Without a launcher there are no tooltip bubbles at the launcher either. All the ways to open the chat from your own elements, with pre-filled text and tab choice, are described in Open the chat from your own link or button.

Instead of a link, you can also turn an existing element on your page into the trigger. data-rc-launcher-selector takes a CSS selector:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        data-rc-launcher-selector="#hilfe-knopf"
        async></script>

Position and spacing

Side, spacing and stacking level are set on the snippet. Your account has no field for them.

• data-rc-position – right (default) or left.
• data-rc-offset – distance from the edge in pixels as JSON, default {"x":20,"y":20}. The widget adds safe areas such as the notch on the iPhone.
• data-rc-z-index – the stacking level, default 2147483000. Lower it if an element of your own should sit above the chat.

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

The same fields also work as position, offset and zIndex via window.ReactiveChatSettings or ReactiveChat('boot', …). See Technical integration.

Avoiding bars

If your page has a fixed bar at the bottom edge, such as a cookie banner, a basket bar or a navigation bar on phones, the launcher automatically moves above it, with 12 px of space. It measures again when the page changes. Elements that take up more than 40 % of the window height count as an overlay. It does not avoid those.

You can switch this off on the snippet:

data-rc-avoid-overlap="false"

Launcher with your own icon

A completely custom icon works in code via the brand: launcher.icon takes an inline SVG or a data: address and takes precedence over the chosen icon.

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

Note: a brand with such fields on the snippet (data-rc-brand) beats the settings from your account on this page. See Colours, font and theme.

On phones

Below 481 px width (and on phones held sideways up to 480 px height) the size for phones applies. With the display only on large screens, the launcher shows only the icon there. When the visitor opens the chat, the window fills the whole screen and the launcher steps back.

If the launcher does not look as expected

• No launcher visible: is the display set to Only via your own links, or is data-rc-hide-launcher="true" set on the snippet? Is the project paused?
• The launcher appears although “Only via your own links” is set: the widget has not received the setting from the server yet (fallback). Also add data-rc-hide-launcher="true".
• The speech bubble appears even without an icon: without an icon you need a label and the display always.
• Changes do not arrive: is there a data-rc-brand on the snippet with a label, icon or other additional fields? Then the snippet wins.