The Floating Orb is designed to be the fastest, smoothest, and most customizable way to add your AI voice assistant directly to any page—without the limitations of iframes.
By embedding the Orb natively on your webpage, your assistant runs more efficiently, loads quicker, and integrates seamlessly with your site’s UI and branding.
Some 3rd party website builders Specifically Wix, do not allow for the standar iframe widget that is provided in the “widget” menu
The below HTML code uses HTML instead of an iframe and makes it easier for developers and marketers alike to:
Customize the orb’s appearance and behavior.
Link it to specific GoHighLevel locations and assistants.
Enhance the user experience with native browser performance.
Drive more conversations, conversions, and engagement.
Enhanced capability for 3rd party website builders like Wix
Floating Orb:
The OG floating orb is back as a page element instead of an iframe, this allows your orb to run cleaner, faster and in the browser better than ever.
Install Guide:
Copy the code and put it in a sheet or element where you can edit it.
Fill in your assistant ID and your GoHighLevel location ID for your assistant and oauth to populate.
Configure the inputs and settings as you please.
Copy the code and paste it in a javascript / html element on the page OR in the page header.
You’re ready to go!
Copy Code:
Make sure to fill in your assistant ID and your GHL location ID for oauth access and your assistant to populate correctly.
<div id="voice-orb-container" style="width: 100%; height: 200px; position: relative;">
<script src="https://botdisplay.com/orb.js"
data-color="#DBE9FC"
data-icon="heart"
data-assistant-id="YOURASSISTANTID"
data-account-id="YOURGHLLOCATIONID"
data-position="bottom-left"
data-diameter="86"
data-show-prompt="true"
data-prompt-message="Speak with us"
data-theme="dark" data-sound-on="false"
data-container="voice-orb-container"></script>
</div>
Inputs & Options:
data-color: The hex code of your choice that is responsible for the color of the widget.
data-icon: The awesome font icon to use with the widget.
data-account-id: Your GoHighLevel Location ID where the assistant is from
data-diameter: How large the orb is.
data-position: The position on the screen.
Choices (all lowercase):
bottom-right
bottom-left
top-right
top-left
center
data-theme: Dark or light theme.
Choices (all lowercase):
light
Dark
data-show-prompt: true or false to show the message above the widget button on idle
Choices (all lowercase):
true
false
data-prompt-message: The message in the prompt popup (if visible)
data-sound-on: The new orb plays a beep sound on start and stop for better UX UI. You can turn it off or on with this settings.
Choices (all lowercase):
True
false
Q: What is the Floating Orb?
A: It’s a lightweight, embedded widget that brings your AI voice assistant to life on your website—without needing clunky iframes. Think of it as a floating, voice-powered call-to-action.
Q: Why should I use this version instead of an iframe?
A: The iframe version can be slower, isolated, and harder to style. This native version is faster, more responsive, and fully customizable with direct DOM access.
Q: Where do I get my assistant-id and account-id?
A: Your assistant-id is found in your assistant builder dashboard. Your account-id is your GoHighLevel Location ID. You’ll need both to connect the assistant to your site.
Q: Where should I paste the code?
A: You can place it in any JavaScript or HTML block on your page. Ideally, put it in the <head> for site-wide functionality or inside a section element for page-specific behavior.
Q: What does data-show-prompt do?
A: It toggles whether a message (like “Speak with us”) appears above the orb while idle. Set it to true for increased engagement, or false for a cleaner UI.
Q: Can I change the icon or color to match my brand?
A: Yes! Use data-color for the widget color (hex format) and data-icon for any supported Font Awesome icon (like "microphone" or "headset").
Q: What if I want to change the orb’s position or size?
A: Use the data-position (e.g., bottom-left) and data-diameter (e.g., 86) fields to customize layout and placement. This makes it easy to align with your design.
Q: What does data-sound-on control?
A: It enables a subtle sound when the assistant starts or stops listening. This gives users better feedback during interaction. Set it to true or false depending on your preference.
Q: Does the orb work on mobile devices?
A: Yes, the orb is fully responsive and works on both desktop and mobile browsers.
Q: Can I run multiple orbs on one page?
A: Technically yes, although not recommended to avoid conflicts or unexpected behavior.