Instalación e inserción

Agrega una etiqueta script antes de </body> y la burbuja de HellouOne aparece en la página. A partir de ahí, cada opción se controla mediante un único objeto de configuración global.

1. Copia el snippet

Abre el panel de HellouOne, elige la bandeja de entrada que quieres insertar y abre la pestaña Configuración. El snippet que aparece ya incluye tu websiteToken — cópialo tal cual.

<!-- Pega esto justo antes de </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. Configura el widget

Define window.hellouOneSettings antes de que se cargue el SDK (encima del snippet, o en línea al principio de este). El SDK lee el objeto una sola vez durante run() y aplica los valores a la burbuja de chat.

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

Ajustes del panel y opciones del snippet

Casi todo el aspecto del lanzador — lado, ícono, texto, tema, distancia a los bordes, redondeo de las esquinas, lanzador oculto — se define por bandeja en el panel, en Ajustes → Bandejas de entrada → Constructor de Widget, y llega a cada widget instalado en su siguiente carga de página sin cambiar el código. Una opción que definas en hellouOneSettings tiene prioridad sobre el panel; lo que no definas sigue al panel.

Los códigos de inserción anteriores se generaban con position: 'right', type: 'standard' y launcherTitle: 'Chat with us' (o 'Chatea con nosotros') escritos. Esos valores exactos cuentan como no definidos, así que los snippets pegados antes del Constructor de Widget siguen al panel. Para fijar uno a propósito, usa cualquier otro valor — por ejemplo position: 'left'.

Opciones disponibles

3. Espera a que el SDK esté listo

La etiqueta script es asíncrona: el widget no está disponible en el instante en que se ejecuta el snippet. Si necesitas llamar a métodos al arrancar, escucha primero hellouone:ready.

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

Consulta Eventos del SDK para ver la lista completa, y Métodos del SDK para conocer la API en tiempo de ejecución que puedes llamar una vez que el widget esté activo.

Alcance de las cookies

El SDK guarda dos cookies en el navegador del visitante: cw_conversation (el token de autenticación de la conversación, 365 días) y cw_user_<websiteToken> (un hash del contenido de la llamada más reciente a setUser, que se usa para evitar llamadas de red redundantes). Ambas se definen con SameSite=Lax. Define baseDomain en tu configuración si quieres compartirlas entre subdominios.