Demo del widget de tickets

Esta pagina simula un sitio cualquiera que integra el widget de las formas soportadas. Para armar el tuyo, con tu logo y tu color, esta el configurador.

Abajo a la derecha aparece la burbuja flotante. Mas abajo, el mismo widget incrustado en la pagina.

1. Burbuja flotante

Una sola linea al final del <body>:

<script src="https://soporte.tuempresa.com/widget.js" defer></script>

2. Incrustado en la pagina

<div id="soporte"></div>
<script src="https://soporte.tuempresa.com/widget.js"
        data-mode="inline"
        data-target="#soporte"
        data-height="620"
        defer></script>

3. Mismo widget, tema oscuro

El anfitrion elige el tema con data-theme. El default es light: el widget vive en un iframe y no puede saber como es la pagina que lo contiene, asi que seguir la preferencia del sistema haria que apareciera oscuro sobre sitios claros.

<script src="https://soporte.tuempresa.com/widget.js"
        data-mode="inline" data-target="#soporte-dark"
        data-theme="dark" defer></script>

4. Adaptado a los estilos del sitio

El bloque de abajo tiene tipografia, color de marca y esquinas propias. El loader los lee de la pagina y se los pasa al widget, que se pinta igual.

<script src="https://soporte.tuempresa.com/widget.js"
        data-mode="inline" data-target="#soporte-marca"
        data-inherit="full" defer></script>

Acme Corp

Asi se ve el resto de este sitio ficticio.

Atributos disponibles

data-mode      "button" (default) | "inline"
data-target    selector CSS del contenedor (modo inline)
data-label     texto del boton flotante        (default "Soporte")
data-color     color de acento                 (default #2563eb)
data-position  "right" | "left"                (default right)
data-theme     fuerza el tema: "light" | "dark"
data-inherit   "auto" (default) tipografia, acento y claro/oscuro del sitio
               "full"  ademas fondos, texto y radio de esquinas
               "off"   el widget conserva su propio aspecto
data-view      "create" abre directo el alta de ticket
data-height    alto inicial del modo inline    (default 560)