How to Add a Video Bubble to Any Website (HTML)

How do you install CompleteGreet on HTML?

Adding a video bubble widget to a plain HTML site takes about five minutes and requires no build tools or package managers. The setup works on static sites, single, page apps, and anything that serves HTML directly.

Here is the exact sequence:

1. Create your account and dashboard: Sign up at CompleteGreet and land on the main dashboard. Look for the blue “New Widget” button in the top right corner and click it. The widget builder loads with a blank template and a video recorder button.
2. Record or upload your greeting: Click the recorder button to film directly in the browser, or upload an MP4 from your computer. The preview shows how the bubble will look on desktop and mobile. Keep it under 30 seconds for page speed.
3. Configure the appearance: Use the left sidebar to set bubble position (bottom right is the default), choose your brand color from the hex picker, and upload a profile photo. The avatar appears in the bubble before the video plays.
4. Set the call to action: Open the “Interactions” tab to add a button text (like “Book a Call” or “Get Pricing”) and link URL. You can also enable an email capture form that collects leads before showing the video.
5. Copy the install code: Click “Save & Get Code” at the top. A modal opens with a single script tag. Copy it and paste it just before the closing tag in your HTML file. The script loads asynchronously so it will not block your page render.

That is the entire process. The widget appears immediately on the next page load without any additional configuration.

If you are using a static site generator like Jekyll, Hugo, or Eleventy, paste the same script into your base template. For single, page applications built with React or Vue, the code works the same way because it attaches to the DOM after mount. No npm install required.

One detail most people miss: the script tag includes a data-widget-id attribute that ties your installation to your specific widget. If you create multiple widgets for different pages, each gets its own ID. The dashboard lets you duplicate widgets if you want the same greeting across several URLs.

Test your installation by opening the page in an incognito window. The bubble should appear in the corner within two seconds of the page loading. If it does not show, check your browser console for script errors and confirm the widget is set to “Active” in your dashboard.

What can you customize on HTML?

Almost everything on HTML sites works the same as on managed platforms, with one key difference: you control the page targeting through your own logic instead of a dashboard selector.

Page targeting on HTML is URL, based.

You can set the widget to appear only on specific paths by adding a simple data attribute to your embed code. Most teams use this to show different greetings on pricing pages versus blog posts. If your site runs on a single, page app, you will need to trigger the widget manually on route changes using the JavaScript API. This is the one place where HTML setups require a bit more work than dropping a Shopify app.

CTAs and forms

The call to action buttons inside the widget are fully editable. You can link them to Calendly, a Stripe checkout, or a simple mailto link. Most teams run two buttons: one for booking a call, one for watching a demo video.

Form fields are where the real customization happens.

You decide which fields to show: name, email, phone, or a custom question about budget or timeline. The form can appear before the video plays (to gate the content) or after (to capture warm leads). HTML sites can also pipe form data directly to your own endpoint instead of the default notification system, which is useful if you want leads to hit your internal CRM immediately.

Branding and position

The bubble color, size, and position are all adjustable through the dashboard. On HTML, you can also override these with CSS if you need the bubble to match a specific brand palette that does not exist in the preset options. The default placement is bottom right with a 24px offset from the edges, but high traffic product pages sometimes perform better with the bubble on the left where it does not compete with chat widgets. Most video bubble tools lock you into their branding on free plans. CompleteGreet removes the logo on all paid tiers.

One detail that trips up HTML installs: the z, index.

If your navigation bar or a modal popup has a high z, index, the video bubble can slide underneath it. You fix this by adding a CSS rule that sets the widget container to z, index: 9999. The widget script loads asynchronously, so this override needs to go in your main stylesheet, not inline with the embed code.

<script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script>

<body> <!-- Your page content --> <script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script>
</body>

See the static HTML data above for the full breakdown.

What should you check before going live?

Open your site in Chrome, Safari, and Firefox before you announce anything. The video bubble widget should sit in the bottom corner without overlapping your nav or footer buttons.

Mobile matters more.

Over half your visitors will see that widget on a phone. Load your site on iOS Safari and Android Chrome. The bubble should resize without forcing full screen video playback, and the close button needs to land where a thumb can actually reach it. If the widget covers your mobile menu or checkout button, adjust the position offset in your dashboard settings.

Verify the page targeting rules are working. Visit pages where the widget should not appear and confirm it stays hidden. Check that it only loads on URLs you specified in your targeting configuration.

Run a speed check with Google PageSpeed Insights after installing. Video assets add weight. If your LCP score drops, check two things: is the script loading asynchronously, and is the video file under 5MB? Both fixes take about 30 seconds in the dashboard.

Test your form submissions end to end. Fill out the contact form inside the widget, submit it, and confirm the lead hits your inbox or CRM. Broken forms kill trust faster than no form at all.

<script src="https://cdn.completegreet.com/widget.js" data-site-id="YOUR_ID" async></script>

Common questions

How do I add CompleteGreet to an HTML site without editing code files?

You cannot install CompleteGreet on HTML without editing code. The script must be pasted into your HTML. Most site builders and platforms have an HTML widget or custom code section where you can add the snippet without touching core files. Copy the embed code from CompleteGreet, open your site’s HTML editor or code injection area, and paste it before the closing tag. The bubble appears within minutes.

Where exactly should I paste the CompleteGreet script in my HTML?

Paste the CompleteGreet script just before the closing tag on every page where you want the bubble to appear. This placement ensures the rest of your page loads first. The script is lightweight and loads asynchronously, so it will not block other elements. If you only want the widget on certain pages, paste it only in those specific HTML files or use the dashboard targeting rules.

Why is my video bubble not showing in the HTML preview mode?

The bubble often hides in preview modes because of browser security rules or iframe sandboxing. Check your live site instead of the builder preview. Some HTML editors strip JavaScript for security, which blocks the widget from rendering. Publish the page and view it in a normal browser tab. If it still does not appear, verify the script is not inside a comment block or wrapped in tags that prevent execution.

Can I show CompleteGreet only on specific HTML pages like my pricing page?

Yes. Add the script only to the HTML files where you want the bubble to appear. Leave it off your homepage or other pages by simply not pasting it there. Alternatively, paste the script site, wide and use the CompleteGreet dashboard to set URL rules that show or hide the widget based on page path. This works for static HTML sites and gives you control without editing code repeatedly.

Does CompleteGreet slow down an HTML site?

No. The script loads asynchronously and defers until after your page content renders. Most HTML pages see no measurable speed impact. The video files load on demand only when a visitor clicks or hovers. Page speed tools like Google PageSpeed Insights typically show zero effect from the CompleteGreet embed. For extra caution, place the script at the bottom of your HTML body.

How do I test the video bubble on mobile for my HTML site?

Open your published HTML page on an actual phone or use Chrome DevTools device mode. The bubble auto, adjusts for mobile screens and positions itself in the corner without overlapping content. Tap the bubble to test the video playback and form submission. Check that the close button is easy to tap and that the widget does not cover critical page elements like checkout buttons or navigation menus.

How much does CompleteGreet cost per month?

CompleteGreet starts at $29/month when billed yearly for up to 5,000 unique visitors with no overage fees. Higher plans accommodate more traffic at flat rates. Unlike tools that charge per video minute or interaction, the price stays predictable regardless of how many times visitors replay your greeting or submit forms. All plans include unlimited videos and widget customizations.