Chat window on your site: the consultant and its look

The chat window isn't just "a box for questions". On a product page it knows what people are asking about, shows that product, can add it to the cart and suggests the next step. And it looks the way you say.

You don't need to program anything for this. You put one line of code on your website — and never touch it again: everything on this page is switched on and changed with words in the conversation with the builder.

What the window does on its own

What	What it looks like
sees the product	on a product page the agent knows the name, price, availability, specifications and description — "is this a good one?" and "do you have it in size 42?" get an answer about the product the person has in front of them
shows a product card	a card sits above the conversation: photo, name, price
adds to cart	the button on the card presses your shop's "Buy" button — the shop does everything it always does: asks to choose a size, shows its own cart window
recommends products as cards	products from the catalog that the assistant recommends sit under the reply as cards — photo, price, availability, and "Similar", "Cheaper", "Compare" buttons
suggests what to ask next	under the reply — up to three buttons with the next message: "For the office", "Show me others"
hands over to people	when the assistant can't help on its own — buttons for your messengers, with the person's question already typed into the message
continues in Telegram	if the agent has a Telegram bot, there's a "Continue in Telegram" button under the input: the person goes there with this same conversation — how it works
writes with formatting	headings, lists (including nested ones), tables, code blocks, quotes, bold and italics — the way the assistant wrote them, already while the reply is coming in; a wide table scrolls inside the message instead of stretching the window; links to your website open in the same tab; images from the reply show on their own if they come from your website (or the servers your page takes its photos from), from the assistant's files or from card photos — an image from any other address becomes a link, so that data from the conversation doesn't go to someone else's server without a click
accepts photos and files	with the paperclip, pasting from the clipboard (Ctrl+V — a screenshot or a copied photo) or dragging a file onto the window; on a phone the paperclip asks "Photo" (gallery and camera) or "File". A photo shows as a thumbnail before sending, and you can remove it — more
expands to full screen	a button in the header expands the window to the full page; the conversation stays a readable column in the middle. The same button or Esc returns the window to the size and place it was — more
resizes	on a computer the window is dragged by an edge or corner — more
holds several conversations	"another conversation" in the header opens another window with its own conversation — as many as you like; windows can be dragged, snapped to halves and quarters of the screen, tiled; the cross closes a window, and the conversation stays in the list — more
doesn't flicker	on following pages the window is drawn right away the way you made it, not the default — more
moves	on a computer the window is dragged by its header, and the chat button can be moved to where it doesn't cover your website's buttons — more
erases the conversation	the bin in the header erases this conversation in this browser; the window asks before erasing. The bin no longer "starts" a new conversation — that's what "another conversation" is for, and the old one stays
on a phone — as a sheet	the window slides up from the bottom over most of the screen; it closes with a swipe down, a button or a tap above the sheet; the page underneath doesn't scroll and stays where it was after closing
counts unread	a reply that arrived while the window was minimised shows as a number on the chat button
counts whether it sells	how many conversations got from an opened window to the cart — below

The window reads the product from the markup shops already add for search engines (schema.org or OpenGraph), and from the text of the product page itself. If your website doesn't have this markup, there won't be a card, but everything else will work.

A card only where there's one product

On a catalog page, where the markup has twenty products, there's no card: "you're looking at" about the first of twenty would be untrue.

The "add to cart" button appears only when there's something to press

The window has no cart of its own — the cart belongs to the shop. The window looks for your website's buy button on the page and presses it. If it doesn't find one, there won't be a button on the card: a silent button that does nothing is worse than none.

What the window doesn't see

