Introduction

The WixComments element is a customizable widget that allows site visitors to leave feedback in comment threads. A comment thread is a collection of comments and replies that form a heirarchical structure.

When a new WixComments element is dropped onto the page, its comments are associated with that page by default.

Did this help?

customClassList


customClassListCustomClassListRead-only

Note: This standard element property is not relevant for this WixComments element.

This property is only available to Wix Studio users.

You can use this property to manipulate the custom CSS classes of an element. For example, you can add a custom class to an element or replace an existing class with a new custom class.

Custom classes are those that you create on your site, not the predefined global classes that are provided for each element.

Note: For more information, see Styling Elements with CSS and the MDN CSS reference docs.

0
Did this help?

locked


lockedbooleanRead-only

Indicates whether the WixComments element is locked.

If the WixComments element is locked, site visitors can't add new comments or edit existing comments.

To lock or unlock the element, use the lock() and unlock() functions.

JavaScript
let isLocked = $w("#myCommentsWidget").locked; // false
Did this help?

deleted


deletedbooleanRead-only

Indicates if an element was temporarily deleted from the DOM. Use the restore function to restore the deleted element.

If deleted is true, the element is not in the current DOM.

If deleted is false the element is in the current DOM.

Notes:

  • An element whose deleted status is true can be edited.
  • In Wix Studio, an element whose deleted status is false will not be displayed if the element has been set to Hide.
JavaScript
const isDeleted = $w("#myElement").deleted; // true
Did this help?

global


globalbooleanRead-only

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

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

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

Get whether an element is displayed on all pages
JavaScript
let isGlobal = $w("#myElement").global; // false
Did this help?

id


idstringRead-only

Gets the element's ID.

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.

Get the ID
JavaScript
let myId = $w("#myElement").id; // "myElement"
Did this help?

parent


parentNodeRead-only

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.

Get the parent element and the parent's ID
JavaScript
let parentElement = $w("#myElement").parent; let parentId = parentElement.id; // "page1"
Did this help?

rendered


renderedbooleanRead-only

Indicates if an element is currently in the DOM structure.

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.

Get an element's rendered status
JavaScript
let isRendered = $w("#myElement").rendered; // true
Did this help?

type


typestringRead-only

Gets the element's type.

Possible values include:

  • $w.TextInput
  • $w.TextBox
  • $w.RichTextBox
  • $w.RadioButtonGroup
  • $w.CheckboxGroup
  • $w.Dropdown
  • $w.SelectionTags
  • $w.Slider
  • $w.DatePicker
  • $w.UploadButton
  • $w.RatingsInput
  • $w.AddressInput
  • $w.Switch
  • $w.SignatureInput
  • $w.Captcha
Get the element's type
JavaScript
let myType = $w("#myElement").type; // "$w.Type"
Did this help?

closeCommentBoxes( )


Closes all comment boxes on the WixComments element.

The closeCommentBoxes() function closes all open comment boxes.

A comment box is the the input area where visitors can write comments.

There can be up to two comment boxes on the WixComments element. They are displayed at the top and bottom of the element.

Method Declaration
Copy
function closeCommentBoxes(): Promise<void>;
Request
This method does not take any parameters
Close all comment boxes
JavaScript
$w("#myCommentsWidget").closeCommentBoxes();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

lock( )


Locks the WixComments element.

The lock() function locks the WixComments element, which blocks visitors from creating or editing comments. It sets the locked property to true.

Method Declaration
Copy
function lock(): void;
Request
This method does not take any parameters
JavaScript
$w("#myCommentsWidget").lock();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onCommentCountChange( )


Adds an event handler that runs when a comment is added or removed from the WixComments element.

The onCommentCountChange() function adds an event handler that runs when a comment is added or removed from the WixComments element.

Method Declaration
Copy
function onCommentCountChange(callback: function): Promise<void>;
Method Parameters
callbackfunctionRequired

callback(count: number): void The callback function that runs when a comment is added or removed from the WixComments element.

JavaScript
$w("#myCommentsWidget").onCommentCountChange((count) => { console.log(`Comments count: ${count}`); });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onCommentCreate( )


Adds an event handler that runs when a new comment is created in the WixComments element.

The onCommentCreate() function sets a callback function that is called when a new comment is created in the WixComments element.

