Chat button: your channels in one tap
Add a floating chat button with WhatsApp, Messenger, Telegram, Instagram, SMS, email, phone and Viber. Style, position and translate it.
The chat button is a floating launcher in the corner of your site. A visitor taps it, a small chat panel opens with your greeting, and they pick the channel they already use to reach you: WhatsApp, Messenger, Telegram, Instagram, SMS, email, a phone call, or Viber. Each one opens straight in the visitor’s own app, so there’s no chat for you to staff and nothing for them to install.
Nothing passes through Amabrik. Every channel is a direct deep link to the app the visitor picks, so we never see, store, or log a message, a number, or a conversation. The button needs no install snippet of its own either: it floats over your page once the Amabrik loader is on your site.
Turn it on
- Open your dashboard and go to Widgets.
- Click the Chat button card. If you don’t have one yet, you go straight into the editor on a fresh button. If you already have one or more, you see your list, with a button to create another.
- Add at least one channel (see below). The button won’t show until a channel has a value filled in.
- Make sure the button is enabled (the toggle at the top of the editor), then close the editor. Changes save on their own.
Add your channels
In the Content tab, open Channels and click Add a channel. Pick a platform, then fill in its one required field. Drag the rows to reorder them; the first enabled channel leads. Each channel has an optional Label if you want to rename it (for example “Sales” instead of “WhatsApp”), and an Enabled switch so you can keep one set up but hidden.
Here’s exactly what each channel needs.
| Channel | What you enter | Format |
|---|---|---|
| Phone number | International format, country code included, for example +1 555 123 4567. The button strips spaces and symbols and builds a wa.me link. | |
| Messenger | Username | Your Facebook Page username, no @ and no full URL. Opens an m.me chat. |
| Telegram | Username | Your Telegram username, no @ and no full URL. Opens a t.me chat. |
| Username | Your Instagram username, no @ and no full URL. Opens an ig.me direct message. | |
| SMS | Phone number | International format with country code. Opens the visitor’s messages app. |
| Email address | The address visitors write to, for example hello@yourcompany.com. Opens a pre-addressed email. | |
| Phone | Phone number | International format with country code. Dials the number on mobile. |
| Viber | Phone number | International format with country code. Opens a Viber chat with that number. |
For WhatsApp, SMS, Telegram, Messenger, and Instagram you can paste a username or number with extra characters (a leading @, https://, spaces, dashes); the button cleans it up for you. Still, the cleanest input is the bare username or the number in international format.
A note on Viber: it only opens through its app. If a visitor taps Viber and the app isn’t installed, the panel shows a short “the Viber app is required” message with a download link, so the tap never silently does nothing. The other channels all fall back on their own (WhatsApp, Messenger, Telegram, and Instagram open their web client on desktop; SMS, email, and phone are handled by the device).
Button style and position
Position (Display tab, Position)
- Corner: bottom left or bottom right. The whole layout mirrors for that side, including the panel and the close button.
- Side spacing and Bottom spacing: how far the button sits from the edges. Both take a separate value for mobile if you want, using the desktop/mobile toggle.
Launcher look (Display tab, Launcher)
- Icon: Auto, Chat, Message, or Dots. Auto shows the single channel’s brand glyph when you have exactly one channel, or a chat bubble when you’ve added several.
- Entrance animation: None, Pop, Bounce, or Fade. The button respects a visitor’s reduced-motion setting and won’t animate for them.
- Show an avatar in the header: on by default. You can give it an
httpsimage URL; leave it empty and it uses the channel brand glyph. - Type-and-send composer: see the greeting section below.
Colors and typography (Style tab)
- Accent color: a preset palette plus a custom picker. This colors the launcher, the send button, and the channel buttons.
- Chat background: a solid color, a gradient, or an image.
- Header background (defaults to your accent), Header text, Bubble & input color, Text color, and Border.
- Text typography (font, weight, line height, letter spacing, transform), Corner radius, and Button size, each with a separate mobile value.
Greeting and the chat panel
The panel that opens is a real chat look: a header with the avatar and a status line, a welcome bubble, and a footer. You set all the copy in the Content tab under Text:
- Header title, for example “Chat with us”.
- Header subtitle, for example “Typically replies within minutes”.
- Welcome message: the bubble that greets the visitor.
- Channels label: the heading above the channel buttons, for example “Start chat on”.
- Button label (optional): text next to the launcher icon. Leave it empty for an icon-only button.
The type-and-send composer
When you have exactly one channel and that channel can carry a pre-written message (WhatsApp, SMS, or email), you can turn on the composer in Display, Launcher. The footer then becomes a text box: the visitor types, hits Send, and their app opens with the message already written. You set the Composer placeholder and Send button text in the Content tab.
The composer only applies to WhatsApp, SMS, and email, and only with a single channel. Messenger, Telegram, Instagram, phone, and Viber don’t accept a pre-filled message (a platform limit), so for those, and whenever you have more than one channel, the footer is a row of channel buttons that open each app directly.
Set it up, tab by tab
Content. Add your Channels and reorder them. Write the Text for your default language (title, subtitle, welcome message, channels label, optional button label, and the composer’s placeholder and send labels).
Style. Pick your accent, chat background, header and bubble colors, the border, your typography, corner radius, and button size. Use the desktop/mobile toggle to set different sizes per device.
Display. Choose the corner and spacing under Position. Under Launcher, set the icon style, entrance animation, the header avatar, and the type-and-send composer.
Targeting. Choose which pages and devices the button appears on. (Scheduling is set elsewhere, so this panel hides the schedule.)
Advanced. Manage Languages, set the reading Direction, add Google Analytics events, and write Custom CSS.
Translations and languages
The button is multi-language. In Advanced, Languages:
- Default language: shown by default and whenever auto-detect finds no match. You edit its text in the Content tab.
- Auto-detect the visitor’s language: show the chat in the visitor’s browser language when you’ve translated it, otherwise the default.
- Add a language, then click Translate on it to fill in that language’s header title, subtitle, welcome message, channels label, button label, composer placeholder, and send button.
The loader serves each visitor the language it resolves for them, so a visitor in Spain sees your Spanish copy if you’ve added it.
Reading direction
In Advanced, Direction, pick Auto, LTR, or RTL. Auto follows the visitor’s language: right to left for Arabic, Hebrew, Persian, Urdu, and similar, otherwise left to right. The whole panel mirrors in RTL, including which side the button sits on.
Analytics
In Advanced, Analytics you can send events to the Google Analytics 4 or Tag Manager already on your site. Amabrik doesn’t load GA4, so there’s no connection to set up. Add an event for any of three triggers: the chat panel opening, a channel button being clicked, or a message being sent from the composer. Events respect cookie consent, nothing fires until you add one, and nothing is sent if your site has no analytics.
Tips
- Put your most-used channel first; with one channel the launcher can show that channel’s own brand glyph.
- For a WhatsApp-only button, turn on the composer so visitors arrive with their question already typed.
- Always store phone numbers in international format with the country code. A WhatsApp number without it won’t open the right chat.
- Use the optional Label to name a channel by purpose (“Sales”, “Support”) rather than by app.
- Set a clear subtitle (“Replies within an hour”, “Back Monday”) so visitors know what to expect before they tap.
FAQ
What format should my WhatsApp number be in?
International format with the country code, for example +1 555 123 4567. The button removes spaces and symbols and builds a wa.me click-to-chat link from the digits. A number without its country code won’t reach the right chat.
Can I offer more than one channel?
Yes. Add as many of the eight as you use and drag to reorder them. With more than one channel, the panel shows a row of channel buttons so the visitor picks the one they prefer.
What happens on mobile?
A tap opens the chosen app directly: WhatsApp, Messenger, and the rest open in the app on the phone, SMS opens the messages app, email opens the mail app, and phone dials the number. On desktop, the web-based channels open in a new tab so the visitor stays on your site.
Does Amabrik store the messages or numbers?
No. Every channel is a direct deep link to the visitor’s own app. We never see, store, or log a message, a phone number, or a conversation.
Can visitors type a message before opening the app?
Yes, with the type-and-send composer, when you have a single WhatsApp, SMS, or email channel. They type, hit Send, and the app opens with the message already written. Other channels can’t carry a pre-filled message, so they open the chat directly.
Why is there no composer for Messenger or Telegram?
Those platforms’ links don’t accept a pre-written message body, so the button never pretends to send one. It opens the chat directly instead, and the composer is reserved for WhatsApp, SMS, and email.
What if a visitor doesn’t have Viber installed?
The panel shows a short message saying the Viber app is required, with a download link, so the tap is never a dead end. The other channels fall back to their web client or the device on their own.
Can I show the button only on some pages?
Yes. Use the Targeting tab to choose which pages and devices the button appears on.
Last updated June 22, 2026
Still stuck?
Open the widget's Help tab in your dashboard, or send us a message. We answer every one.