Chat Cordova

quick integration guide

Index

• What do you need for integrationn
• Integration>
• Import lugin
• Chat Initialization
• Changelog

What do you need for integration?

• You will need the Channel key of the project, which is the key that our system uses to identify it, so it is unique for each project.

  
  

• For android
  • Android Studio
  • An Android device or emulator with Google Play services installed to run the app
• For ios
  • Xcode
  • An iOS device to run the app

Integration

This article shows the minimum development that must be done to start using chat.

Our Chat is available through npm.

npm (Node Package Manager) it is a package management system. It consists of a command line client and an online database of public and private packages.

Import plugin

To import the Chat to your project, follow these steps:

1. Open the console and position yourself at the root of the project.

$ cd /PATH/TO/YOUR/PROJECT

2. Run this line in the console to import the plugin :

$ cordova plugin add indigitall-chat-cordova-plugin

• If it has imported successfully, the following file should be in the path your_app/www/js/web-chat.js. If you can't find it, add it to that path manually by downloading it from here: Download

Chat Initialization

Initialize the Chat with the indigitall.chat.init()method to start receiving push notifications. This initialization must be done within the index.html of your project. To verify that the integration has been carried out correctly, you will have two callbacks in the initialization, a success with the correct loading of the chat and another with the error if there is one.

 window.plugins.indigitall.chat.init({
    channelKey: "your_channel_key",
    //opciones personalizables
    externalCode:"your_external_code",
    titleChat: "your_title_chat",
    botName:"your_bot_name",
    defaultUserName:"your_default_username",
    messagePlaceholder:"your_message_place_holder",
    openFileText:"your_open_file_text",
    primaryColor:"your_primary_color", 
    backgroundChatColor:"your_background_chat_color",
    backgroundBarColor:"your_background_bar_color",
    fullscreen:"bool",
    zIndex: "your_z_index",
    defaultChatIconResource: 'your_chat-bubble',
    logLevel: logLevel,
    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"
    },()=>{
        //DO SOMETHING    
    }, (error)=>{
        //DO SOMETHING
    });

• 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 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 is a string with the default name that the user will have and will be displayed above the user's bubble.
• messagePlaceholder is a string with the message that is displayed in the text field where it must be written.
• openFileText is a string with the text that will be displayed in the case a file has to be downloaded.
• backgroundChatColor is a string with the chat background color in hexadecimal.
• backgroundBarColor is a string with the background color of the top and bottom bars in hexadecimal.
• primaryColor is a string with the main color of the chat, buttons and floating icon in hexadecimal.
• fullscreen is a boolean where you indicate if you want the chat to occupy the entire screen (true) or have a certain margin of the device (false).
• zIndex numeric indicator to position the chat on the z axis.
• defaultChatIconResource is a reference with the icon resource taht show on the chat main icon.
• logLevel indicates log you can see
• welcomeLabel show the welcome label with the optional fields as json object.
• infoContactTopBarTitle is a string top bar title of info contact view.
• 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

Functionalities

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

let isEmitted = window.plugins.indigitall.chat.isWelcomeEmitted((isEmitted) => {
  //success
}, (error)=> {
  //Log error
});

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

window.plugins.indigitall.chat.setCustomEvent("Your_event", () => {
  //success
}, (error)=> {
  //Log error
});

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

window.plugins.indigitall.chat.clearAllMessages(() => {
  //success
}, (error)=> {
  //Log error
});

Changelog

[1.3.0] - 03/2022

Added

• Welcome event
• Clean messages

[1.2.1] - 02/2022

Fixes

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

[1.2.0] - 01/2022

Added

• Interactive Field
• Option to automatically open the chat

[1.1.0] - 11/2021

Added

• Show info contact and location option

[1.0.1] - 01/2021

Corrections

• Update WebChat 1.1.1

[1.0.0] - 01/2021

Added

• Initialization

Resources

Start automating your communications thanks to our administration API