Web Widget Deployment

The Deployment tab of a Web Widget Profile gives you everything needed to add your virtual being to a website. The widget supports text and voice interaction and can be deployed in two layout modes depending on how you want it to appear on the page.

Before you deployCopy Anchor Link

1. Publish your PipelineCopy Anchor Link

The widget runs whatever Pipeline version is currently Active on the Profile. If you haven't published yet, the widget has no conversation logic to run. Publish from the Conversation Editor before testing on a live site.

2. Authorize your domainCopy Anchor Link

The Virbe widget will only load on domains you explicitly authorize. This is a security measure that prevents your Profile credentials from being used on unauthorized sites.

1. In the Profile's Deployment tab, find the Authorized domains section
2. Enter your domain – use the high-level domain only (e.g. example.com). Do not include https://, www., or path segments
3. Click Add – the domain is now authorized to load your virtual being

You can add multiple domains (e.g. a staging environment and your production site are separate entries).

Deployment modesCopy Anchor Link

Before copying the embed code, choose how you want the widget to appear on the page. The mode is set in the Deployment tab and determines the shape of the embed snippet.

Floating modeCopy Anchor Link

The widget appears as a small avatar or icon anchored to a corner of the screen (bottom-right by default). When a user clicks it, the widget expands into the full chat and voice interface. Clicking again collapses it.

Floating is the most common deployment mode. It is unobtrusive, always accessible, and familiar to users from standard chat widget experiences. Use it on any site where the assistant is a secondary feature alongside other content.

You can configure the corner alignment (Top/Bottom) in the Profile's Settings tab.

Embedded modeCopy Anchor Link

The widget renders inline within a specific section of your page layout – not as an overlay. You place it inside any container element you control, including full-width sections, sidebars, or a dedicated full-screen page.

Use cases for Embedded mode:

• A dedicated "Talk to our assistant" page with nothing else on it
• An in-page help section alongside product documentation
• A fullscreen virtual receptionist experience at an event landing page
• Any context where you want the assistant to be the primary focus, not a supplementary widget

Getting the embed codeCopy Anchor Link

1. In the Profile's Deployment tab, select Floating or Embedded mode
2. Copy the code snippet shown – it looks like:

<virbe-plugin
  profileId="your-profile-id"
  profileSecret="your-profile-secret"
  mode="floating"
></virbe-plugin>
<script type="module" src="https://your-dashboard-name.virbe.app/web-component/virbe-plugin.es.js"></script>

3. Paste it into your website's HTML, just before the closing </body> tag
4. Add it to every page where you want the widget to appear

The profileId and profileSecret values are unique to your Profile and already filled in when you copy from the Deployment tab – do not modify them.

For Embedded mode, wrap the snippet in a container element sized to your layout:

<virbe-plugin
  profileId="your-profile-id"
  profileSecret="your-profile-secret"
  mode="embedded"
></virbe-plugin>
<script type="module" src="https://your-dashboard-name.virbe.app/web-component/virbe-plugin.es.js"></script>

Assigning versionCopy Anchor Link

By default, a deployed touchpoint always runs the Active (most recently published) Pipeline version. Every time you publish a new version, all deployments using this profile update automatically.

Assigning version locks this profile to a specific Pipeline version. The profile will continue running that version even after newer versions are published – useful for:

• A production environment that needs a controlled release process
• Keeping a backup profile frozen while testing a new version on a separate profile

To assign a version: toggle Assign a specific version and select the version from the dropdown.

Testing before going liveCopy Anchor Link

You do not need a live site to test the widget. Options available without any deployment:

• Test conversation panel in the Conversation Editor – tests your current Draft pipeline in a chat panel without publishing
• Preview button in the editor top bar – opens the widget in a browser tab with your current Draft

For pre-production testing on a real site, create a separate Profile (e.g. "Website – Staging"), authorize your staging domain, assign the Draft pipeline to it, and embed it in your staging environment. When ready, publish and the production Profile updates automatically.

After deployment: updating your widgetCopy Anchor Link

Once the embed code is in place, you never need to touch it again for Pipeline updates. The update cycle is:

1. Edit your Pipeline Draft in the Conversation Editor
2. Test using Test conversation or Preview
3. Click Publish – the Draft becomes Active
4. All deployed widgets using this Profile automatically switch to the new version

If you need to change widget appearance, behavior, or language settings, update them in the Profile's Settings tab – changes to settings take effect without re-publishing the Pipeline.

For advanced embedding options – including JavaScript events, API methods, and programmatic control – see the Developers and Tutorials sections.

Cookie settings