1. Overview
  2. Widgets
  3. Configuring the Voice Orb (Floating vs Fixed Placement)

Configuring the Voice Orb (Floating vs Fixed Placement)

Purpose

This SOP explains how to configure the Voice Orb in either Floating mode (default) or Fixed/Embedded mode and how to troubleshoot common placement issues.

Scope

This procedure applies to:

  • Customer Support

  • Customer Success

  • Implementation Specialists

Default Behaviour

By default, the Voice Orb is rendered as a floating widget that remains fixed on top of the webpage while the user scrolls. No additional configuration is required.

When to Use Floating Mode

Recommend Floating Mode when:

  • Customers want a persistent AI call button.

  • The orb should be accessible across the entire website.

  • No specific placement is required.

Action Required:

  • Install the Voice Orb script normally.

  • No additional settings are needed.

When to Use Fixed (Embedded) Mode

Recommend Fixed Mode when customers want the orb:

  • Inside the Hero section

  • Inside a Contact section

  • Embedded on a landing page

  • Positioned within a custom container

Configuration Steps

Step 1 – Create a container

The customer must create a container where the orb should appear. Example:

<div id="voice-orb-slot"
     style="position: relative; min-height: 200px;">
</div>

Important — The container must have:

position: relative;

Without this, the orb will not stay inside the container.

Step 2 – Configure the script

The Voice Orb script must include the data-container attribute. Example:

<script
src=".../last-version-orb.js"
data-container="voice-orb-slot">
</script>

The value of data-container must exactly match the container's ID.

Validation Checklist

Before closing the ticket, verify:

  • ✅ Container exists before the script loads

  • ✅ data-container matches the container ID

  • ✅ Container uses position: relative;

  • ✅ Container has sufficient height (recommended minimum: 200px)

  • ✅ Widget renders in the expected location

Troubleshooting

Issue: Orb continues floating

Possible causes:

  • data-container missing

  • Container ID mismatch

  • Container not found

  • Missing position: relative

Resolution: Verify all four configuration items above.

Issue: Orb does not appear

Possible causes:

  • Container height is too small

  • Script failed to load

  • Incorrect container ID

  • JavaScript loaded before the container exists

Resolution:

  • Increase the container height.

  • Confirm the script loads successfully.

  • Verify the container exists before the script executes.

Support Response Template

By default, the Voice Orb is configured as a floating widget. If you'd like it embedded within a specific section of your website, you can use the data-container attribute on the Voice Orb script and point it to a container element with position: relative. This allows the orb to stay fixed within that section instead of floating across the page.

Escalation Criteria

Escalate to Engineering if:

  • The orb ignores a correctly configured data-container.

  • The orb renders outside the specified container despite following the documented setup.

  • The widget fails to render after verifying all configuration steps.

  • The customer reports inconsistent placement across supported browsers.

Expected Outcome

After following this SOP:

  • Floating Mode: The orb remains fixed on top of the page while users scroll.

  • Fixed Mode: The orb is embedded inside the specified container and remains within that section of the page.

Was this article helpful?