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",
                                        "titleButtonClose": "Cierra el diálogo",
                                        "titleButtonExpand": "Expande el diálogo",
                                        "titleButtonColapse": "Encoge el diálogo",
                                        "titleButtonReset": "Reinicia el diálogo",
                                    }
                                },
                                "inputLength": 150
                            };
                            tlvBotInit(config);
                        <‍/script>

Otra forma de abrir el chat

Otras formas de abrir el chat del bot son utilizando la función "tlvOpenChat"

Ejemplo Botón:

                    <button> onclick="tlvOpenChat()">Open Bot<button>

Ejemplo Enlace:

                    <a> nohref onclick="tlvOpenChat()">Open Bot<a>

Open Bot

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. titleButtonClose - Título para el botón de cerrar. titleButtonExpand - Título para el botón de expandir. titleButtonColapse - Título para el botón de contraer. titleButtonReset - Título para el botón de resetear.
inputLength	Por defecto (150) es el número máximo de caracteres que se pueden introducir vía la entrada de texto.