Method Declaration
Copy
function onCommentCreate(callback: function): Promise<void>;
Method Parameters
callbackfunctionRequired

callback(comment: WidgetComment): void The callback function that is called when a new comment is created.

Add an event handler for when a new comment is created
JavaScript
$w("#myCommentsWidget").onCommentCreate((widgetComment) => { console.log(widgetComment); });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

openNearestCommentBox( )


Opens the comment box closest to the element that called the function.

The openNearestCommentBox() function opens the comment box that is closest to the element that called the function.

A comment box is the the input area where visitors can write a comment.

There can be up to two comment boxes on the WixComments element. They are displayed at the top and bottom of the element.

Method Declaration
Copy
function openNearestCommentBox(
  commentBoxOptions: CommentBoxOptions,
): Promise<void>;
Method Parameters
commentBoxOptionsCommentBoxOptions

Effect options for opening the comment box.

JavaScript
$w("#myCommentsWidget").openNearestCommentBox();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

setResourceId( )


Retrieves a comment thread with a unique resource ID, or creates one if it doesn't exist.

The setResourceId() function replaces the comments thread in the WixComments element with a different comment thread. You can create new comment threads and transition between threads by calling the function.

Each comment thread is referenced by a unique resource ID that is arbitrarily chosen when the function is first called on that thread.

Method Declaration
Copy
function setResourceId(resourceId: string): void;
Method Parameters
resourceIdstringRequired

The unique resource ID for the new comment thread.

JavaScript
$w("#myCommentsWidget").setResourceId("thread-2");
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

unlock( )


Unlocks the WixComments element.

The unlock() function unlocks the WixComments element, restoring comment functionality. It sets the locked property to false.

Method Declaration
Copy
function unlock(): void;
Request
This method does not take any parameters
JavaScript
$w("myCommentsWidget").unlock();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

delete( )


Deletes an element from the DOM. This is a temporary deletion. Use restore to restore the deleted element.

SEO crawlers cannot find content in an element whose deleted status is true. Content in an element that is in hidden status can be found by crawlers.

Note: An element whose deleted status is true can be edited.

The delete() function returns a Promise that is resolved when the element's deleted property has been set to true.

Method Declaration
Copy
function delete(): Promise<void>
Request
This method does not take any parameters
JavaScript
$w("#myElement").delete();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onMouseIn( )


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

Method Declaration
Copy
function onMouseIn(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved onto the element.

Returns
Return Type:Element
Get the mouse event info when the mouse enters an element
JavaScript
$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 });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onMouseOut( )


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

Method Declaration
Copy
function onMouseOut(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: MouseEvent): void The name of the function or the function expression to run when the pointer is moved off of the element.

Returns
Return Type:Element
Get the mouse event info when the mouse exits an element
JavaScript
$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 });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onViewportEnter( )


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.

Method Declaration
Copy
function onViewportEnter(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element enters the viewport.

Returns
Return Type:Element
Get the ID of the element that has entered the viewport
JavaScript
$w("#myElement").onViewportEnter((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

onViewportLeave( )


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.

Method Declaration
Copy
function onViewportLeave(handler: function): Element;
Method Parameters
handlerfunctionRequired

handler(event: Event): void The name of the function or the function expression to run when the element leaves the viewport.

Returns
Return Type:Element
Get the ID of the element that has left the viewport
JavaScript
$w("#myElement").onViewportLeave((event) => { let targetId = event.target.id; // "myElement" });
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

restore( )


Restores a deleted element to the DOM.

The restore() function returns a Promise that is resolved when the element's deleted property has been set to false. See the delete function.

Method Declaration
Copy
function restore(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").restore();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?

scrollTo( )


Scrolls the page to the top of the element using an animation.

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

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

Tip: Use the wix-window-frontend scrollTo() function to scroll directly to an element, and also disable the animation. To get the coordinates for scrolling, display the Wix Editor Toolbar. In the Editor, move the cursor to the top-left pixel where you want the page to scroll to. The X and Y axis Position values show the coordinates.

Note: To use scrollTo() with a header element, the Header Scroll Setting must be set to Scrolls with site. To scroll to the header with other settings, use the wix-window-frontend scrollTo() function.

Method Declaration
Copy
function scrollTo(): Promise<void>;
Request
This method does not take any parameters
JavaScript
$w("#myElement").scrollTo();
Errors

This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.

Did this help?