Setting Up the Video Bubble Widget

How the Video Bubble Works

The widget appears as a circular video bubble in the corner of your website. The video plays automatically (muted) as visitors browse, catching their attention. When they click:

1. The video expands and plays with sound

2. After the video, visitors can start a voice or chat conversation

3. Your AI agent takes over from there

On mobile devices, the video opens in full screen for an immersive experience.

Record Your Video

The most important part of the video bubble is the video itself. Here are guidelines for recording an effective greeting:

Keep It Short

Aim for 15 to 30 seconds. This is a greeting, not a presentation. You want to welcome visitors and invite them to engage, not deliver a pitch.

What to Say

A simple, friendly greeting works best:

• Introduce yourself and your business briefly

• Acknowledge why they might be visiting

• Invite them to ask questions or book with your AI assistant

Example script: "Hi, I'm Sarah from Bright Nest Cleaning. Thanks for visiting! If you have questions about our services or want to schedule a cleaning, just click to chat with our assistant. We are here to help you get the sparkling home you deserve."

Technical Quality

• Lighting: Face a window or use soft front lighting. Avoid backlighting

• Audio: Record in a quiet space. Built in microphones on modern phones work well

• Framing: Center yourself with your face in the upper third. The bubble crops to a circle, so leave some margin

• Background: Simple and professional. Your office, a clean wall, or a branded backdrop

Tip: Record on your smartphone in landscape mode. Modern phones have excellent cameras, and a natural smartphone video feels authentic and approachable.

Video Specifications

Recommended Settings

FormatMP4 (H.264)

Resolution1080p or 720p

Aspect Ratio1:1 (square) or 9:16 (vertical)

Duration15 to 45 seconds

File SizeUnder 50 MB

Square (1:1) videos work best for the bubble format. If you record in landscape, you can crop to square before uploading.

Upload and Configure

1. Log in to your Hello Gubby dashboard at app.hellogubby.ai

2. Navigate to Widgets in the sidebar

3. Select Video Bubble

4. Click Upload Video and select your file

5. Wait for the upload and processing to complete

6. Preview how it looks in the bubble format

7. Configure additional settings (see below)

8. Click Save

Customize Your Video Bubble

Appearance

• Bubble size: Standard or large

• Position: Bottom right or bottom left

• Border color: Match your brand or add a highlight color

• Animation: Subtle pulse or bounce to draw attention

Playback

• Autoplay: Video loops silently in the bubble

• Play on hover: Video plays when visitors hover over it

• Start time: Skip to a specific point in the video

After Video

• Transition to voice: Open voice widget after video

• Transition to chat: Open chat widget after video

• Let visitor choose: Show options for voice or chat

Install the Widget

Once your video is uploaded and configured, get your embed code:

1. Click Get Embed Code in your video bubble settings

2. Copy the code snippet

<script src="https://widget.hellogubby.ai/v1/video.js" 
  data-widget-id="wgt_your_unique_id">
</script>

<script src="https://widget.hellogubby.ai/v1/video.js" 
  data-widget-id="wgt_your_unique_id">
</script>

<script src="https://widget.hellogubby.ai/v1/video.js" 
  data-widget-id="wgt_your_unique_id">
</script>

Install the code on your website the same way as the voice or chat widget. Paste it before the closing </body> tag using your platform's code injection feature.

See the Voice Widget Setup guide for platform specific instructions (WordPress, Squarespace, Wix, Shopify, Webflow, Framer).

A/B Testing Your Video

Not sure which video performs best? Hello Gubby supports A/B testing:

1. Upload multiple video variants

2. Set the percentage split (50/50, 70/30, etc.)

3. Let the system randomly show different videos to different visitors

4. Review engagement metrics to see which video converts better

Try testing different approaches: formal vs casual, different team members, different messages. Small changes can significantly impact engagement.

Best Practices

Be Yourself

The video bubble works because it is personal. Do not read from a script word for word. Speak naturally like you would to a customer who walked into your office.

Smile and Make Eye Contact

Look at the camera lens, not the screen. This creates the feeling that you are looking directly at the visitor.

Update Seasonally

Consider recording new videos for holidays, special promotions, or seasonal services. A fresh video shows your business is active and engaged.

Match Your Brand

If your business is casual and friendly, let that show. If you serve professional clients, keep the tone polished. The video should feel like an extension of your brand.

Success story: Businesses using video bubbles often see higher engagement rates than voice or chat alone. The personal touch builds trust before the conversation starts.

Troubleshooting

Video does not play

• Ensure the video file is under 50 MB

• Check that the format is MP4 with H.264 encoding

• Some browsers block autoplay with sound. The bubble plays muted by default for this reason

Video looks cropped wrong

• Record with your face centered and in the upper portion of the frame

• Square (1:1) aspect ratio works best

• Use the preview tool in the dashboard to check before publishing

Video bubble not appearing

• Verify your embed code is installed correctly

• Clear your browser cache

• Check that video upload completed successfully in the dashboard

Next Steps

With your video bubble live, visitors get a personal welcome before engaging with your AI agent. This combination of human warmth and AI efficiency creates an experience that stands out.

Consider:

• Testing different video messages to optimize engagement

• Adding voice and chat widgets for visitors who prefer other channels

• Reviewing analytics to see how video affects conversion rates