This website is no longer maintained. Please, visit documentation.indigitall.com to read our updated documentation.

logo indigitall logo indigitall
search icon

EN  | 

ES
/Quick Integration Guide /Chat /Web

Chat web - with javascript

quick integration guide

Estimated integration time: 10 minutes.

If you use npm click here.


To implement our web chat on your page you need:

  • paste the following code in the main page of your website, just before the end of the tag </body>:

Importante: channelKey value is unique and personal.

<script src="../indigitall-web-chat.js"
 charset="utf-8" 
 onload=
 "WebChat.init({
    channelKey: your_channel_key,

    <!--custom data-->

    externalCode: 'your_external_code',
    titleChat: 'your_title_chat',
    botName: 'your_bot_name',
    defaultUsername: 'your_default_user_name',
    primaryColor: 'your_primaryColor',
    backgroundChatColor: 'your_background_chat_color',
    backgroundBarColor: 'your_background_bar_color',
    messagePlaceholder: 'your_message_place_holder',
    zIndex: your_z_index,
    openFileText: 'your_text_open_file'
    fullscreen: false,
    defaultChatIconResource: 'your_chat-bubble',
    logLevel: WebChat.LogLevel.your_level,
    infoContactTopBarTitle: 'your_title_top_bar_info_contact',
    welcomeLabel:
        {
            title: 'your_title_welcome_label',
            body: 'your_body_welcome_label',
            icon: 'icon_welcome_label',
            backgrounColor: 'your_color_welcome_label',
            textColor: 'your_text_color_welcome_label',
            closeIcon: 'your_close_icon_welcome_label',
            closeIconBackGroundColor: 'your_backgrounColor_close_icon_welcome_label',
            delay: 'your_delay_to_show_welcome_label'
        },
    chatAutoOpenTime: your_chat_auto_open_time_in_seconds,
    clearMessages: true,
    welcomeEvent: 'your_event'
    })">
</script>


  • channelKey is an alphanumeric string that identifies your indigitall project.

The following fields are custom. If they are not added, the Chat will show the default values.

  • externalCode is a string that identifies each device.

  • titleChat It is a string with the title that you want to be shown in the chat.

  • botName is a string with the name of the bot that will be displayed above the bubble on the left side.

  • defaultUsername It is a string with the default name that the user will have and will be displayed above the user's bubble.

  • primaryColor is a string with the main color of the chat, buttons and floating icon in hexadecimal or object color.

  • backgroundChatColor is a string with the chat background color in hexadecimal or object color.

  • backgroundBarColor is a string with the background color of the upper and lower bars in hexadecimal or object color.

  • messagePlaceholder It is a string with the message that is displayed in the text field where it must be written.

  • zIndex numeric indicator to position the chat on the z axis.

  • openFileText It is a string with the text that will be displayed in the case a file has to be downloaded.

  • logLevel indicates log you can see

  • infoContactTopBarTitle title top bar of inco contact view

  • welcomeLabel show the welcome label with the optional fields as json object.

  • chatAutoOpenTime is an integer that indicates the seconds for the chat to open automatically. If no chatAutoOpenTime is specified, such as if you press the bubble before the specified time expires, the chat can be opened manually.

  • clearMessages is a boolean that indicate if you want to delete or clear all messages from session storage every time you open the chat

  • welcomeEvent is a string to define the welcome message one time you open the chat

  • download .zip and extract its two files to upload them to the main folder of your website.

Functionalities

You can check if the welcome event has been fired with this method: 


let isEmitted = indigitallChat.isWelcomeEmitted();


If you want to send a message custom you can use this method:


indigitallChat.setCustomEvent("Your_event");


You can also control the action of deleting messages with this method:


indigitallChat.clearAllMessages()


How to upload files to your server or access them?

You can do it through FTP or from your server's control panel (cPanel, directAdmin, etc) among other ways. Below you will find an explanatory video of the process. In less than 10 minutes, you should have it.

You can ask your hosting provider or your trusted programmer for help by sending these instructions.


Changelog

[1.5.0] - 03/2022

Added

  • Welcome event
  • Clean messages

[1.4.2] - 02/2022

Fixes

  • Set text color of welcome label

[1.4.1] - 02/2022

Fixes

  • Fix scroll bar on interactive list
  • Fix overlaw on message own

[1.4.0] - 01/2022

Added

  • Interactive Field
  • Automatically open chat option

[1.3.2] - 11/2021

Fixes

  • Fix welcome tags

[1.3.1] - 11/2021

Fixes

  • welcome label close when chat open

[1.3.0] - 11/2021

Added

  • Show info contact and location option
  • welcome label

[1.2.0] - 06/2021

Added

  • Added template with buttons and pdf

[1.1.1] - 01/2021

Added

  • Independent css from buttons
  • Fix problem with crypto library

[1.1.0] - 01/2021

Added

  • Unity test

[1.0.0] - 11/2020

Added

  • Init

Contact us