Is it normal on a paid plan to have a bubble banner?

Hello community! I’m bulding my app on a paid (personal) subscription and when I’m running my web and I press F12 on my browser to check for responsiveness or some other debugging purpose, I see this banner which makes me fall in a doubt. Is it correct that I have a “bubble banner” in my website?

I think something is wrong with my app so this banner shouldnt be there as I’m paying.

Maybe somebody can check if it happens in another app or share your experience or thought about this.

Thanks in advance.
Pedro

1 Like

Is the banner visible on the page? Or just in the console?

The console message will appear until you’re on a dedicated Bubble plan. One method I’ve used to counteract this is to create my own that sits atop the Bubble message:

<script>
  var styles = [
    'background: linear-gradient(#333333, #222222)'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.33)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 60px'
    , 'text-align: center'
    , 'font-weight: bold'
    , 'padding: 20px'
    , 'border-radius: 5px'
].join(';');

console.log('%cYOUR MESSAGE HERE', styles);
</script>

Place this script in Settings -> SEO & Metatags -> Advanced Settings -> Script/meta tags in header. Styling is all up to you, if you don’t know CSS it is fairly straightforward as far as what is editable. You could remove the text-shadow, box-shadow and border-radius, for instance, without screwing up the display of it. The background can be a solid color by changing ‘background: linear-gradient(#333333, #222222)’ to ‘background: [color code]’

1 Like

This was the solution for me :wink:

1 Like

Interesting, is that now available on other plans? It was one very minor benefit at the time I upgraded to dedicated, very awesome if it’s available to more people now :smile:

2 Likes