Archivos que contiene el demo funcional de Biky, con el Método Tesseract
En el archivo comprimido Biky.zip encontrarás los archivos necesarios dentro de un demo funcional, los cuales se detallan a continuación:
Implementar Método Tesseract en tu propia página web
- index.html: No es necesario que lo incluyas en tu página web, sin embargo, dentro de este archivo encuentras el fragmento de código que deberás incluir en el footer de tu website, donde se incluyen las librerías necesarias para su funcionamiento. El código requerido es similar al que encuentras a continuación:
<!-- BIKY FORMS - MANDATORY SCRIPTS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js"></script> <script src="http://storage.keybeapi.com/keybejs/v6/keybe.js"></script> <script src="assets/biky/bikywgform.js"></script> <!-- END BIKY FORMS - MANDATORY SCRIPTS -->- assets: Dentro de este directorio, encuentras un sub folder de nombre assets/biky dentro de ella encontrarás:
- Directorio con imágenes de Biky para usar con el demo
- Archivo bikywgform.css para ajustar los colores del formulario acorde con tu marca
- Archivo bikywgform.js con las funcionalidades del script. En este archivo deberás editarlo con los datos de conexion de tu marca en Keybe.
Editar los settings del script
Antes de usar el script con el Método Tesseract, bien sea en la version del demo, o ya en la implementación en tu página web, debemos agregar los datos requeridos para su funcionamiento. A continuación se detallan estos datos iniciales:
Para obtener algunos datos necesarios debemos usar cualquier aplicación para simular peticiones de API (Postman, Thunder Client, etc.). Usar los siguientes cURL según el caso, puedes ver más detalles en la documentación de la API de Keybe
- brandname: Deberas indicar el nombre de tu marca, manualmente
El apiKey y el appUUID los encuentras en settings > API Keys en tu Keybe App.
- apiKey: API Key de Keybe
- appUUID: Es el ID que encuestas junto con tu API Key
- App: El mismo valor de appUUID
- companyUUID: Para obtener este valor debemos ejecutar el siguiente cURL:
curl -X GET \ 'https://chat.keybeapi.com/config/all-channels/?appUUID=TU_APPUUID' \ --header 'Accept: */*' \ --header 'User-Agent: Thunder Client (https://www.thunderclient.com)' \ --header 'Authorization: Bearer TU_API_KEY'Luego de ejecutarla, debemos ubicar en la respuesta el valor de companyUUID
- funnel: Para obtener este valor debemos ejecutar el siguiente cURL
curl -X GET \ 'https://crm-funnel.keybeapi.com/TU_APPUUID/funnel' \ --header 'Accept: */*' \ --header 'User-Agent: Thunder Client (https://www.thunderclient.com)' \ --header 'Authorization: Bearer TU_API_KEY'Y tomar de allí el valor de “_id” como se muestra en la imagen
- step: Para obtener este valor debemos ejecutar el siguiente cURL
curl -X GET \ 'https://crm-funnel.keybeapi.com/TU_APPUUID/TU_FUNNEL_ID/steps' \ --header 'Accept: */*' \ --header 'User-Agent: Thunder Client (https://www.thunderclient.com)' \ --header 'Authorization: Bearer TU_API_KEY'Y tomar de alli el valor del primer “_id” como se muestra en la imagen que corresponde al STEP ID
Para obtener los datos relacionados a:
- templateID:
- templateMessage:
- mediaParams:
- userHost:
Debemos ejecutar el siguiente cURL
curl -X GET \ 'https://chat.keybeapi.com/template?appUUID=TU_APPUUID&userHost=%2BTU_NRO_WHATSAPP_KEYBE'&forceRefresh=1&all=1' \ --header 'Accept: */*' \ --header 'User-Agent: Thunder Client (https://www.thunderclient.com)' \ --header 'Authorization: Bearer TU_API_KEY'¿Dónde ubicar el TU_NRO_WHATSAPP_KEYBE?
Podemos ir a settings > templates (configuración > plantillas) y una vez allí nos encontraremos una pantalla similar a la que se muestra a continuación:
Settings cuando tenemos más de un número de WhatsApp agregado:
Si tenemos más de un numero de WhatsApp asociado debemos ubicarlo en el punto A y por consiguiente ubicar en el punto B el nombre que le dimos al template cuando se creó. Teniendo esto en cuenta, en el cURL de arriba indicar el TU_NRO_WHATSAPP_KEYBE y ejecutarlo.
Settings cuando solo tenemos un número de WhatsApp agregado:
En este caso, podemos ir a la sección settings > Channels (Configuración > Canales) una vez allí ubicamos el número de WhatsApp que tengamos agregado. Por consiguiente ubicar el nombre que le dimos al template cuando se creó. Teniendo esto en cuenta, en el cURL de arriba indicar el TU_NRO_WHATSAPP_KEYBE y ejecutarlo.
Una vez ejecutado el cURL revisaremos en la respuesta los datos que necesitamos. Ubicando en la respuesta el nombre del template con en el campo “customName” tomaremos a continuación los valores de los campos:
- templateID:
- templateMessage:
- userHost:
El valor de mediaParams podemos obtenerlo cuando creamos un template con header de imagen. Al momento de crear el template seleccionalos header de imagen, y luego cargarmos una imagen, cuando esta se ha cargado, se muestra en la vista previa a la derecha. En ese momento debemos hacer clic secundario sobre la imagen y copiamos el link de la imagen.
- Inbox: El valor predeterminado es “ventas” sin embargo pueda que quieras apuntarlo a un inbox (space) diferente debemos identificar el space donde queremos enviarlo. Para ello usaremos este cURL
curl -X GET \ 'https://chat.keybeapi.com/inbox?appUUID=TU_APPUUID' \ --header 'Accept: */*' \ --header 'User-Agent: Thunder Client (https://www.thunderclient.com)' \ --header 'Authorization: Bearer TU_API_KEY'En al respuesta ubicaremos en valor de “key” que es el que usaremos si queremos cambiar el inbox que debe recibir los chats
Así de sencillo puedes configurar un formulario en tu página web para que Lead calificados lleguen a Keybe, recuerda que Biky es el corazón del Metodo tesseract, por lo que es fundamental que tengas Biky en tu equipo.
