Creating and setting up a widget#

Create a widget#

1. Open the project and choose "Widgets" in the menu.
2. Click "Create".

The widget is created right away, without a form, and opens in the builder. It already has the title "Hello!" and the description "Contact us through any of the following channels:". There are no links yet — add at least one, otherwise the widget will not be saved.

The list of widgets#

The "Widgets" section of the project gathers all its widgets. A widget's title serves as its name in the list.

• View. The switcher on the right shows widgets as a "List" or as "Cards". A card shows a thumbnail of the widget and the icons of its links; if there are no links — the "No channels connected" label.
• Order. Widgets are dragged by the icon on the left. The order is shared by all members of the project.

In the "⋯" menu on the right:

• "Icon" — upload the widget's image for your account and the chat header on the website.
• "Duplicate" — create a widget with the same texts, links, banner, colours and domains. The copy's title gets the "(copy)" mark.
• "Move to ..." — move the widget to another project of yours. The item is visible only to the project owner.
• "Delete" — delete the widget. It stops showing on the websites where its code is placed.

Note

When the widget is moved to another project, the chat with the bot in it is turned off: the bot stays in the original project.

Builder#

The builder shows the widget the way a visitor will see it: the window is open, and below it is the round button. Next to it is a button with a gear: it opens the "Widget settings" panel.

Edits in the panel are immediately visible on the widget, but they reach the website only after you click "Save". "Cancel" brings back the last saved state. If you leave the page with unsaved edits, your account asks: "Changes are not saved. Leave the page?".

Widget settings#

Links#

Click "Add link" and choose the kind:

For the messenger your bot works in, paste the bot's general or additional link from the "Links to chatbot" section — then transitions from the widget get into the bot's statistics. Where to get it is in the Links to chatbot section. You can also paste a regular link to a profile or group.

The gear icon at a link opens the "… link settings" window, the cross deletes the link. The order is changed by dragging the icon on the left.

How links behave on the website:

• On a phone a tap opens the link right away.
• On a computer a link to a messenger or a social network opens a QR code inside the widget with the hint "To write to …, scan the QR code or follow the link below" and a button to go there. A regular "Link" opens right away in a new tab.
• If the address of a messenger link is not filled in, the visitor sees: "The link is not set. This contact channel is temporarily unavailable".

Banner#

Click "Select photo" and upload an image — JPG, PNG or GIF. A large image is reduced to 600 pixels on the long side. The bin icon on the image removes the banner.

Only a web address will do in "Link in banner" — one that starts with http:// or https://.

When the visitor opens the chat, the banner is hidden so that the conversation has enough room.

Theme and colours#

In "Theme" choose how the widget looks on the website:

• "Light" — always light;
• "Dark" — always dark;
• "Match the visitor" — light or dark, like the theme on the visitor's device. If the visitor switches the theme, the widget changes its colours right away, without reloading the page.

Colours are set for each theme separately. With "Match the visitor" there is a "Light | Dark" switch above the colours: pick a theme and set its colours. The widget next to the panel shows the theme you are setting up right now.

The widget picks the other shades — the header, borders, secondary text — on its own from the background and text. The colour of the text on the accent is chosen automatically too: dark on a light accent, white on a dark one. Messenger buttons under the QR code keep their brand colours, and in the dark theme the QR code sits on a white background so that a camera can read it.

"Restore default colors" resets the colours of the selected theme.

Note

Widgets created before themes appeared have the "Light" theme with their previous button colours. The dark theme takes the button colour and the accent from it; after the first save the colours of the themes are stored separately.

Website domains#

While the field is empty, the widget works on any website its code is inserted into. To keep someone else's website from showing your widget, list your domains:

• example.com — only this domain (with and without www.);
• *.example.com — the domain itself and all its subdomains.

You can paste a full page address — only the domain will remain. Cyrillic domains are fine too. The list holds up to 20 domains.

Widget icon#

The icon is shown in your account — in the list of widgets and in the switcher — and on the website: in the header of the chat with the bot, to the left of the title. The widget button itself is drawn on the website in the colours from the settings.

Open "Icon" in the widget's "⋯" menu or "Change icon" in the widget switcher and upload an image: JPG, PNG, GIF, WebP or AVIF up to 5 MB, preferably square. The icon is saved right away.

If something does not work#

• The widget is not saved, there is an error at the "Links" field. At least one link is needed. The exception is a widget with the chat turned on: links are not required for it.
• An error at a link of the "Link" kind. Its address is required.
• "This link cannot be opened: javascript:, data: and similar addresses are not allowed." Paste a regular address.
• "The banner could not be saved: the file is not available." An uploaded but unsaved image is kept only for a short time. Upload the banner again and click "Save" right away.
• "The banner must be a JPEG, PNG, GIF or WebP image." The file has another format. Re-save the image in one of these formats.
• An error at the "Website domains" field. Letters, digits, dots and hyphens are allowed in a domain; an asterisk only at the beginning, as *..
• "A project can have no more than 100 widgets" — a hint on the disabled "Create" button.
• "You can create no more than 100 widgets per day." Wait until the next day.
• "Creating and editing widgets is restricted for violating the platform rules." See Widget checks by the platform.