Website Widget, Agent Link, and Phone App
Learn how to add the agent to your website with a single line of code, how the short link works for social media and messengers, and how customers install your agent as a phone app.
The agent has two faces. On your website, it's a window in the corner that opens with a button. On social media and in messengers, it's a page accessed via a short link, functioning as a mini-store and installable on a phone like an app. However, the catalog, terms, conversations, and requests are shared: there's only one agent.
Everything described below is managed in the “Widget and Link” section.
Link to the agent#
A short URL like comag.vibevox.pro/c/your-shop. Place it in your Instagram, TikTok, or Telegram profile bio, send it via WhatsApp, or include it in the description below a YouTube video.
When sent in a messenger, the link expands into a card: cover image, store name, and description. All three fields are customizable:
- Preview Title — defaults to your store name.
- Preview Description — a short phrase about what customers can ask.
- Cover Image — automatically generated from your accent color, logo, and product photos. You can upload your own, size 1200 by 630 pixels.
The easiest way to check how the preview looks is to send the link to yourself in Telegram.
Code for your website#
A single line of code to insert before the closing </body> tag on all pages. Copy it with a button in the admin panel.
Where to insert it on popular platforms:
| Platform | Where to insert |
|---|---|
| Tilda | Site Settings → More → HTML code for body |
| Shopify | Theme → Edit code → theme.liquid, before </body> |
| WordPress | Appearance → Theme File Editor → footer.php, or a code insertion plugin |
| Wix | Settings → Custom Code → add to Body end |
| Your own site | Directly into your template before </body> |
After insertion, a button will appear in the bottom right corner. You can change its position to the left in the settings, along with its color and theme.
The widget loads asynchronously and does not slow down the page. If you have a strict CSP configured, allow the comag.vibevox.pro domain in script-src and connect-src.
Appearance#
Settings visible to the customer:
- Store name and assistant name. The latter is the assistant's name displayed in the chat header.
- Greeting. The first phrase. A good greeting promises value, it doesn't just say hello.
- Conversation starters. Up to four buttons with questions. If left empty, they will be automatically generated from your catalog.
- Tone of voice. From a list or custom: “warm and concise”, “expert, formal”.
- Accent color. A single color defines the button, links, and card highlights.
- Logo. This will also become the app icon on phones.
- Microphone button. Speech recognition in the browser. If the browser doesn't support it, the customer can record a voice message, and Gemini will transcribe it.
On the right, a live preview updates as you type. The “Save” button applies changes to your website.
Light and dark theme#
The chat has two visual themes, switched in a single setting field: “Theme”.
| Value | What the customer sees |
|---|---|
| Match visitor's system | The theme adapts to their phone or computer settings: dark at night, light during the day |
| Light | Always a light window, regardless of the device |
| Dark | Always a dark window |
“Match visitor's system” is the default, and in most cases, it's the right choice: someone with a dark theme on their phone won't get a bright white flash, and those accustomed to a light theme will see a familiar window.
A fixed theme is useful when your website itself is designed with a specific aesthetic. A dark landing page with a light chat in the corner looks like a patch, and vice versa. In such cases, set the chat theme to match your website's, and the widget will blend seamlessly with your design.
The accent color works across both themes: buttons, links, and card highlights adopt your brand color, while the background and text change with the theme. The easiest way to check both options is in the live preview on the right — it updates instantly as you switch values.
Product cards link to your website#
The agent responds not with plain text, but with cards: photo, name, price, button. Behind the button is always an address — either the product page on your website or the original social media post if the card was generated from there.
Within the website widget, clicking a card opens it in the same window to avoid creating multiple tabs. On the agent's page accessed via a link, the card opens in a new tab so the conversation is not lost.
For Shopify and WooCommerce stores, there's a nice detail: the button doesn't just open the product; it adds it to the store's cart using the platform's native mechanism. Details are available in the articles on Shopify and WordPress.
Also: the widget reads the product markup on the page where it's opened and passes it to the agent. Therefore, a question like “is it available in blue?” on a product card is understood in context, without needing further clarification.
App on the customer's phone#
The agent's page can be installed as an app. The customer opens the link from their phone, sees an offer to add it to their home screen, and gets an icon with your logo.
- Name under icon — one word, up to 12 characters. If left empty, we'll use the first word of your store name.
- Icon — your uploaded logo. If no logo is provided, the Commerce Agents logo is used.
- On iPhone, installation is done via “Share” → “Add to Home Screen”. This is a Safari limitation, and the agent guides the customer through the steps.
After installation, you can send push notifications to the customer from the “Conversations” section. The customer grants permission themselves by tapping the bell icon in the chat header.
Customer attachments#
The chat includes a paperclip icon for attachments: photos, videos, or audio up to 20 megabytes. If the browser lacks speech recognition, holding the microphone button records a voice message.
Gemini analyzes the file: what's shown, any text on the image, and what's said aloud. The agent responds based on this analysis, and you see both the file and a brief description in the conversation. This is helpful in niches where it's easier to show than to describe: spare parts, repairs, photo-based selection.
Purchase pixel for e-commerce sites#
If payment occurs on your website, not in the chat, insert a short snippet from the admin panel onto your “Thank You for Your Order” page, including the order number and amount. The purchase will be linked to the conversation, and your statistics will show which conversations lead to sales.
Check#
Three minutes worth spending after setup:
- Open your website in incognito mode and click the widget button. Ask a question about a product.
- Open the agent link on your phone. Check that installation is offered.
- Send the link to yourself in a messenger and check the preview.
- Look into “Dialogs”: both conversations should appear there.
Common Questions#
Are the website widget and the link different agents?#
It's the same agent. The catalog, terms, dialogs, and leads are shared. Only the appearance differs: on the website, it's a window in the corner, while the link opens a full-screen page that can be installed on a phone.
Can I change the link address?#
The address is generated from your store name when you create the storefront. If you need a different one, message us on Telegram — we will change it manually to avoid breaking any links you've already shared.
Will the widget slow down my website?#
No. The script is lightweight and loads asynchronously, after the main page content. The chat window itself only loads when a customer clicks the button.
What does a customer see if the agent is turned off?#
Nothing: the button does not appear, and the page accessed via the link shows that the agent is unavailable. The toggle switch is in the “Widget and Link” section.
How do I remove the “Powered by Commerce Agents” label?#
Not possible for now: the label remains on all plans. It is clickable and leads to our website — this is part of the pricing that allows the service to cost 29 € instead of a significantly higher amount.