Para instalarlo en una página necesitas además de los requisitos colocale el CSS y JS del Widget.
<head> ... <link rel="stylesheet" href="https://cdn.thelogicvalue.com/chatbox/css/chatboxV1.min.css"> </head>
<body> ... <script src="https://cdn.thelogicvalue.com/chatbox/js/chatboxV1.min.js"></script> </body>
Para la incialización se utiliza la función tlvBotInit([objeto de configuración]config)
<script> const config = { "urlApi": "url/api/", "resetButton": true, "title": "Julia", "mainColor": "#2191A0", "acceptarColor": "#28a745", "declinarColor": "#dc3545", "circleIcon": "#fff", "closeColor": "#fff", "resetColor": "#fff", "expandColor": "#fff", "collapseColor": "#fff", "buttonColorText": "#fff", "avatarUser": "https://cdn.thelogicvalue.com/chatbox/img/placeholder-user.png", "avatarBot": "https://cdn.thelogicvalue.com/chatbox/img/Julia cabeza.png", "politics": true, "linkPolitics": "https://thelogicvalue.com/politica-de-privacidad/", "inputLength": 150, "language": "es", "langText": { "es": { "textPolitics": "Una vez le apretes el boton de aceptar estarás aceptando nuestra política de privacidad, puedes consultarla en el siguiente enlace.", "textLinkPolitics": "Política de Privacidad", "placeHolderText": "Envie un mensaje", "textReset": "Quiere resetear el dialogo?", "aceptarButton": "Aceptar", "declinarButton": "Declinar", "yesButton": "Si", "noButton": "No" } } }; tlvBotInit(config); </script>
Variable | Explicación |
---|---|
urlApi | Sirve para colocar la url del orquestador |
resetButton | Te saca en el boton de reset |
title | Nombre que aparece en el widget |
mainColor | Es el color principal del bot el cual cambia el color del título dentro del chat y los botones en la parte inferior de intro.; |
acceptarColor | Es el color que se le pone al botón de aceptar política. |
declinarColor | Es el color que se le pone al botón de declinar política. |
buttonColorText | Es el color del texto de aceptar y declinar. |
circleIcon resetColor expandColorcollapseColor |
Es el color de los iconos del widget:
|
avatarUser | La imagen que se le coloca al usuario al hablar, si se quiere cambiar se lo ideal es que sea cuadrada (500px X 500px) por ejemplo. |
avatarBot | La imagen que representa al chatbot, lo ideal que sea cuadrada. |
politics | Por defecto a false, pero poniendolo a true hace que el usuario tenga que aceptar la política, la cual guarda en localstorage la acceptación de la misma, (tlv-accept -> true). |
linkPolitics | Enlace que lleve a la parte de políticas de la web. |
inputLength | El número máximo de caracteres para la entrada del chatbot. Por defecto 150. |
language | Idioma del bot |
langText |
Es donde se configuran los textos que se pueden cambiar dentro del widget, en princpio preparado para multi-idioma pero en este caso configurado en castellano. Textos:
|