Floating Bubble Layout & Device-Specific Sizes

1. Bubble Layout Settings Overview #

Under Davix AI Engine → Chatbot → General/Style, you’ll find bubble-related options:

• bubble_color
• bubble_logo_url
• bubble_logo_size
• bubble_side
• bubble_size
• bubble_offset_bottom
• bubble_offset_side
• bubble_width_desktop, bubble_height_desktop
• bubble_width_tablet, bubble_height_tablet
• bubble_width_mobile, bubble_height_mobile

image IMAGE PLACEHOLDER: Screenshot of Chatbot settings showing bubble side, bubble size, offsets, and device-specific width/height fields. IMAGE image

2. Choosing Bubble Side (Left or Right) #

Option: bubble_side

• Controls whether the bubble appears on the left or right side of the screen.

Step-by-step:

1. Locate the Bubble Side option.
2. Choose between “left” or “right”.
3. Save changes.
4. Go to the front-end and scroll to see which corner the bubble appears in.

3. Setting Bubble Size #

Options: bubble_size, bubble_logo_size

• bubble_size controls the overall bubble dimension.
• bubble_logo_size controls the icon/logo size inside the bubble.

Step-by-step:

1. Find Bubble Size and Bubble Logo Size fields.
2. Enter numeric values (e.g., pixel values as used in your defaults).
3. Save changes.
4. Open the front-end and check the bubble’s appearance.

4. Controlling Bubble Offsets #

Options: bubble_offset_bottom, bubble_offset_side

• bubble_offset_bottom – how far the bubble is from the bottom of the screen.
• bubble_offset_side – distance from the left or right edge (depending on bubble_side).

Step-by-step:

1. Locate Offset from Bottom (bubble_offset_bottom).
2. Set a value that keeps the bubble above any fixed footer bars.
3. Locate Side Offset (bubble_offset_side).
4. Set a value that keeps the bubble away from the screen edge or overlapping UI.
5. Save and test on a few pages.

5. Device-Specific Bubble Width and Height #

Options:

• bubble_width_desktop, bubble_height_desktop
• bubble_width_tablet, bubble_height_tablet
• bubble_width_mobile, bubble_height_mobile

These allow you to adapt the bubble and popup size for different device types.

Step-by-step:

1. In Chatbot settings, locate the Desktop width/height fields.
2. Set sizes (in px/vw) appropriate for larger screens.
3. Repeat for:
   • Tablet width/height.
   • Mobile width/height.
4. Save changes.
5. Use your browser’s device preview (or real devices) to confirm sizes look correct.

The documentation also suggests:

“Keep bubble size minimal on mobile (use separate width/height options for each device).”

image IMAGE PLACEHOLDER: Screenshot of bubble on mobile, showing a smaller, unobtrusive circle in the corner. IMAGE image