Setup & embed

Add one script tag before </body> and the HellouOne bubble appears on the page. From there, every option is controlled through a single global config object.

1. Grab the snippet

Open the HellouOne dashboard, pick the inbox you want to embed, and open the Configuration tab. The snippet that appears already includes your websiteToken — copy it as-is.

<!-- Paste this just before </body> -->
<script>
  (function(d,t) {
    var BASE_URL="https://one.hellou.ai";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.hellouOne.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      });
    }
  })(document,"script");
</script>

2. Configure the widget

Set window.hellouOneSettings before the SDK loads (above the snippet, or inline at the top of it). The SDK reads the object once during run() and applies the values to the chat bubble.

<script>
  window.hellouOneSettings = {
    position: 'right',
    type: 'expanded_bubble',
    launcherTitle: 'Chat with us',
    darkMode: 'auto',
    useBrowserLanguage: true
  };
</script>

Dashboard settings and snippet options

Most of the launcher’s look — side, icon, text, theme, distance from the edges, corner radius, hidden launcher — is set per inbox in the dashboard under Settings → Inboxes → Widget Builder, and reaches every installed widget on its next page load with no code change. An option you set in hellouOneSettings takes precedence over the dashboard; anything you leave out follows it.

Older embed codes were generated with position: 'right', type: 'standard' and launcherTitle: 'Chat with us' (or 'Chatea con nosotros') written in. Those exact values count as not set, so snippets pasted before the Widget Builder still follow the dashboard. To pin one of them on purpose, set any other value — for example position: 'left'.

Available options

3. Wait for the SDK to be ready

The script tag is asynchronous: the widget is not available the instant the snippet runs. If you need to call methods at boot, listen for hellouone:ready first.

window.addEventListener('hellouone:ready', function () {
  window.$hellouOne.toggle('open');
});

See SDK events for the full list, and SDK methods for the runtime API you can call once the widget is up.

Cookie scope

The SDK stores two cookies on the visitor’s browser: cw_conversation (the conversation auth token, 365 days) and cw_user_<websiteToken> (a hash of the most recent setUser payload, used to skip redundant network calls). Both are set SameSite=Lax. Set baseDomain in your settings if you want them shared across subdomains.