Webchatclient API
It is possible to embed the uContact webchatclient by adding the following scripts to your site or web application. To embed the Webchat in a website created with WordPress, consult the following link: https://integra-scm.atlassian.net/l/c/0oZCi0uh
<script src="https://example.ucontactcloud.com/webchatclient/integrawebchat.js"></script>
<script>
initwebchat({
ip: "example.ucontactcloud.com",
campaign: "nombreCampaña",
buttonMessage: "Chatea con Nosotros!"
});
</script >example.ucontactcloud.com refers to the address of the uContact instance, it should be replaced with the address where the campaign is located.
buttonMessage floating message that will be displayed above the button to open the chat, you can place a text or HTML. If the parameter is not sent, it will not be displayed.
The webchatclient scripts and connection will point directly to the uContact server. In case the uContact instance is on-site and not in the cloud, make sure to:
Enable port 443 for HTTPS connection to uContact.
Enable port 8089 TCP (SIP signalling via WebSocket) to the telephony server to be able to make calls.
The web page or application must use HTTPS to make calls. This is due to browser restrictions when encryption is not used.
Using the methods
The execution of the initwebchat method returns an instance of an object on which it is possible to execute some methods.
<script src="https://example.ucontactcloud.com/webchatclient/integrawebchat.js"></script>
<script>
let chat = initwebchat({
ip: "example.ucontactcloud.com",
campaign: "nombreCampaña",
buttonMessage: "Chatea con Nosotros!"
});
chat.startInteraction('John', 'johndoe@company.com', 'Hi there!!', '+59898765432');
</script >
Method | Parameters | Description |
|---|---|---|
|
| Allows you to hide or show the chat depending on the status |
| name, email, message, number | With the data provided, start a new interaction. Keep in mind that this method does not consider if any had been started previously. |
|
| When executing this method, the webchat client sends uContact the URL and the title of the page at that moment so that the agent can view it. The same behaviour occurs by default when a page is reloaded. This method is useful for applications or SPA pages (single-page application). |
Subscribing to events
It is also possible to subscribe to some webchat events. Those events are emitted by the webchat client application and come to the page where is inserted the web chat, via window proxy.
Example of use
chat.onWebChatReady = function(){
console.log('ready webchat!!')
chat.startInteraction('John', 'john@mail.com');
}
chat.onClickButton = function(){
console.log('click button!!')
}
chat.onWebChatEvent = function(e){
console.log('webchat event')
console.log(e);
}Event | Parameters | Description |
|---|---|---|
|
| Fired when the webchat is fully loaded and ready to start an interaction. |
|
| Fired when the user clicks on the webchat button, either to close it or to open it. |
| text | Fired when a bot executes the EmitWebchatEvent activity. This way is possible to pass information from the bot to the page that is inserted in the webchat. The text parameter is submitted directly from the bot. Reference: https://integra-scm.atlassian.net/wiki/spaces/UCEN/pages/2405434088/Description+of+Workflow+Designer+activities#EmitWebchatEvent |