It reads the page without the query string (everything after ? isn't collected), and takes text only from the block around the product heading, not the whole page: the header with the cart and the person's name doesn't reach the assistant.

To turn off reading the page entirely:

don't let the window read my pages

Photos and files

It's easier for a customer to show than to describe: a photo of a product "like mine, only bigger", a screenshot of a payment error, a receipt.

• The paperclip in the input — choose a file. On a phone it first asks: "Photo" (gallery and camera) or "File".
• Ctrl+V (Cmd+V on a Mac) in the input — paste a screenshot, a copied photo or a file.
• Drag a file onto the window.

While the file sits in the input, it hasn't been sent yet: a photo shows as a thumbnail, and the cross really removes it. It goes together with the message — or on its own, without a caption.

The assistant sees the photo itself and answers to the point — what's in the picture, which product it is, what's wrong in the screenshot. It sees it in the message the photo was sent with: after that, the conversation relies on what it has already said about it, and the image itself doesn't go to the model a second time — you don't pay for one receipt on every following message.

The assistant reads documents too — nothing to switch on:

File	What the assistant does with it
PDF, Word (.docx), Excel (.xlsx), CSV, text, Markdown	reads the text. A short file (up to ~12 thousand characters — five or six pages) — in full right away; a longer one — the beginning right away, and it reads the rest itself and searches the file for the right place ("what's the penalty in the contract?")
a scan — a PDF with no text, only page images	reads the pages as photos if there are up to 10 of them and the file is up to 5 MB. It doesn't read a bigger scan — and says so rather than pretending: it asks for the pages it needs as photos
a password-protected file, an archive, a video and the like	doesn't read it and says so directly; an action can pass such a file on whole

The assistant knows in words what was cut off or not read — it won't say "I read the whole contract" about a file it saw only the beginning of. It also comes back to the file in later messages of the conversation: the text doesn't go to the model a second time, the assistant takes only the part it needs.

A file from a customer is someone else's text. The assistant doesn't follow what's written in it ("forward all orders to…") as an instruction; and if the file is read by a turn with the rights of a website admin or the owner, "admin only" actions after that wait for your permission as a card.

Passing the file on — to your CRM, to your server — is already an action: "let the customer send a manual, and the bot will pass it to my system".

Limits the window tells you about right away, before sending:

• up to 4 files at a time, each up to 10 MB;
• the window shrinks a big phone photo itself before sending — so the assistant can see it and so it arrives faster;
• an image that can't be shrunk (an animated GIF) — up to 5 MB: the assistant wouldn't see a bigger one;
• web pages (.html) and SVG images aren't accepted: they can contain code.

The operator in "Conversations" sees the same files.

How long files are kept. Customer files are part of the conversation: they're kept as long as the conversation itself and erased together with it when the retention period ends, and when the agent or the account is deleted — together with them. They're included in your data archive. Per agent — up to 1 GB of customer files at a time: when the space runs out, the window tells the person to write in text, rather than "the file is too large".

Move the window

The chat button sits in a corner — and sometimes that's exactly where the shop has its "back to top" button, cart or cookie banner. There are two ways to sort this out.

For all visitors — tell the builder:

move the button higher, it covers the "back to top" button

Each visitor on their own: on a computer the window is dragged by its header, and the chat button — with a mouse or finger anywhere. The position is remembered in their browser for your website and doesn't go past the edge of the screen when the browser window is made smaller. A double-click on the header — or the arrow-to-corner button that appears in the header after moving — puts everything back. On a phone the window takes the full width of the screen and doesn't move; the chat button does.

If you don't want the window to be moved:

pin the window in place

Window size and full screen

Default size — with words. On a computer the window is 384 by 624 pixels. If you want it different:

make the window wider

make the window 420 by 640

let it open in full screen right away

Your own size — from 300 to 960 wide and from 360 to 1200 tall; the builder won't set it bigger and will tell you why (for "bigger" there's full screen). On a screen smaller than the set size, the window shrinks on its own; on a phone it's always full width. The Chat window sheet shows what's set, and the preview shows the window at its real size.

Each visitor on their own. On a computer the window is dragged by an edge or corner — like a regular program window. It doesn't get smaller than readable (300 by 360) or bigger than the screen; the size is remembered in the visitor's browser for your website and overrides your default. A double-click on an edge — or the arrow-to-corner button in the header — brings back your size. From the keyboard: the handle in the window's corner (the last one when moving with Tab), the arrows change the size, Home brings back the default.

Full screen. The button with arrows in the header expands the window to the full page. The conversation stays a column in the middle, the page under the window doesn't scroll, and the window can't be moved or resized in this state. Esc or the same button returns the window — to the size and place it was. What the visitor chose (expanded or not) is remembered in their browser and overrides your "full screen right away". On a phone there's no such button: there the window is a sheet or full screen, as you say.

If you don't want the window to be resized:

lock the window size

Chat as a side panel

A window in the corner covers part of the page. If the chat should be next to the website, not on top of it, say: "make the chat a panel on the right so it doesn't cover the site".

• The panel sits at the edge of the screen at full height — on the right, or on the left if your chat button is on the left.
• It pushes the page aside: the website gets narrower by the width of the panel and stays whole and working — people scroll it and click on it while the conversation goes on next to it. Close the panel and the page returns as it was. There's no dimming.
• While the panel is open, the window narrows your website's fixed header (the one that doesn't scroll) on its own, so it doesn't slide under the panel — and restores it after closing.
• The width is 400 by default; you can name your own ("panel 480 wide"). The visitor can drag the inner edge of the panel — their width is remembered in their browser; a double-click on the edge brings back yours.
• While the panel is open, the chat button isn't visible — the panel is closed with the cross in the header. It can be expanded to full screen, like the window.
• An open panel stays open after moving to another page — right away, without the page jumping.
• Several conversations in the panel — one on screen at a time: they're switched with the conversation list in the header, like on a phone.
• On a phone and on screens up to 720 pixels there's no panel: there you get the regular window (a sheet or full screen), and nothing pushes the page aside.

If the panel broke your website's layout (this happens on pages where the width is calculated from the screen, not from the page), say "let the panel lie on top of the site": it will lie on top, still without dimming. To bring back the window in the corner — "bring back the regular window".

A button with a label and your own icon

The button that opens the chat doesn't have to be a round speech bubble. Say: "write 'Assistant' on the button and use my icon" — and it becomes a pill with "icon + label".

