Our Whitelabel Obsession

I use several screen recording software, and the most used one is usebubbles.com. I include bubbles on this site. I purchased two accounts on a deal a while ago and have been using it ever since. It just works.

It has replaced loom for me, and just like with loom, I am not at all worried by the fact it’s not “WHITELABELED”. I do have access to a Komodo, Zight and other such software that can be whitelabeled, but I am not trying to pretend I have my own of everything.

This white label CNAME obsession is real, and I can understand it, but ultimately, I am not trying to convince anyone I own or created bubbles. I use it because it works, and that’s enough for me. Reliable tools are what matter. Look at the big brand using SurveyMonkey or Typeform; it’s not on their radar.

Curiosity

That said, tonight, curiosity got the better of me. Could I brand the domain of a service like Bubbles without that CNAME ability?

So I immediately thought that I needed an NGINX proxy, I have a dozen or so servers with Gridpane, and although it doesn’t offer non-WordPress sites, this should be achievable there, and after reading the docs and having a play, I took the following steps

Create a Site in GridPane

Point its DNS A-record at my server’s IP.

In the GridPane dashboard, go to Sites → Add Site →

Set the Site Domain to Yoursite.com.

Make sure to enable SSL etc

Once installed and setup comment out the -php config

We only want to sue this for a proxy, no PHP, and as such, we need to comment out or delete the content of /etc/nginx/common/yoursite.com-php.conf

I then moved all the WordPress files into a directory too to be safe.

Add a new Conf

Add a new conf to your site’s nginx folder, i.e /var/www/yoursite.com/nginx/custom-proxy-main-context.conf

Then add the following code,

# proxy_mydomain.conf

server {
  listen 80;
  server_name mydomain.com;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl http2;
  server_name mydomain.com;

  ssl_certificate     /etc/letsencrypt/live/mydomain.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;

  # this block now OWNS / entirely
  location / {
    proxy_pass         https://app.usebubbles.com$request_uri;
    proxy_set_header   Host              app.usebubbles.com;
    proxy_set_header   X-Real-IP         $remote_addr;
    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade           $http_upgrade;
    proxy_set_header   Connection        "upgrade";
    proxy_buffering    off;
    proxy_cookie_domain  app.usebubbles.com  mydomain.com;
  }
}

then I ran the following to make sure I’d commented out and cleared my item correctly

nginx -T | grep custom-proxy-main-context.conf

gp nginx reload

I had a successful reload of nginx and watched a link. Here is the original bubble, and here is my proxied

So that all worked, I thought about copying links from bubbles with my custom masked domain. So, as I already have a shedload of tapermonkey scripts, that’s what I settled on as a method.

The finished article was achieved with the following code

// ==UserScript==
// @name         Bubbles ➞ TechArticles Copy Button
// @namespace    https://video.techarticles.co.uk/
// @version      1.1
// @description  Adds a “Copy TechArticles URL” button to Bubbles share pages.
// @match        https://app.usebubbles.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';

  // Only run on share pages (optional filter)
  if (!/\/[A-Za-z0-9_-]+\/[A-Za-z0-9_-]+/.test(location.pathname)) return;

  // Create the button
  const btn = document.createElement('button');
  btn.textContent = 'Copy TechArticles URL';
  Object.assign(btn.style, {
    position: 'fixed',
    bottom: '20px',
    right: '20px',
    padding: '10px 15px',
    'background-color': '#0073e6',
    color: '#fff',
    border: 'none',
    'border-radius': '5px',
    cursor: 'pointer',
    'z-index': 10000
  });

  btn.addEventListener('click', () => {
    const newUrl = location.href.replace(
      /^https:\/\/app\.usebubbles\.com/,
      'https://yourdomain.com'
    );
    navigator.clipboard.writeText(newUrl)
      .then(() => {
        btn.textContent = '✔︎ Copied!';
        setTimeout(() => btn.textContent = 'Copy TechArticles URL', 1500);
      })
      .catch(err => {
        console.error(err);
        btn.textContent = 'Copy Failed';
        setTimeout(() => btn.textContent = 'Copy TechArticles URL', 1500);
      });
  });

  document.body.appendChild(btn);
})();

It adds a little button below to copy a personalised link.

So, in short, it is possible. I’ve proved that I have a little bit more work to do on this for testing purposes. I want to build a test cloud panel and Docker server, and I think this would be a useful project for that. I will likely add a new tutorial, as it’s more accessible and free than the grid pane method above.

Now, I don’t think I will use this in production much, if at all. For this software, in the way I use it, I don’t see the benefit, but it was well worth the experiment to see if I could do it.