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.
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.
let isLocked = $w("#myCommentsWidget").locked; // false
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:
deleted
status is true
can be edited.deleted
status is false
will not be displayed if the element has been set to Hide.const isDeleted = $w("#myElement").deleted; // true
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.
let isGlobal = $w("#myElement").global; // false
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.
let myId = $w("#myElement").id; // "myElement"
let parentElement = $w("#myElement").parent;
let parentId = parentElement.id; // "page1"
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.
let isRendered = $w("#myElement").rendered; // true
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
let myType = $w("#myElement").type; // "$w.Type"
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.
function closeCommentBoxes(): Promise<void>;
$w("#myCommentsWidget").closeCommentBoxes();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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
.
function lock(): void;
$w("#myCommentsWidget").lock();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onCommentCountChange(callback: function): Promise<void>;
callback(count: number): void
The callback function that runs when a comment is added or removed from the WixComments
element.
$w("#myCommentsWidget").onCommentCountChange((count) => {
console.log(`Comments count: ${count}`);
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onCommentCreate(callback: function): Promise<void>;
callback(comment: WidgetComment): void
The callback function that is called when a new comment is created.
$w("#myCommentsWidget").onCommentCreate((widgetComment) => {
console.log(widgetComment);
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function openNearestCommentBox(
commentBoxOptions: CommentBoxOptions,
): Promise<void>;
Effect options for opening the comment box.
$w("#myCommentsWidget").openNearestCommentBox();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function setResourceId(resourceId: string): void;
The unique resource ID for the new comment thread.
$w("#myCommentsWidget").setResourceId("thread-2");
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Unlocks the WixComments
element.
The unlock()
function unlocks the WixComments
element, restoring comment functionality. It sets the locked
property to false
.
function unlock(): void;
$w("myCommentsWidget").unlock();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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
.
function delete(): Promise<void>
$w("#myElement").delete();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Adds an event handler that runs when the pointer is moved onto the element.
function onMouseIn(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved onto the
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
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
Adds an event handler that runs when the pointer is moved off of the element.
function onMouseOut(handler: function): Element;
handler(event: MouseEvent): void
The name of the function or
the function expression to run when the pointer is moved off of
the 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
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onViewportEnter(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element enters the viewport.
$w("#myElement").onViewportEnter((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function onViewportLeave(handler: function): Element;
handler(event: Event): void
The name of the function or
the function expression to run when the element leaves the viewport.
$w("#myElement").onViewportLeave((event) => {
let targetId = event.target.id; // "myElement"
});
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
$w("#myElement").restore();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.
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.
function scrollTo(): Promise<void>;
$w("#myElement").scrollTo();
This method doesn’t return any custom errors, but may return standard errors. Learn more about standard Wix errors.