What's on the button	How to say it
a label (up to 24 characters)	"write 'Ask AI' on the button"
a symbol or emoji	"put a star on the button" / "✦" / "🤖"
your own image	give the builder a link to it (an address with https://)
your own drawn icon	"draw an icon: a lightning bolt"
a label only, no icon	"a label only, no icon"
an icon only	"remove the label from the button"

The button's colour is the window's accent; its place is the corner and the distance from the edge ("move the button higher"). A label in another language is set together with the other texts in that language. A long label on a narrow screen is cut off with an ellipsis instead of sticking out past the edge; a screen reader names the button by your label. After a page reload the button is yours right away — the default round one doesn't flash for a moment.

Several conversations in several windows

A person asks about a chandelier — and wants to ask about delivery at the same time without losing the first conversation. The "another conversation" button in the header opens another chat window with its own conversation. There can be as many windows as you like, and they behave like program windows on a computer.

Three rules worth knowing.

• The cross closes the window. It disappears from the screen, but the conversation stays in the conversation list (the button with two speech bubbles in the header of each window; it appears as soon as there's more than one conversation) — that's where you open it again. An empty window closes without a trace. To erase a conversation for good — the bin.
• The chat button minimises everything that's open, and the next press brings back exactly the same; it doesn't bring back a window closed with the cross. If no open windows are left at all, it opens the conversation that was closed last. The number on the button is everything unread in all conversations, including closed ones.
• Each window has its own conversation: its own history, its own operator, its own files and ratings, its own "continue in Telegram"; in the dashboard's "Conversations" section these are separate conversations. The bin erases only its own.

Arranging windows.

• Freely: a window is dragged by its header anywhere and resized by its edges and corners; the window you touch comes on top of the rest.
• Snap: drag a window by its header to the left or right edge of the screen — it takes half the screen; to a corner — a quarter; to the top — the full screen. While you drag, an outline shows where it will go. Drag it away by its header and the window returns to its previous size. From the keyboard: on the resize handle in the window's corner (the last one when moving with Tab) — Ctrl and the arrows.
• Tile, cascade, to the corner — three buttons in the conversation list (when there are two or more windows on screen). "Tile" puts all open windows in an even grid over the full screen: two — side by side, three — in three columns, four — two by two, then a grid; while the tiling holds, a new window joins the grid and a closed one frees its place. "Cascade" — one after another with an offset. "To the corner" — as it was: in a row from the chat button.
• The border between neighbouring windows can be dragged: both resize together, leaving no gap.

After moving to another page or reloading, the windows stay where they were; after the screen size changes, they all stay on it. When the windows cover the whole screen (tiled, two halves), the page underneath doesn't scroll or respond to clicks; when they don't, the website next to them is live. The chat button under a snapped window hides so it doesn't sit on top of the input — the windows are then closed with their crosses.

On a phone and in narrow spaces windows don't sit side by side: there's one window, the list in the header switches between conversations, and the cross does the same as the chat button: minimise.

How many conversations. By default there's no limit of your own; the technical one is twenty conversations at once (the page, the browser's storage and the request rate limit per visitor handle that with room to spare). When the limit is reached, the window says so in words. There can be more windows on screen than fit in the tiling — then the extra ones lie on top of each other in the last cell, and the list gets them out. However many windows there are, the window keeps no more than three long connections to the server — the other conversations waiting for an operator learn about a reply by polling, a little more slowly.

Each conversation, as before, lives for a day without new messages and is stored only in the visitor's browser.

If you want it different:

no more than five chat windows

let the second window open at half the screen

turn off snapping

let the visitor have just one conversation

"At half the screen" means tiling from the start: the second window goes side by side with the first, the third — as a third column. This doesn't override a layout the visitor chose themselves. With one conversation, everything works as before: the bin erases the conversation and starts a new one.

What the funnel counts

A second window from the same visitor isn't a second buyer: the funnel steps are counted once per visitor, however many windows they open.

The right look from the first frame

The window gets its look settings from the server — that is, after the page has already been drawn. This used to be visible: the button would appear in the default green for a moment and then turn into yours. Now the last look is remembered in the visitor's browser, and on every following page the window is drawn as yours right away — colours, shape, button icon and label, position, size, your own style, labels, greeting.

• First visit. There's nothing remembered yet — so the chat button isn't shown until the settings arrive (usually a fraction of a second), and it appears already as yours. If they haven't arrived within four seconds (a very slow connection), the button shows in the default look: a website without a chat is worse than a chat in the wrong colour.
• You changed the look. A visitor who has been on the website before will see the previous look on the first page and the new one a moment later; after that — the new one right away.
• Only the look is remembered. Whether there's an operator, whether contacts are collected, whether the operator sees the draft — the window asks about all of this anew each time and doesn't show it until it gets an answer.

Buttons for your messengers

"Why is there a black one and no white one?" — that's not a question for the assistant. The worst thing it can do is make up an answer. The right ending for such a conversation is "here's where a person will answer you", in one click.

when you can't help, give them my Telegram @svitlo_shop and Viber 067 123 45 67

After that, buttons appear under any reply the assistant couldn't handle on its own. A click opens the messenger, and the input already contains the person's question and the address of the page they're writing from — support sees what it was about, not just "hello".

Button	What to name
Telegram	the username (@svitlo_shop) or a number
Viber, WhatsApp	a phone number
Call	a phone number
Send an email	an email address
your own	an address with https:// and the button label

Up to four buttons. The window offers the same buttons after a "didn't help" rating.

This isn't the same as "talk to a person"

Talk to a person is a conversation that stays in the window and waits for an operator from your dashboard. For that, someone has to be in the dashboard. Messenger buttons lead to where your people already answer.

And not the same as "Continue in Telegram"

Messenger buttons lead to people at your company. The "Continue in Telegram" button under the input leads to the assistant itself — to your Telegram bot, and the website conversation goes there together with the person. It appears on its own as soon as a Telegram bot is connected, and it isn't there while a person from "Conversations" is handling (or awaited in) the website conversation. Its label can be changed like the rest: "write 'Chat on Telegram' on the Telegram button".

Addressing people by name

The assistant will address a person by name if the website tells the window who has arrived.

• WordPress — nothing to do: our plugin passes the name of the person signed in to the website. Only the name — no email, no ID.
• Another website — it's one attribute in the code line, data-user-name="Oleksii"; whoever runs the website adds it (details).
• Without it — the assistant can simply ask how to address the person.

The name is a word for the greeting. It doesn't prove who someone is and gives no rights.

Conversation on phone and computer

A person who is signed in to your website started asking on their phone and continues on their computer — and sees the same conversation: what they asked, what the assistant answered, what the operator wrote. The assistant also continues from where it left off rather than getting acquainted again.

For this, the website has to sign who has arrived. Nothing needs to be set up in the agent.

• WordPress — one step: on the panel open the Channels row → New visitor signing key and copy the "For the WordPress plugin" line. Paste it in the plugin settings (version 1.3.0 or newer) into the "Visitor signing key" field. The plugin signs only the user's number on the website — without email or name — and always with the rights of a regular visitor.
• Another website — whoever runs the website does the signing (signed envelope).

A new key cancels the previous one

If your website already signs visitors, don't issue a new key: paste the same one into the plugin. Otherwise everyone the website signed will be strangers to the assistant for a minute — until the website starts signing with the new one.

Worth knowing:

• A guest who didn't sign in to the website can't take the conversation with them. There's nothing to recognise them by: anyone could fill in a name or number from the page, so they're no proof, and they can't open someone else's conversation.
• A conversation lives for a day after the last message — the same as in the window in one browser. The next day the window starts with a clean slate.
• The bin in the window works as before: a conversation erased on this device doesn't come back.
• Several windows. One conversation goes to the other device — the one the person wrote in last; the conversation from another device opens in the main window.
• Signing out. After signing out, the WordPress plugin no longer signs the person. On another website, after signing out of the account, call YouSelfBot.reset() — then the copy of the conversation in the browser is erased, and the next person at the same computer won't see it. If another person who is signed in sits down at the same browser, the window won't show them someone else's conversation even without this.
• With the signing key, the assistant also remembers a regular customer between conversations (if memory isn't turned off).

The look — with words

make the window square-cornered, add our logo and label the button "Need help?"

The line of code on your website doesn't change because of this — nothing needs to be pasted again. The window on your website updates itself.

Say	And the window
"make it square-cornered" / "slightly rounded"	changes its shape: the corners of the window, buttons and messages
"make it bigger" / "more compact"	changes the size of the window and its text
"use our font"	takes your page's font
"make the header our colour"	fills the header with the accent
"put a shopping bag on the button"	changes the icon: speech bubble, question mark, sparkle, shopping bag, headset
"label the button 'Need help?'"	makes the button elongated, with a label
"add our logo"	shows an image in the header or on the button — you need an image address with https://
"move the button higher, it covers the 'back to top' button"	moves the button and window away from the edge
"let it invite people itself: 'Need help choosing?'"	shows a bubble next to the button — once per visit, with a cross (when exactly)
"remove the product card" / "remove the add-to-cart button"	removes it — the assistant will still see the product
"don't show product cards, text only"	the assistant will recommend catalog products as links with a price, without cards under the reply
"remove the suggestions under replies"	replies come without option buttons
"in the /app editor, suggest 'How do I import code?'" / "no suggestions on the pricing page"	your own suggestions under the greeting for part of the website, by address pattern; on the other pages — the usual ones. A pattern without an asterisk is only that page: /app doesn't cover /app/edit; a page and everything under it — /app*. The same goes for your own bubble invitations (unlike "don't show the window on /app", where /app covers everything under it too)
"write under the greeting that prices should be checked with a manager"	replaces the note at the start of the conversation, under the greeting
"full screen on phones" / "a sheet from the bottom on phones"	changes how the window looks on a phone (a sheet by default)
"play a sound when there's a reply"	a quiet short sound for a new reply while the window is minimised or the tab isn't on screen (more)
"show in the tab that there's a reply"	"(1)" before the tab title while the person is in another tab
"pin the window in place"	the visitor won't be able to move the window and the chat button (by default they can)
"make the window wider" / "420 by 640"	your own window size on a computer (more)
"let it open in full screen right away"	on a computer the window opens expanded
"lock the window size"	the visitor won't be able to resize the window (by default they can)
"no more than five windows" / "allow as many as they like" / "let there be just one conversation"	a limit on chat windows or a single conversation (as many as they like by default)
"let the second window open at half the screen"	several windows tile over the full screen instead of lining up from the corner
"turn off snapping"	the window won't snap to the edges of the screen when dragged there

Colours, title, greeting and corner — in the same place as before.

When to invite

The bubble next to the chat button ("Need help choosing?") can appear not just after a few seconds, but based on the person's behaviour. Say when:

Say	The bubble appears
"invite after 10 seconds"	after 10 seconds on the page (5 by default)
"invite when they've been looking for a while"	after a longer time, for example 40 seconds
"invite when they read the product page to the end"	when the person has scrolled the page to the last screen — read everything and maybe didn't find an answer
"invite when the person is about to leave"	when the cursor heads to the tabs and the cross at the top of the browser window
"invite only on product pages"	only where the window sees one product; not on the catalog, cart or home page
"on a product page, write 'Tell you more about {product}?'"	a separate text for the product page; the window replaces {product} with the product's short name
"invite on phones too"	the bubble will appear on phones too
"invite when they scroll halfway down the page"	when the person has scrolled the named share of the page (half by default)
"in the catalog write 'Help you choose?', in the blog — 'Questions about the article?'"	your own text for each part of the website — by the beginning of the page address (/catalog/…, /blog/…)
"don't invite at checkout"	no bubble on these pages at all
"to people who've already written, say 'Welcome back! Shall we continue?'"	a separate text for a person who has already talked in this window
"put 'Find a chandelier' and 'Delivery terms' buttons on the bubble"	up to three buttons right on the bubble: a click opens the window and sends that phrase to the assistant right away
"show it on every page" / "once a day" / "just once"	how often to invite one person (once per visit by default)
"let it disappear on its own after 20 seconds"	the bubble stays for a while and disappears; the cursor over it pauses the countdown
"put the bubble beside the button"	beside the chat button rather than above it (on a narrow screen where it doesn't fit beside it — above)
"put a photo of the consultant on the bubble: …"	an image before the text — you need an address with https://; or ask for an icon to be drawn

Only the time the tab is on screen counts: a person who opened five products side by side and is reading the first hasn't looked at the other four yet. For "read to the end" and "about to leave", the delay means "no earlier than": an invitation a second after the page opened is one the person wouldn't even have time to see.

The window keeps these limits itself, whatever you set:

• once closed with the cross, it won't come back until the end of the visit, however often you asked it to invite; by default the bubble shows once per visit, even if the person didn't touch it;
• the window itself never opens — only the bubble next to the button, with a cross;
• on phones — only when you asked for it: there the bubble covers part of an already narrow screen.

What the window doesn't see

• "About to leave" works only on a computer. This signal is the mouse moving to the tabs. Phones and tablets have no such movement, and the window doesn't make it up: there the bubble with this signal won't appear.
• The window doesn't see the shop's cart. It can press the "add to cart" button, but what's in the cart and whether the person bought it later only your shop knows. That's why there's no "added to cart and didn't buy" invitation; say "when they're about to leave" or "when they read the page to the end" instead.

The bubble's look — also with words: background, border, rounding, cross, image, buttons on it and even a tail pointing to the chat button ("make the bubble dark blue with a yellow border and a tail"). This is your own style, and in the "button only" preview you see the bubble right away.

The product name in the bubble — your call

"Tell you more about the Kovyla chandelier?" sounds attentive to some and like being watched to others. That's why the window puts the name only where you yourself put {product}, and keeps it short — up to forty characters.

Sound and unread messages

A reply that arrived while the window was minimised shows as a number on the chat button — always, nothing to switch on.

Two more signals — only if you ask, because they take the attention of people on your website:

• Sound — "play a sound when there's a reply". A quiet short signal when a new reply arrives in a minimised window or an inactive tab. Off by default: a sound the person didn't expect is irritating, and some people simply close the tab after it. The browser doesn't allow sound until the person has clicked something on the page at least once — until then there's only the number.
• "(1)" in the tab title — "show in the tab that there's a reply". While the person is in another tab, your page's title gets a counter; as soon as they come back, the title becomes exactly what it was. If the website changed the tab title itself in the meantime, nothing touches it.

Anything you like: your own style

When the set above isn't enough — "message bubbles with a tail", "a header gradient in the brand colours", "let the button pulse", "draw my own icon", "write 'What are you looking for?' in the input" — just say it. The builder will write its own style for the window, draw the icon and replace any label.

make the header a gradient from blue to purple, the assistant's messages with a thin border, and write "What are you looking for?" in the input

The style changes any part of the window, not just the background: the header, your messages and the assistant's messages, the input, the send button, the chat button, the invitation bubble, suggestions, product cards, contact buttons, the contact form, system lines, the scrollbar, shadows, font, rounding, the size and position of the window. Name everything you want to change — in one sentence or as a list — and the builder will list exactly what it changed.

redo the whole window in our brand: dark blue with amber, square-cornered, a serif font, contact buttons in blue

A few things stay unchanged here, because the window sits on your website, in front of your customers:

• No code. Style and drawings — yes; scripts — no, in any form.
• The font is one your website already has, or a system font. You can't load a separate font file for the window.
• On a phone the window is always full screen width and no taller than the screen — whatever size you set for computers.
• The "Made with youselfbot.com" line stays — why and how it works.
• The style doesn't go beyond the window. It works only inside it and won't affect your page. The window also checks itself: if in its minimised state it covered the page — the style is removed and the window becomes the default. An ugly window is better than a shop where no button can be pressed.

Readability with your own style is up to you

With the set from the table above, the platform itself keeps text readable on any background. With your own style that guarantee is gone — check the preview.

A website in another language. Say "translate the window into English" — the builder replaces all the labels together: buttons, states in the header, and also refusals and errors ("file is too large", "no connection", "the reply was cut off") that the person sees exactly when something has gone wrong. Only the words the window says when it couldn't load your settings stay default (the website isn't added to the allowed ones, no network at startup): at that moment it doesn't have your labels yet. Together with them, the labels only a screen reader hears ("expand window", "the reply helped", "You", "Assistant", "Operator") are translated, and so is the "Try again" button under a reply the connection cut off.

Two labels can't be replaced: "The owner of this website will see your contact" in the contact form, and "The operator can see you typing". These aren't decoration, but things the person must know before typing anything.

Bringing back the defaults — part by part or all at once: what's changed and how to undo it.

Your own buttons in the window

Style repaints what's already in the window. When you need to add something — a "Catalog" button in the header, a "Free delivery from 1000 ₴" line under it, a link to the terms at the bottom, a Telegram button next to the input, a menu with your website's sections — say what and where:

add a "Catalog" button to the header that opens /catalog

put a "How do I pay?" button above the input — let it ask about payment methods

Where you can put it
header	left of the title or on the right, among its buttons
under the header	a strip that doesn't scroll
start of the conversation	above the greeting; scrolls together with the messages
above the input	a row of quick buttons
next to "Talk to a person"	in the same row
bottom of the window	under the input
next to the chat button	visible while the window is minimised
on the invitation bubble	under its text

An element is a button, a link, a line of text or an image, with its own label and icon. And when clicked, it does one of these:

Say	The button
"that opens /catalog" / "goes to https://…" / "calls +380…"	opens a page on your website (in the same tab — the conversation stays with the person), another address (in a new one), an email or a call
"opens our Telegram / Viber / WhatsApp"	opens the messenger — the person's question and the page address are already filled in
"asks the assistant about delivery"	sends a phrase to the assistant on the visitor's behalf — they see it as their own message
"puts 'My size is ' into the input"	puts text into the input without sending
"copies the promo code SVITLO10"	copies text to the clipboard
"starts a new conversation" / "calls a person" / "opens the contact form"	the same as the built-in buttons
"opens the chat" / "minimises" / "expands the window"	controls the window itself
"shows and hides the terms block"	expands another of your elements — a line of text or an image
"a menu with items: …"	a drop-down list under the button; each item has its own action

There's no code of your own here and there can't be: the actions come only from this list, and none of them pays for anything or agrees to anything on the person's behalf. The window fits up to 24 of your own elements, several in each place — the builder will tell you if a place is already taken.

The look of each element — like the rest of the window: "make the 'Catalog' button yellow and bigger".

To remove: "remove the 'Catalog' button" or "remove all my own buttons from the window".

Layout and parts

What's already in the window can be rearranged and hidden:

Say	And the window
"put the chat on the left" / "top right"	moves to another corner of the screen — any of the four
"move the button higher, it covers the 'back to top' button"	moves away from the edge
"remove the 'expand' button" / "hide the bin" / "no ratings under replies" / "no paperclip"	hides that part. Without the paperclip the window doesn't accept files at all — not by pasting, not by dragging
"put the bin first and 'minimise' last"	rearranges the header buttons (yours too)
"centre the title"	puts the name and status in the middle of the header
"input at the top"	the input goes under the header, and the conversation grows downward
"put the suggestions above the input"	the suggestions from the greeting become a row above the input and stay there after the first question
"first 'Leave contact', then 'Talk to a person'"	rearranges the buttons under the messages

Your own action for a built-in button

The buttons under the messages — "Talk to a person", "Leave contact", "Continue in Telegram" — can do not their usual thing but what you say:

Let the "Talk to a person" button go to https://firma.com/zapys

Let "Leave contact" open our Telegram @firma

On "Talk to a person", let it ask the assistant about a consultation

The button stays in its place, with its label and icon (these can also be changed with words), but does what you named: opens a page, a messenger, email or a call, sends a phrase to the assistant, puts text into the input, copies a promo code. Such a button is always in the window — even when handing over to a person or collecting contacts is turned off. The "Talk to a person" button that the window offers in the conversation after a "didn't help" rating gets the same action.

To put it back as it was: "let the 'Talk to a person' button call a person again". If you need another button rather than replacing an existing one, that's your own button: you can add as many as you need, each with its own action.

Any built-in part can be hidden: the logo, the title, the status line, each header button, the buttons under the messages, the paperclip, ratings, suggestions, the counter on the chat button. One thing the window keeps itself: on a phone the "minimise" button stays, however you arrange the header — there it's the only visible way out of the window.

Your own icons

Any icon in the window can be replaced — the builder will draw it itself:

replace the send arrow with a paper plane, and the three "typing" dots with a pencil

You can replace the chat button's icon and its cross, the bubble's icon and cross, the header buttons, "send", the paperclip, the icons of the buttons under the messages, ratings, "typing", the cart on the product card, the contact button icons and small markers. An icon is a drawing made of lines and shapes; you can't put an image file there (the chat button and the logo have separate fields for an image address).

The line that stays

At the bottom of the window there's a quiet line, "Made with youselfbot.com". It's the only thing in the window nobody changes — not you, not the builder: it can't be hidden, covered, repainted in the background colour or replaced with your own.

Everything around it — colours, shape, labels, icons, the set and order of parts, your own buttons — is yours. But the window guards this line itself: after every change, it checks that the line is visible on screen. If your own style or your own element hid it (on purpose or by accident — for example, the window became too tall and the bottom went past the edge), the window removes that style entirely and becomes the default, writing the reason to the browser console. So if after a style change the window is suddenly default again, tell the builder "check the window style: the window removed it".

The line adjusts its language to the page on its own (by the website's language); it isn't in the list of labels you change.

Languages

A website can be in two languages — and so can the window. It has its own labels (the input, buttons, states, refusals and errors) in Ukrainian and English, and shows them in the language the person reads — nothing to switch on.

The window chooses the language for each visitor itself, in this order:

1. the language the website itself named in the code (data-lang or YouSelfBot.setLang — this is for whoever edits the code);
2. the page language (what the website tells the browser about itself: /en — English, everything else — Ukrainian);
3. the visitor's browser language — if the page doesn't name its own language;
4. the window's main language.

The first one the window has something to show in is taken. A German page without German texts won't get a window with one German phrase and the rest in English — the window takes the next language in the queue in full.

Your texts — the greeting, suggestions, the note under the greeting, the invitation bubble, your own labels and buttons — start out as one set. Say: "make the window available in English too" — the builder translates them itself and adds a second set next to the first. From then on:

• on a Ukrainian page, the window uses the Ukrainian set, on an English page — the English one;
• whatever is missing from the English set, the window takes from its own English dictionary, not from Ukrainian: an untranslated greeting becomes the built-in "Hi! How can I help?", and untranslated suggestions and bubble simply won't be there. There's never a mix of two languages in one window;
• the exception is the window title: it's a name, and without a translation it stays as it is;
• the labels of your own buttons ("Catalog") and your labels on contact buttons stay in the main language without a translation — the window doesn't make them up for you.

After every such change the builder tells you what is set in which language and what is still untranslated — the platform counts this, not the builder itself. You can see the same on the "Chat window" sheet: a "Window languages" section with a "Translate the rest" button, and above the preview a "Preview language" switch so you can see the window in each language.

In a language the window doesn't know on its own (Polish, German), the set has to be complete: the builder translates all the window's labels too; whatever it didn't translate will be in English.

The assistant itself already answers in the language it was written to in. If you told it to answer only in Ukrainian, and the window greets people in English on an English page, the builder will point out this contradiction. The refusal sentence ("I can't help with that") has a translation too: to a person writing in English, the assistant says it in English — using your translation, and where there isn't one — its own.

Until you ask for a second language, your texts have no language and are shown to everyone as written. If the window unexpectedly started speaking English on a Ukrainian website (the website template marks the page as English), say "show the window in Ukrainian only".

Where there's no window

On some parts of a website the window is unnecessary: in an editor, in a customer account, at checkout. Say: "don't show the window on /app pages" — and there will be neither the chat button nor the window there. You don't need to touch the code on your website.

• /app means the page itself and everything under it (/app/edit/7), but not /apple;
• / — only the home page; an asterisk — anything: /docs/*, */edit;
• the visitor's conversation isn't lost: on other pages the window appears with the same conversation;
• you can't hide the window on all pages this way — the builder will tell you to remove the code from the website.

You can see which pages have no window on the "Chat window" sheet: a "Where there's no window" section with a "Show everywhere" button (the same in words — "show the window on all pages of the website"). The website's developer can do the same from code: hide the window for a while and bring it back.

What has changed and how to undo it

Ask: "what's changed in the window right now?" — the builder lists everything: the set, colours, your own style, labels, icons, your own buttons (each with its place and action), layout, the bubble.

You can see the same on the "Chat window" sheet: under the preview there's a "What's changed in the window" list, with a "Reset" button next to each part; at the bottom — "Reset all".

Say	What comes back
"put the window back as it was"	the whole look at once; the title, greeting, suggestions and contact buttons stay
"remove my own window style"	only the style
"bring back the default labels" / "bring back the built-in icons"	labels / icons
"remove my own elements from the window" / "remove the 'Catalog' button"	all your buttons / one
"bring back the usual layout"	order, hidden parts and corner
"remove the bubble"	the bubble together with its rules and buttons

Is the consultant selling

"The bot answers" is a feeling. On the panel, the Is it selling row shows numbers: how many conversations in the window reached each step over a day, 7 or 30 days.

Step	When it counts
opened the window	the person expanded the window
asked a question	wrote at least one message, and it arrived
pressed "add to cart"	the "add to cart" button on the page's product card
went to a product	from a card under the reply or from a link to a product shown as a card
went to a messenger	a messenger or phone button — to people at the company
continued with the assistant in a messenger	"Continue in Telegram", and the link to the bot opened
left a contact	the contact form, and the contact arrived
asked for a person	with the button, or the assistant handed over the conversation itself

Each step counts once per conversation: twenty presses of "add to cart" are one step. Several windows from one visitor count as one conversation: a second window doesn't add a second "opened". "Asked a question" is a percentage of those who opened the window; the rest — of those who asked. While there are fewer than thirty conversations, there are no percentages.

What's counted and what isn't. The window sends only the step's name — "pressed add to cart". No name, contacts, conversation text, page address or product; no cookies and no browser fingerprint. Counters are stored by the hour, and they can't tell one buyer from another. The counters live for two months and disappear together with the agent.

The numbers are approximate. An ad blocker or a dropped network can lose a step, and the window's public key allows someone to inflate the counter — the platform limits how often a step is accepted from one address, but it can't tell a real buyer from a fake without tracking them. The window doesn't see purchases at all — checkout happens in the shop, so "pressed add to cart" is the closest to a sale the window can honestly count. Nothing is counted in the dashboard preview.

To turn off counting:

don't count what shoppers do

What's already been counted stays visible; new steps aren't counted.

See what you got

After every change to the look, a "How it looks on the website" button appears in the conversation. The same is the "Chat window" row on the panel next to it.

This is the real window with your settings on a sample product page: you can switch between "open window", "button only" (with the invitation bubble, if you have one — in the preview it's shown right away, and when it will appear on the website is written under the frame) and "on a phone", write in it and see a sample reply with options, buttons and product cards — if the catalog is connected, the cards are made from your products. The conversation there isn't real — no credits are spent, and nothing appears in "Conversations".

Speak as owner

The fourth button there — "Speak as owner" — opens not a sample but a real conversation with your agent, and in it you're the owner, just as surely as in a linked messenger. The agent can see your notes, email and calendar, if they're connected; you can ask "write this down", "what do I have tomorrow", "find the email from the bank".

These are regular agent turns: credits are spent. The conversation is private — in "Conversations" only workspace admins see it, a member sees a row without text. Only admins have the button: they're the ones who can speak on the owner's behalf.

What to say

Say	And it
"put a consultant on my online shop"	gives you a line of code; the window sees the product, the card and the cart on its own
"here's the link to our products: …"	teaches the assistant your whole range — Store products
"when you don't know, give them my Telegram @…"	adds messenger buttons under the replies it couldn't handle
"make the window look like our website"	picks the shape, font and colours; shows a preview
"make it completely my own: …"	writes its own window style — for any part of it, not just the background
"add a 'Catalog' button to the header"	puts your button in the window — your own buttons in the window
"remove the 'expand' button, centre the title"	rearranges and hides parts of the window — layout and parts
"replace the send arrow with a paper plane"	draws its own icon instead of the built-in one
"invite differently in the catalog, and don't invite at checkout"	gives the bubble its own text for each part of the website
"what's changed in the window right now?"	lists everything of yours in the window — and tells you how to undo it
"make the chat a panel on the right so it doesn't cover the site"	puts the chat in a full-height side panel that pushes the page aside — chat as a side panel
"write 'Assistant' on the button and use my icon"	turns the chat button into a pill with an icon and a label — a button with a label
"make the window available in English too" / "show it in English on /en"	translates your texts and adds a set in the second language; tells you what's still untranslated — languages
"my website is in English"	makes English the main language; rewrites the greeting and suggestions in English
"show the window in Ukrainian only"	turns off choosing the language by page and browser
"don't show the window on /app pages" / "hide the chat in the editor"	removes the chat button and the window from these pages — where there's no window
"remove the 'Made with youselfbot.com' line"	honestly tells you it's the only thing in the window nobody changes
"pin the window in place"	turns off moving the window and the chat button for visitors
"make the window wider" / "let it open in full screen right away"	sets your own window size or opens it expanded
"no more than five windows" / "let there be just one conversation"	sets a limit on chat windows or keeps a single conversation
"let the second window open at half the screen" / "turn off snapping"	windows tile; or the window won't snap to the edges of the screen
"invite when the person is about to leave"	shows the bubble when the cursor heads to the tabs (when to invite)
"show me what it looks like"	opens a preview of the real window
"is the consultant selling?" / "how many add-to-cart presses this month?"	gives you the window's funnel in numbers — and says directly when there are still too few conversations to draw conclusions
"don't count what shoppers do"	turns off counting steps in the window
"let it remember the conversation when a customer comes from another device"	tells you this works for people signed in to the website, and gives you the step with the key (conversation on phone and computer)
"put the window back as it was"	brings back the default look — all of it or part by part

What next

• Store products — so the assistant knows your whole range and recommends other products.
• Where the agent answers — the line of code, the allowed domain, WordPress.
• When a customer asks for a person — an operator right in the window.
• The window on someone else's page: what the script itself can do — for whoever edits the website's code.