CorvidReference

Chatbox

An element for sending and receiving chat messages.

The Wix Chat application lets you communicate with site visitors via a chatbox. The chatbox sends messages over a chat channel, which connects 2 or more chat participants.

Site visitors can participate in the following chat scenarios:

  • Business Chat: Site members and visitors chat with the site owner or contributor, referred to as the "business."
  • Social Chat: Site members chat with other site members, privately or in a group chat.

Table of Contents

PROPERTIES

?
Store values associated with an object.
globalIndicates if an element appears on all pages or only on the current page.
hiddenIndicates if the chatbox is visible or hidden.
idGets the element's ID.
isVisibleIndicates if the element is actually visible.
maximizedIndicates if the chatbox is maximized.
parentNote: This standard element property is not relevant for Chatbox.
renderedIndicates if an element is currently in the DOM structure.
typeGets the element's type.

FUNCTIONS

?
Perform actions on an object.
focusChannel( )Expands the chatbox and focuses it on the specified chat channel.
getChannel( )Gets a chatbox channel.
getChannelList( )Gets a list of available chat channels for a site visitor.
hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

maximize( )Expands the chatbox and sets its maximized property to true.
minimize( )Collapses the chatbox and sets its maximized property to false.
onMaximize( )An event that fires when the chatbox is maximized.
onMessageReceived( )An event that fires when a site visitor receives a chat message.
onMessageSent( )An event that fires when a site visitor sends a chat message.
onMinimize( )An event that fires when the chatbox is minimized.
onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

onViewportEnter( )Note: This standard element event is not relevant for Chatbox.
onViewportLeave( )Note: This standard element event is not relevant for Chatbox.
scrollTo( )Note: This standard element function is not relevant for Chatbox.
sendMessage( )Sends a chat message from a site visitor.
show( )

Shows the element and sets its hidden property to false, using an effect if specified.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
ChannelAn object representing a chat channel.
ChannelInfoAn object containing information about a chat channel.
DisplayDataAn object representing display information associated with a Channel.
MessageAn object that contains information about a chat message.
MessageInfoAn object representing a chat message to be sent.
MessagePayloadThe content of a chat message.

MIXES IN

?
Where some functionality is inherited from.
$w.Element, $w.HiddenMixin

global

Indicates if an element appears on all pages or only on the current page.

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Syntax

