Applicable for: All website administrators and users
Customizing the chat bubble ensures your AI assistant blends seamlessly with your website's design without blocking important content. You can adjust the widget's screen position, set precise margin distances, configure automatic opening times to proactively engage visitors, and remove platform branding based on your subscription.
Choosing the Chat Bubble Position
The chat bubble is the floating button that website visitors click to open or close the chat widget. Its position on the page is controlled by the "Chat bubble position" setting on the Display Settings page.
You can select from two position options in the dropdown menu:
Bottom Right: The bubble and widget appear in the bottom-right corner of the screen. This is the default position.
Bottom Left: The bubble and widget appear in the bottom-left corner of the screen.
This alignment setting controls the placement of the floating bubble button, the open chat widget window, the message preview popup, the conversation starters popup, and the greeting preview that appears before the widget is opened. The live preview on the Display Settings page will immediately reflect your selected position by aligning the preview widget to the left or right side of the preview area.
Please note that on mobile devices, the widget takes up the full screen width when opened, regardless of the position setting. The position setting primarily affects where the collapsed bubble button appears on a mobile screen.
Adjusting Horizontal and Vertical Margins
To prevent the chat bubble from overlapping with other elements on your site, you can fine-tune its exact placement using margin controls. These controls are located below the position dropdown and are restricted to users with admin role access.
You can adjust two margin settings to move the widget:
Move left / right: This horizontal margin controls the distance in pixels from the side of the screen (either the right or left edge, depending on your chosen position). The default value is 12 pixels.
Move top / bottom: This vertical margin controls the distance in pixels from the bottom of the screen. The default value is 12 pixels.
These margin values affect the position of the closed chat bubble button and the iframe container that holds the widget on your page. Internally, the widget automatically subtracts a 12-pixel padding from your configured margins to accommodate the built-in animation and scaling padding of the bubble button.
When adjusting margins, each input field displays a "px" unit label. Hovering over the input reveals increment (+) and decrement (-) buttons, allowing you to easily adjust the value by 1 pixel at a time.
Margin Validation Rules
Rule Type | Details |
Format | Both values must be whole numbers (integers). Empty values are not allowed. |
Range constraints | The minimum value is 1 pixel, and the maximum value is 150 pixels. |
Error Handling | If a value falls outside the allowed range, an error message will display: "Enter a value between 1 and 150 px". |
Benefits
Ensure the chat widget does not hide important website content or CTAs by carefully configuring its position and margin offsets.