Get started

This article provides all the information you need to communicate with the online support widget via JavaScript on your website. You can use this information to fully control the online support widget.

EVENT: OWTANA READY




window.addEventListener('owtana_ready',
			function () {
	// Owtana.setUser(...);
	// Owtana.setWidget(...);
	// Owtana.sendOfflineMessage(...);
	});

This event is fired when the conversation widget is ready to be used.

Note: The functions that you will see below must be placed in the code below (inside the owtana_ready event) or called after the widget is loaded, in order to be executed without problems.

EVENT: New message


window.addEventListener('owtana_newMessage',
				function(event) {
	const message = event.detail;
	const message_type = message.type;
	// "TEXT" , "FILE" , "VOICE" , "FORM"
	const message_content = message.data;
	// If message_type is text :
	// "hi, please help..."
	// Else If message_type is FILE,VOICE :
	// data is null
	// If message_type is FORM :
	// [
	//    { title : "label1", value : "value1" },
	//    ...
	// ]
});

When a user sends any message, this event will be triggered and you will have access to the type and content of the message sent.

RESPONSE PARAMETERS

Parameter	Type	Description
message.type	String	The user's message type is one of the following phrases.
message.data	String	The content of a message sent by a user that is of type text, file, or voice
message.data	Array	The content of a message sent by a user that is of type form

EVENT: ON WIDGET CHANGED




window.addEventListener('owtana_onWidgetChanged',
				function (event) {
    const type = event.detail;
    // If widget_opened, type is "OPEN"
    // If widget_closed, type is "CLOSE"
});

In the event of the opening / closing of the chat widget by the user, this event will be executed.

FUNCTION: SET USER


Owtana.setUser({
   replaceData : true,
   name : 'Amir H. Ruhollahpour',
   mail : 'mail@domin.com',
   phone : '09123456789',
   picture : 'https://domin.com/picture.jpg',
   tags : ["tag1","tag2"],
});

Using this function, you can send the user information of the user who has logged in to your website to Owtana so that it is displayed in the user profile section for each conversation and you can access them.
Note: This function must be applied in the owtana_ready event.

INPUT PARAMETERS

Parameter	Type	Description
replaceData	Boolean	Should this information be replaced with the previous one if the user's profile exists in Owtana?
name	String	The name of the user who is logged-in
mail	String	The email of the logged-in user
phone	String	The phone of the logged-in user
picture	String	Photo of the logged-in user
tags	Array	The tags pertaining to the logged-in user.

FUNCTION: SET WIDGET


Owtana.setWidget({
    xMargin: 30,
    yMargin: 30,
    position: "right",// "right" or "left"
    itsActive: true,
    enableSounds: true,
    colorTheme: "#6F6AF86D"
});

This function allows you to change the appearance of your widget and also turn on or off the sound effects of your widget.
Note: If you want an item to remain in its default state, simply do not specify the parameter for it.

INPUT PARAMETERS

Parameter	Type	Description
xMargin	Integer	Horizontally margin (left and right)
yMargin	Integer	Vertically margin (top and bottom)
position	String	The location of the widget on the page (right or left)
itsActive	Boolean	Is the widget visible at this time?
enableSounds	Boolean	Should the widget's audio effects be turned on or off?
colorTheme	String	Set the color theme of the widget

FUNCTION: SEND OFFLINE MESSAGE


Owtana.sendOfflineMessage({
   message: 'your message text...'
});

Using this function, you can send a custom message to the user under the conditions of your choice. This message will only be displayed on the user's side and will not be applied to conversations. Note: If you want an item to remain in its default state, simply do not specify the parameter for it.

INPUT PARAMETERS

Parameter	Type	Description
message	String	Message text

FUNCTION: OPEN WIDGET


Owtana.open();

By using this function, you can open the widget.

FUNCTION: TOGGLE


Owtana.toggle();

Using this function, the chat widget will be closed if it is open, and opened if it is closed.

FUNCTION: CLOSE WIDGET


Owtana.close();

By using this function, you can close the widget.