API Webchat Widget

General description

To install the widget on the customer’s page, the channel must have been contracted and the corresponding configuration form completed beforehand.

In the following sections we explain how to implement the widget on your web page.

Standard installation

Step 1:

Add the script that loads the components on the customer’s page.

<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js" id="widget-chattigo" title="did@del@cliente"></script>

For Google Tag Manager it is configured as follows:

<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js"></script>
<script>
    var e = document.createElement("div");
    for (e.innerHTML = "\x3capp-widget-root did\x3d'did@del@cliente' remote\x3d'true'\x3e\x3c/app-widget-root\x3e"; e.firstChild;) document.body.appendChild(e.firstChild);
    widget = document.querySelector("app-widget-root");
    widget.init();
</script>

Property description

Field	Type	Description
`id`	String	In all cases `widget-chattigo`.
`title`	String	Channel identifier, provided to the client.
`remote`	Boolean	In all cases `true`.

Example:

Below is an implementation in a basic HTML page:

<!DOCTYPE html>
<html>
<head>
   <title>WebChat Chattigo Ofertas</title>
   <meta
           content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
           name="viewport"/>
   <meta content="telephone=no" name="format-detection"/>
   <meta content="no" name="msapplication-tap-highlight"/>
   <meta content="yes" name="apple-mobile-web-app-capable"/>
   <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
</head>
<body>
<script src="https://cdn-widgets.chattigo.com/webchat-widget-new.js" id="widget-chattigo" title="did@del@cliente"></script>
</body>
</html>

Additional functions

Toggle

Provides the visibility functionality and hides the widget according to its current state. See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.toogle();
 });

</script>

Visibility

Hides or shows the widget trigger or start button; the input parameter determines its functionality. See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.visibilityWC(false); // widget started but hidden
 });

</script>

Expand

Shows the widget panel (the trigger stays visible). See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.expandChat();
 });

</script>

Collapse

Hides the widget (the trigger stays visible). See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.expandChat();
   widget.collapseChat();
 });

</script>

Logout

Ends the webchat session (same functionality as ending the chat). It can be applied at any time while the customer is chatting with the agent. See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  document.addEventListener("DOMContentLoaded", function () {
   widget.init();
 });
  widget.logout();

</script>

Start Chat

Starts the chat with a first message without the need to open the home page, going directly to the conversation inbox.

DATA object description

Field	Type	Description
`msisdn`	String	ID for each customer using the widget.
`content`	String	Content of a message that starts the chat.
`campaignId`	Integer	Identifier of the campaign the chat will be received in. (Optional)
`name`	String	Name of the customer using the widget.

{
   "msisdn": "",
   "name": "",
   "content": "",
   "campaignId": ""
}

See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  var data = {
   "msisdn": "25778899-1",
   "name": "My Name Is",
   "content": "Hello",
   "campaignId": 12
 };
  document.addEventListener("DOMContentLoaded", function () {
   widget.init();
   widget.startChat(data);
 });

</script>

Start Chat Agent

Starts the chat with the selected user identifier without the need to open the home page, going directly to the conversation inbox. See the following example:

<script>

 widget = document.querySelector("app-widget-root");
  var idAgente = 285
  document.addEventListener("DOMContentLoaded", function () {
   widget.init();
   widget.initChatWithAgent(idAgente);
 });

</script>

Bot-Chattigo ISV