Web widget

The web widget puts a chat button on your website. It answers questions, shows products and order details, hands over to your team, and keeps the conversation going when the visitor comes back.

Add it to your site

1. Open Channels and create a Web chat widget channel.
2. Set how it looks and where it sits.
3. Click Get embed code and copy it.
4. Paste it before the closing </body> tag on every page.

<script
  src="https://cdn.vivollo.com/widget/v2/widget.js?tenantId={TENANT_ID}&channelId={CHANNEL_ID}"
  data-vivollo-chat-widget
></script>

Reload the page and the chat button appears.

You only paste this once. Everything else — placement, colors, messages — comes from the channel, so changing a setting in the panel changes your live site without touching the code again.

Where it sits

Placement decides how the widget appears on the page.

• Floating — a button in a corner of every page. Choose Left or Right, and lift it with Launcher height if a cookie bar or a bottom navigation is in the way.
• Embedded — the chat fills an element on your page instead, such as a contact section. Give it the element and the embed code includes a matching div.

To use different placement on one site only, add display= to the script address: display=sticky,left,medium or display=embedded,#chat.

How it looks

Appearance covers your brand and the chat's style.

• Name, Logo and Assistant picture — a square logo of at least 256px works best. Leave the picture empty and the logo is used.
• Color — pick a preset or set your own. On pages where it would be hard to read, the widget adjusts it so the button stays visible.
• Theme — Match site follows the page the widget is on, and falls back to the visitor's device when the page has no theme of its own. You can also pin it to Light or Dark.
• Corners — square through soft, to match the rest of your site.

The preview next to the settings shows the widget on a sample page. Unsaved changes appear there first, so you can try something without touching your site.

What it says

The widget already speaks eleven languages — English, Turkish, German, French, Spanish, Portuguese, Russian, Arabic, Hindi, Japanese and Chinese — and picks the one that matches your page or the visitor's browser. Visitors can switch language themselves, and that choice is remembered.

Under Messages, add a language only when you want to change its wording. Empty fields keep the widget's own text.

Invitation bubble shows a short message above the closed chat button, such as "Need help? Just ask!". It is off until you turn it on.

Visitor context

The widget passes along useful context — device, approximate location, referrer and pages visited. Your team sees it in Messages and the assistant can use it. Raw IP addresses are not stored and sensitive values are stripped from URLs.

The session survives page loads and return visits, so a customer who comes back continues the same conversation. See Visitor journey.

To turn visitor capture off on a site, add tracking=false to the script address.

Open it from your own button

Use the JavaScript API when your own button should open the chat, or when you want to pass settings from the page:

<script src="https://cdn.vivollo.com/widget/v2/widget.js"></script>
<script>
  Vivollo.create({
    tenantId: "{TENANT_ID}",
    channelId: "{CHANNEL_ID}",
  });
</script>

Vivollo.setTheme("dark") switches the theme from your site's own toggle, and Vivollo.on("chat:opened", …) lets you react to what the visitor does.