Referencia de la API del SDK web

Esta página contiene los métodos de la API del SDK web.

Inicializa el SDK web

Usa el siguiente código para inicializar el SDK web:

    const ujet = new UJET({
      companyId: '',
      // ...
    })

Nota: Solo puedes inicializar una instancia del SDK web por página web.

Opciones

En esta sección, se incluyen las opciones que puedes pasar cuando inicializas el SDK web.

companyId

Obligatorio

Para recuperar companyId del portal de CCAI Platform, sigue estos pasos:

1. Accede al portal de CCAI Platform con una cuenta de administrador.

2. Ve a Configuración > Configuración del desarrollador.

3. Copia la clave de la empresa.

   new UJET({
     companyId: '{​ COMPANY KEY }​',
   })
   

tenant

Recomendado

El tenant es el subdominio de tu instancia de Contact Center AI Platform (CCAI Platform), también conocido como tu entorno. Por ejemplo, si el portal de CCAI Platform es https://acme.ccaiplatform.com/, entonces acme es el tenant. Consulta el siguiente ejemplo:

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

host

Optional

host es el extremo de API que usa el SDK web. Si configuraste tenant, no es necesario configurar host.

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

Si configuraste tenant y no host, el SDK web configurará el valor host según tenant. Consulta el siguiente ejemplo:

https://{tenant}.api.ccaiplatform.com

authenticate

Optional

authenticate es una función que muestra un token JWT con una promesa. Consulta el siguiente ejemplo:

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

La autenticación es obligatoria en el SDK web, pero la opción authenticate es opcional. Puedes llamar a ujet.authenticate en el evento created:

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

lang

Optional

El idioma predeterminado para el usuario final. Consulta el siguiente ejemplo:

new UJET({
  // ...
  lang: 'ja',
})

user

Optional

Consulta el siguiente ejemplo:

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

launcher

Optional

La opción launcher puede ser false o un objeto. Consulta las siguientes opciones de launcher:

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

Para inhabilitar el selector predeterminado de CCAI Platform, puedes configurar esta opción como false. Consulta el siguiente ejemplo:

const ujet = new UJET({
  companyId: '...',
  launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
  ujet.open()
})

Como alternativa, puedes personalizar nuestro selector integrado. Consulta el siguiente ejemplo:

new UJET({
  companyId: '...',
  launcher: {
    // cssText: 'body{color:red}',
    // chatIcon: 'https://example.com/logo.svg',
    // closeIcon: 'https://example.com/static/close.svg',
    // right: '50px',
    // bottom: '50px',
    style: {
      '--icon-color': '#FFF',
      '--background-color': '#F1684A',
    }
  },
})

logo

Recomendado

La URL del logotipo de tu empresa. Consulta el siguiente ejemplo:

new UJET({
  logo: 'https://example.com/logo.svg',
})

style

Optional

Usa la opción style para personalizar el widget del SDK web. Consulta el siguiente ejemplo:

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

customData

Optional

Se pueden enviar datos personalizados con un chat cuando se inicia. Consulta el siguiente ejemplo:

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

disableAttachment

Optional

Si disableAttachment se establece en true, el SDK web no permitirá que el usuario final suba fotos, videos ni otros archivos adjuntos en los chats. Consulta el siguiente ejemplo:

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

right

Optional

Posiciona el widget a la derecha, no el selector. Ajusta este valor según launcher.right. Consulta el siguiente ejemplo:

new UJET({
  right: '50px',
})

bottom

Optional

Posiciona el widget debajo, no el selector. Ajusta este valor según launcher.bottom. Consulta el siguiente ejemplo:

new UJET({
  bottom: '150px',
})

translation

Optional

Usa la capacidad de traducción del SDK web. Consulta el siguiente ejemplo:

new UJET({
  translation: {
    "en": {
      "ujet_start_title": "English!",
      "ujet_greeting": "Hi there!"
    },
    "es": {
      "ujet_start_title": "¡Español!",
      "ujet_greeting": "¡Hola!"
    },
    "fr": {
      "ujet_start_title": "Français!",
      "ujet_greeting": "Salut!"
    },
    "de": {
      "ujet_start_title": "Deutsche!",
      "ujet_greeting": "Hallo!"
    },
    "ja": {
      "ujet_start_title": "日本語！",
      "ujet_greeting": "こんにちは！"
    }
  }
})

Métodos

En esta sección, se incluyen los métodos del objeto UJET:

.on(event, callback)

Ejecuta la callback cuando reciba el event determinado:

ujet.on('ready', function() {
  console.log('widget is ready')
})

Encuentra todos los eventos en la documentación de eventos.

.off(event, callback)

Quita la callback determinada de los objetos de escucha de eventos.

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

.authenticate(authData)

Envía el valor token al widget. Por lo general, se llama a este método en el evento created:

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

.authenticate(authFunction)

También puedes pasar una función al método .authenticate. Esta función debe mostrar una promise del token:

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

.start({ menuKey, ticketId })

El widget se inicia cuando el usuario final hace clic en el selector, pero también se puede iniciar con el siguiente código:

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

Si .start tiene una menuKey, el widget va directamente a esa cola.

.open()

.open es similar a .start, pero no aceptará ningún parámetro.

setTimeout(function() {
  ujet.open()
}, 10000)

.close()

Minimiza el widget de forma programática:

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

.destroy()

Destruye el SDK web. Es decir, quítalo de la página web actual.

.registerHook(event, fn)

El event en .registerHook es diferente del de .on. Por lo general, esta función se usa cuando quieres usar tu propio selector:

// <button id="launcher">Click to open</button>

const ujet = new UJET({
  // ...
  launcher: false,
})

const launcher = document.getElementById('launcher')
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close()
  } else {
    ujet.open()
  }
});

ujet.registerHook('loading', function () {
  launcher.textContent = 'loading'
})

ujet.registerHook('open', function () {
  launcher.textContent = 'Click to close'
})

ujet.registerHook('close', function () {
  launcher.textContent = 'Click to open'
})

Traducción

Esta es una lista de claves disponibles para personalizar la traducción:

• ujet_start_title

• ujet_greeting