Explicación de Uso

Instalación

Para instalarlo en una página necesitas además de los requisitos colocale el CSS y JS del Widget.

Header
                <‍head>
                    ...
                    <‍link rel="stylesheet" href="https://cdn.thelogicvalue.com/chatbox/css/chatboxV1.min.css">
                <‍/head>
Body (scripts)
                <‍body>
                    ...                    
                    <‍script src="https://cdn.thelogicvalue.com/chatbox/js/chatboxV1.min.js"><‍/script>
                <‍/body>

Inicialización

Para la incialización se utiliza la función tlvBotInit([objeto de configuración]config)

Ejemplo práctico de la icialización
                        <‍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"
                                    }
                                },
                                "inputLength": 150
                            };
                            tlvBotInit(config);
                        <‍/script>
Variables configuración
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
expandColor
collapseColor

Es el color de los iconos del widget:

  • circleIcon - color del icono del ciculito que carga el widget
  • resetColor - color del botón de reset
  • expandColor - color icono que expande el widget
  • collapseColor - color icono que contrae después de expandirlo el 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:

  • textPolitics - texto inicial de políticas.
  • textLinkPolitics - texto del entalce de políticas.
  • placeHolderText - texto del placeholder del input del widget.
  • textReset - texto que aparece en el modal que aparece al querer reiniciar.
  • aceptarButton - texto del botón de acceptar.
  • declinarButton - texto del botón de declianr.
  • yesButton - texto de sí en el modeal de reset.
  • noButton - texto de no en el modal de reset.
inputLength Por defecto (150) es el número máximo de caracteres que se pueden introducir vía la entrada de texto.