get global(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

Examples

Get whether an element is displayed on all pages

let isGlobal = $w("#myChatbox").global; // true

hidden

Indicates if the chatbox is visible or hidden.

Description

If hidden is true, the chatbox is not displayed on the page.

If hidden is false, the chatbox is displayed on the page.

To set the hidden property on the chatbox, use the chatbox's hide() or show() functions.

If you select Hidden on load in the chatbox's Properties panel in the Editor, the hidden property is set to true when the page loads.

See Also

hide( ), show( )

Syntax

get hidden(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

Examples

Get the chatbox's hidden status

let isHidden = $w("#myChatbox").hidden;  // false

Toggle an element's hidden state

if( $w("#myChatbox").hidden ) {
  $w("#myChatbox").show();
}
else {
  $w("#myChatbox").hide();
}

id

Gets the element's ID.

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Syntax

get id(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID

let myId = $w("#myElement").id; // "myElement"

isVisible

Indicates if the element is actually visible.

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

Syntax

get isVisible(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

Examples

Get whether the chatbox is visible

let isVisible = $w("#myChatbox").isVisible;  // true

maximized

Indicates if the chatbox is maximized.

Description

If maximized is true, the chatbox is expanded. If maximized is false, the chatbox is minimized.

Syntax

get maximized(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get the chatbox's maximized status

let isMaximized = $w("#myChatbox").maximized; // false

Toggle a chatbox's maximized state

if($w("#myChatbox").maximized) {
  $w("#myChatbox").minimize();
}
else {
  $w("#myChatbox").maximize();
}

parent

Note: This standard element property is not relevant for Chatbox.

Description

Gets the element's parent element.

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

See Also

children

Syntax

get parent(): Node
TYPE
?
The kind of data the property stores.
DEFAULT VALUE
?
The value of a property before you explicitly set it.
null

rendered

Indicates if an element is currently in the DOM structure.

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

An element might not be in the DOM if it is in a slide or a state which is not currently showing.

See Also

collapsed, hidden, isVisible

Syntax

get rendered(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get an element's rendered status

let isRendered = $w("#myElement").rendered;  // true

type

Gets the element's type.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the element's type

let myType = $w("#myElement").type; // "$w.Type"

focusChannel( )

Expands the chatbox and focuses it on the specified chat channel.

Description

The focusChannel() function returns a Promise that is resolved when the chatbox focuses on the specified channel.

You can focus on a channel by specifying one of the following:

  • Channel ID: Focus on the channel with the specified ID. type is ignored.
  • Type: Focus on the channel of the specified type. Currently, only type Business is supported.

Syntax

function focusChannel(channelInfo: ChannelInfo): Promise<void>
PARAMETERS
?
Values that you pass to a function.
channelInfo
Channel information specifying which channel to focus on.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the chat box focuses on the channel.

Examples

Expand the chatbox and focus it on the channel with the specified ID

let channelInfo = {
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").focusChannel(channelInfo)
  .then(() => {
    console.log("Done maximizing chatbox and focusing channel");
  })
  .catch((err) => {
    console.log(err);
  });

Expand the chatbox and focus it on the business channel

let channelInfo = {
  "type": "Business"
}

$w("#myChatbox").focusChannel(channelInfo)
  .then(() => {
    console.log("Done maximizing chatbox and focusing channel");
  })
  .catch((err) => {
    console.log(err);
  });

getChannel( )

Gets a chatbox channel.

Description

The getChannel() function returns a Promise that resolves to the requested channel. You can get a channel by specifying one of the following:

  • Channel ID: Gets the channel with the specified ID. type is ignored.
  • Type: Gets the channel of the specified type:

    • "Focused": Gets the currently focused channel.
    • "Business": Gets the business channel.

Syntax

function getChannel(channelInfo: ChannelInfo): Promise<Channel>
PARAMETERS
?
Values that you pass to a function.
channelInfo
Channel information specifying which channel to get.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Channel>
Fulfilled - When the information associated with the specific channel has been retrieved.

Examples

Get information about the channel associated with the specified channel ID

let channelInfo = {
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const channelImage = channel.displayData.image;
    const lastMessageText = channel.messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

Get information about the currently focused chat channel

let channelInfo = {
  "type": "Focused"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const channelImage = channel.displayData.image;
    const lastMessageText = channel.messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

getChannelList( )

Gets a list of available chat channels for a site visitor.

Description

The getChannelList() function returns a Promise that resolves to a list of available channels for the site visitor.

Syntax

function getChannelList(): Promise<Array<Channel>>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<Array<Channel>>
Fulfilled - When the list of channels has been retrieved.

Examples

Get a list of available chat channels

$w("#myChatbox").getChannelList()
  .then((channels) => {
    // Get channel image of first channel in list
    const firstChannelImage = channels[0].displayData.image;
    // Get most recent message text of first channel in list
    const firstChannelText = channels[0].messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel list:
 *
 *   [
 *     {
 *       "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *       "displayData": {
 *         "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *         "name": "Our Chat Group"
 *       },
 *       "messages":[
 *         {
 *           "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *           "type": "TEXT",
 *           "summary": "Hey, how's it going?",
 *           "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *           "createdAt": "2019-10-27T06:02:12.008Z",
 *           "payload": {
 *             "text": "Hey, how's it going?"
 *           }
 *         }
 *       ]
 *    },
 *    {...} // Next channel
 *  ]
 */

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

See Also

show( ), hidden, collapse( )

Syntax

function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenMixin

Examples

Hide an element with no effect

$w("#myElement").hide();

Hide an element with the "fade" effect

$w("#myElement").hide("fade");

Hide an element with the "fade" effect and custom options

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log a message when the effect is done

$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

maximize( )

Expands the chatbox and sets its maximized property to true.

Description

The maximize() function returns a Promise that is resolved when the chatbox finishes expanding.

Syntax

function maximize(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the chatbox is maximized.

Examples

Maximize the chatbox

$w("#myChatbox").maximize();

Maximize the chatbox and log a message when done

$w("#myChatbox").maximize()
  .then(() => {
    console.log("Done with maximize");
  });

Toggle a chatbox's maximized state

if($w("#myChatbox").maximized) {
  $w("#myChatbox").minimize();
}
else {
  $w("#myChatbox").maximize();
}

minimize( )

Collapses the chatbox and sets its maximized property to false.

Description

The minimize() function returns a Promise that is resolved when the chatbox finishes collapsing.

Syntax

function minimize(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the chatbox is minimized.

Examples

Minimize the chatbox

$w("#myChatbox").minimize();

Minimize the chatbox and log a message when done

$w("#myChatbox").minimize()
  .then(() => {
    console.log("Done with minimize");
  });

Toggle a chatbox's maximized state

if($w("#myChatbox").maximized) {
  $w("#myChatbox").minimize();
}
else {
  $w("#myChatbox").maximize();
}

onMaximize( )

An event that fires when the chatbox is maximized.

Syntax

function onMaximize(): void

Examples

Register a callback to run after the chatbox is maximized

$w("#myChatbox").onMaximize(() => {
  console.log("Chatbox maximized");
});

onMessageReceived( )

An event that fires when a site visitor receives a chat message.

Description

The onMessageReceived() event handler runs when a chat message is received by a site visitor. The received Message object contains information about the message that was received.

Note

onMessageReceived() runs if the message was sent via the chatbox widget. It does not run if the message was sent programatically using sendMessage().

Syntax

function onMessageReceived(message: Message): void
PARAMETERS
?
Values that you pass to a function.
message
The message that was received.

Examples

Get message data when a chat message is received

$w("#myChatbox").onMessageReceived((message) => {
  const channelId = message.channelId;
  const messageText = message.payload.text;
});

/*  Example message object:
 *
 *  {
 *    "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *    "type": "TEXT",
 *    "summary": "Hey, how's it going?",
 *    "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *    "createdAt": "2019-10-27T06:02:12.008Z",
 *    "payload": {
 *      "text": "Hey, how's it going?"
 *    }
 *  }
 */

onMessageSent( )

An event that fires when a site visitor sends a chat message.

Description

The onMessageSent() event handler runs when a chat message is sent. The sent Message object contains information about the message that was sent.

Note

onMessageSent() runs if the message was sent via the chatbox widget. It does not run if the message was sent programatically using sendMessage().

Syntax

function onMessageSent(message: Message): void
PARAMETERS
?
Values that you pass to a function.
message
The message that was sent.

Examples

Get message data when a chat message is sent

$w("#myChatbox").onMessageSent((message) => {
  const channelId = message.channelId;
  const messageText = message.payload.text;
});

/*  Example message object:
 *
 *  {
 *    "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *    "type": "TEXT",
 *    "summary": "Hey, how's it going?",
 *    "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *    "createdAt": "2019-10-27T06:02:12.008Z",
 *    "payload": {
 *      "text": "Hey, how's it going?"
 *    }
 *  }
 */

onMinimize( )

An event that fires when the chatbox is minimized.

Syntax

function onMinimize(): void

Examples

Register a callback to run after the chatbox is minimized

$w("#myChatbox").onMinimize(() => {
  console.log("Chatbox minimized");
});

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved onto the element.

?
Values that you pass to a function.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse enters an element

$w("#myElement").onMouseIn( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved off of the element.

?
Values that you pass to a function.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse exits an element

$w("#myElement").onMouseOut( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onViewportEnter( )

Note: This standard element event is not relevant for Chatbox.

Description

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window. onViewportEnter() is not fired for hidden or collapsed elements even if they are scrolled into view.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportLeave( )

Syntax

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element enters the viewport.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

onViewportLeave( )

Note: This standard element event is not relevant for Chatbox.

Description

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

An element leaves the viewport when the page is scrolled so that the element is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window. onViewportLeave() is not fired for hidden or collapsed elements even if they are scrolled out of view.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportEnter( )

Syntax

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element leaves the viewport.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

scrollTo( )

Note: This standard element function is not relevant for Chatbox.

Description

Scrolls the page to the element using an animation.

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Syntax

function scrollTo(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the scroll is complete.

sendMessage( )

Sends a chat message from a site visitor.

Description

The sendMessage() function returns a Promise that is resolved when the message is sent.

Currently only chat messages containing text can be sent programatically.

Note

Chat messages sent programatically by the sendMessage() function do not trigger the onMessageSent() event handler.

Syntax

function sendMessage(messageInfo: MessageInfo): Promise<void>
PARAMETERS
?
Values that you pass to a function.
messageInfo
An object representing the message to be sent.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the message is sent.

Examples

Send a message from a site visitor to the business

let messageInfo = {
  "messageText": "Hey, how's it going?"
}

$w("#myChatbox").sendMessage(messageInfo)
  .then(() => {
    console.log("Done sending message");
  })
  .catch((err) => {
    console.log(err);
  });

Send a message from a site visitor over a specific channel

let messageInfo = {
  "messageText": "Hey, how's it going?",
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").sendMessage(messageInfo)
  .then(() => {
    console.log("Done sending message");
  })
  .catch((err) => {
    console.log(err);
  });

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

See Also

hide( ), hidden, expand( )

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenMixin

Examples

Show an element with no effect

$w("#myElement").show();

Show an element with the "fade" effect

$w("#myElement").show("fade");

Show an element with the "fade" effect and custom options

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Show an element with an effect and log a message when the effect is done

$w("#myElement").show("fade")
  .then( ( ) => {
    console.log("Done with fade");
  } );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Channel

An object representing a chat channel.

See Also

getChannel(), getChannelList()

Syntax

type Channel = {
  id: string
  displayData: DisplayData
  messages: Array<Message>
}
MEMBERS
?
The properties of an object.
id
string
ID of the channel.
displayData
Display information associated with the channel.
messages
Array<Message>
An array of messages sent over the channel. Currently only the last message is included.

Examples

Use a channel ID to get information about a specific channel

let channelInfo = {
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const channelImage = channel.displayData.image;
    const lastMessageText = channel.messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

Get a list of available chat channels

$w("#myChatbox").getChannelList()
  .then((channels) => {
    // Get channel image of first channel in list
    const firstChannelImage = channels[0].displayData.image;
    // Get most recent message text of first channel in list
    const firstChannelText = channels[0].messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel list:
 *
 *   [
 *     {
 *       "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *       "displayData": {
 *         "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *         "name": "Our Chat Group"
 *       },
 *       "messages":[
 *         {
 *           "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *           "type": "TEXT",
 *           "summary": "Hey, how's it going?",
 *           "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *           "createdAt": "2019-10-27T06:02:12.008Z",
 *           "payload": {
 *             "text": "Hey, how's it going?"
 *           }
 *         }
 *       ]
 *    },
 *    {...} // Next channel
 *  ]
 */

ChannelInfo

An object containing information about a chat channel.

Description

The ChannelInfo object is used by the getChannel() and focusChannel() functions to specify which channel to get or focus on.

Note

At least one of the object properties is required. If channelId is passed, type is ignored.

See Also

getChannel(), focusChannel()

Syntax

type ChannelInfo = {
  channelId: string
  type: string
}
MEMBERS
?
The properties of an object.
channelId(Optional)
string
ID of a chat channel.
type(Optional)
string

Type of chat channel. One of the following:

  • "Focused": Currently focused channel.
  • "Business": Business channel.

Examples

Get information about the channel associated with the specified channel ID

let channelInfo = {
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const channelImage = channel.displayData.image;
    const lastMessageText = channel.messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

Get information about the currently focused chat channel

let channelInfo = {
  "type": "Focused"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const channelImage = channel.displayData.image;
    const lastMessageText = channel.messages[0].payload.text;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

DisplayData

An object representing display information associated with a Channel.

Description

The data a site visitor sees in the chatbox. The data depends on the current channel type:

Channel TypeDescriptionDisplay Data
Business channelConnects the current user with the site's businessDisplay data of the business
Private social channelConnects the current user with one other memberDisplay data of the other member
Group social channelConnects the current user with other members in a chat groupDisplay data of the chat group

See Also

Channel, getChannel(), getChannelList()

Syntax

type DisplayData = {
  image: string
  name: string
  initials: string
}
MEMBERS
?
The properties of an object.
image
string

The image associated with the channel. One of the following:

  • For private social channels, the image associated with the site member's account. If there is no image associated with the account, defaults to the avatar image.
  • For group social channels, the image associated with the chat group.
  • For business channels, image is not currently supported.
name
string
For social channels, the member's name or chat group name. For business channels, the site's display name.
initials
string
Only supported for business channels. Initials of the site's business.

Examples

Get display data about a specific channel

let channelInfo = {
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").getChannel(channelInfo)
  .then((channel) => {
    const displayData = channel.displayData;
  })
  .catch((err) => {
    console.log(err);
  });

/*  Example channel object:
 *
 *   {
 *     "id": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *     "displayData": {
 *       "image": "https://static.wixstatic.com/media/f43338_0f431863800d41f78e515a190c0f9dd7~mv2.png",
 *       "name": "Our Chat Group"
 *     },
 *     "messages":[
 *       {
 *         "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *         "type": "TEXT",
 *         "summary": "Hey, how's it going?",
 *         "participantId":"12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *         "createdAt": "2019-10-27T06:02:12.008Z",
 *         "payload": {
 *           "text": "Hey, how's it going?"
 *         }
 *       }
 *     ]
 *   }
 */

Message

An object that contains information about a chat message.

See Also

onMessageSent(), onMessageReceived()

Syntax

type Message = {
  channelId: string
  type: string
  summary: string
  participantId: string
  createdAt: Date
  payload: MessagePayload
}
MEMBERS
?
The properties of an object.
channelId
string
ID of the channel on which the message was sent.
type
string
Type of message. Currently only TEXT is supported.
summary
string
First 250 characters of the chat message. Currently only text is included in the summary.
participantId
string
The sender's member ID. For a message sent from the site's business, the site owner's member ID.
createdAt
Date
Date and time the message was sent.
payload
Content of the message.

Examples

Get the channel ID and message text when a chat message is sent

$w("#myChatbox").onMessageSent((message) => {
  const channelId = message.channelId;
  const messageText = message.payload.text;
});

/*  Example message object:
 *
 *  {
 *    "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *    "type": "TEXT",
 *    "summary": "Hey, how's it going?",
 *    "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *    "createdAt": "2019-10-27T06:02:12.008Z",
 *    "payload": {
 *      "text": "Hey, how's it going?"
 *    }
 *  }
 */

Get the channel ID and message text when a chat message is received

$w("#myChatbox").onMessageReceived((message) => {
  const channelId = message.channelId;
  const messageText = message.payload.text;
});

/*  Example message object:
 *
 *  {
 *    "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *    "type": "TEXT",
 *    "summary": "Hey, how's it going?",
 *    "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *    "createdAt": "2019-10-27T06:02:12.008Z",
 *    "payload": {
 *      "text": "Hey, how's it going?"
 *    }
 *  }
 */

MessageInfo

An object representing a chat message to be sent.

See Also

sendMessage()

Syntax

type MessageInfo = {
  messageText: string
  channelId: string
}
MEMBERS
?
The properties of an object.
messageText
string
The text to be sent in the message.
channelId(Optional)
string
The ID of the channel over which the message is sent. If empty, message is sent to the site's business.

Examples

Send a message from a site visitor to the site's business

let messageInfo = {
  "messageText": "Hey, how's it going?"
}

$w("#myChatbox").sendMessage(messageInfo)
  .then(() => {
    console.log("Done sending message");
  })
  .catch((err) => {
    console.log(err);
  });

Send a message from a site visitor over a specific channel

let messageInfo = {
  "messageText": "Hey, how's it going?",
  "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k"
}

$w("#myChatbox").sendMessage(messageInfo)
  .then(() => {
    console.log("Done sending message");
  })
  .catch((err) => {
    console.log(err);
  });

MessagePayload

The content of a chat message.

Description

Currently only content of type text is included in the MessagePayload object.

See Also

Message, onMessageSent(), onMessageReceived()

Syntax

type MessagePayload = {
  text: string
}
MEMBERS
?
The properties of an object.
text
string
Text of the chat message.

Examples

Get the channel ID and message text when a chat message is sent

$w("#myChatbox").onMessageSent((message) => {
  const channelId = message.channelId;
  const messageText = message.payload.text;
});

/*  Example message object:
 *
 *  {
 *    "channelId": "23b345b6-c78d-9012-e3f4-567g89h0i01k",
 *    "type": "TEXT",
 *    "summary": "Hey, how's it going?",
 *    "participantId": "12a345b6-e78f-8011-f3f5-567g89h0i12j",
 *    "createdAt": "2019-10-27T06:02:12.008Z",
 *    "payload": {
 *      "text": "Hey, how's it going?"
 *    }
 *  }
 */