Install with the HTML snippet

Exact attributes of the Hubbo embed script tag, where to place it and how to load it from JavaScript instead.

The HTML snippet is the canonical way to install Hubbo. It works on static sites, CMS themes, server-rendered templates and any framework that lets you edit the HTML shell.

The snippet

<script src="https://api.hubbo.io/embed?key=ACCOUNT_KEY" id="hubbo-embed-script" async type="module" crossorigin="use-credentials"></script>

Attribute reference

Attribute	Value	Why it is required
src	https://api.hubbo.io/embed?key=ACCOUNT_KEY	Serves the embed bundle and sets the project key cookie.
id	hubbo-embed-script	The widget reads its own query parameters (such as key) from the element with this id. Do not rename it.
async	(boolean)	Loads the script without blocking page rendering.
type	module	The bundle is delivered as an ES module.
crossorigin	use-credentials	Lets the browser send and receive the cookies Hubbo needs for the key and for page-view sessions.

Where to put it

At the end of <head>, or anywhere in <body>, both work.
Once per page. Do not include the snippet twice, and do not include it inside iframes you do not own.
On every page where you want widgets. Which pages show NPS or a survey is controlled by URL rules in the admin app, not by where the snippet is. Notifications are not URL-targeted: they appear wherever the snippet is installed.

Loading the script from JavaScript

If your tooling does not let you edit HTML, create the script element yourself. Set the same attributes, including the id:

const script = document.createElement('script');
script.src = 'https://api.hubbo.io/embed?key=ACCOUNT_KEY';
script.type = 'module';
script.async = true;
script.crossOrigin = 'use-credentials';
script.id = 'hubbo-embed-script';

document.body.appendChild(script);

No init() — optional page API

There is no Hubbo.init() and no full widget SDK. You install the script and configure content in the admin app. After login you may call window.hubbo.identify() so Targeting can gate on Logged in / Logged out, and window.hubbo.setLang() so translations follow your product locale — see Identify visitors and Set visitor language.

Presentation queue, stacking and overlays on your page

Hubbo widgets are mounted in a fixed, full-viewport host with a very high z-index. Auto-shown surfaces (popup, survey, NPS, toast) use a mutual-exclusion queue — only one of those shows at a time (priority: popup → survey → NPS → toast), with a short leave animation before the next enters. The bell, tooltip and top bar stay outside that queue. A modal, cookie banner or menu on your own page that uses a higher z-index can still cover Hubbo, so lower it or test with it open.

The top bar spans nearly the full viewport with a 5px gap from the top and sides. If you have a sticky or fixed header, offset it with the CSS variable Hubbo sets on the root element while a top bar is visible (distance from the top of the viewport to the bottom of the bar; 0px when there is none):

.site-header {
  position: sticky;
  top: var(--hubbo_topBarsHeight, 0px);
}

Content Security Policy

If your site sends a Content-Security-Policy header, allow the Hubbo hosts you use. At a minimum the script and API calls go to https://api.hubbo.io, and realtime updates use a secure WebSocket to wss://api.hubbo.io/graphql. Roadmap and status iframes load from https://app.hubbo.io.

script-src  https://api.hubbo.io;
connect-src https://api.hubbo.io wss://api.hubbo.io;
frame-src   https://app.hubbo.io;

Merge these values into your existing directives rather than replacing them.