The widget on a phone: a button that stays out of the way

More than half of all requests come from phones. There the chat gets exactly one chance not to become an irritant.

On a desktop the chat button lives in an empty corner and bothers nobody. On a phone that same corner is taken by “Buy”, the cart, a cookie banner and sometimes a phone number. So the mobile widget is configured separately — otherwise it covers exactly what the visitor came for.

Position and offsets

Site settings hold the side (left or right) and the X and Y offsets. The rule is simple: the button must not cover the action that makes money. If “Add to cart” sits bottom right, the chat moves left or rises by 70–80 pixels. Check it on a real phone rather than an emulator — a couple of centimetres on screen decides everything.

Where to hide the button

The Visibility rules field (JSON) controls where the widget appears at all. The format is plain: {"include":["/pricing"],"exclude":["/admin"],"desktop":true,"mobile":false}. The typical case is removing the chat from the checkout page on mobile so it does not argue with the payment form, and keeping it on product and pricing pages where questions actually appear.

Speed beats beauty

The widget is installed with one line and loads asynchronously: the page does not wait for it. Its styling comes as a separate file, so a strict Content-Security-Policy on the customer’s site does not need unsafe-inline — it is enough to allow the widget domain in script-src, style-src and connect-src.

The language adapts by itself

The language comes from the data-lang attribute, then from the page’s <html lang>, then from the browser; English, Polish, German and Russian are supported. On a multilingual site nothing extra is needed: the German version of a page opens a German widget.

Active invitations, in moderation

A pop-up invitation (“Anything I can help with?”) works well on pricing and catalogue pages and annoys people on the payment page. That is why it has both a delay and its own page list: show it where people are choosing, stay quiet where they are already paying.

Checking after setup

After changing settings, reload the page — the widget checks with the server and pulls the fresh build. Then walk the site from a phone like an ordinary visitor: catalogue, product, cart. If the button covers nothing important anywhere and the chat opens on the first tap, the setup is done.

The keyboard and screen height

On a phone the chat window shares the screen with the keyboard, leaving a strip a few lines tall. Long greetings and three-paragraph questions simply go unseen there. Keep the first message to one or two lines and ask follow-up questions one at a time.

A photo instead of a description

A mobile customer can almost always send a picture — a damaged item, a failed payment screen, a label with an article number. The file reaches the operator in Telegram, and one such shot replaces three rounds of clarification. It is worth asking outright: “send a photo, it will be quicker”.

← All articles