Help Center SDK

New Help Center
This article applies to the new Help Center (Nov 2020). For the old Help Center SDK, see here.
Important
Improperly applying customizations with the Help Center SDK can impact the Wix Answers Help Center experience.
Because our Help Center is a single page application, it can be challenging to add customization based on the visible page.

The Help Center SDK enables you to add JavaScript code to customize the Wix Help Center, which is used by guests and users. You manage this SDK by adding JavaScript on the Custom Scripts page (Settings > Support Channels > Help Center > Advanced (or navigate to https://<tenant_subdomain>.wixanswers.com/app/settings/helpcenter/advanced) and select Custom Scripts). You can test the code in your browser console before entering it on the Custom Scripts page.

The SDK enables you to access various events such as page load and receive the relevant info to add custom functionality.
Note
If you have specific integration needs not met using the existing SDK, contact us at help@wixanswers.com with your request.

Methods

onContactFormFieldsChanged(listener:function(event:Event, page_data:page data structure))

Run a callback function after a change is made to a value on the Contact page. The callback is invoked immediately after any character is entered or deleted, or option is selected.

page_data returns a field fieldsData, a ContactPageData structure. See ContactPageData Structure.

The event is sent by the browser; for example, see https://developer.mozilla.org/en-US/docs/Web/API/Event .

Returns: None

For example:
1
2
3
4
5
Answers.onContactFormFieldsChanged(function (event, data) {
    if (data.fieldsData.email === 'bob@wix.com' ) {
       console.log('Contact form has changed!', data);   
    }
});

onPageLoad(listener:function(event:Event, page_data:{'pageType':PageType, <page dependent parameters ...>}))

Run a callback function after a page  is loaded.

event is sent by the browser; for example, see https://developer.mozilla.org/en-US/docs/Web/API/Event .

page_data includes:

If the page is not listed  above, no additional data is returned for that page.

Returns: None

For example:
1
2
3
4
5
6
7
Answers.onPageLoad(function (event, data) {
  // Page loaded! All dom elements are visible now.
    if (data.pageType === 10) {
       console.log('Contact form loaded!');
       console.log('This is the field data', data.fieldsData);
    }
});

setContactFormData(fieldsData:ContactPageData)

Set or reset the values on the Contact page.

For ContactPageData, see ContactPageData Structure.

Returns: None

For example:
1
2
3
4
5
6
7
Answers.setContactFormData({
    fullname: "Bob Bobson",
    email: "bob@bobcorp.com",
    title: "Upgrade Request",
    description: "some text here",
    customFields: {} // object containing custom fields
});

setContentFilters(filters:object)

Set content scope dynamically. For more information, see content scope settings. The filters can contain several options.

The input is an object, as follows:

{
    categoryIds: [<list of categories to include if the article matches any of them>],
    excludedCategoryIds: [<list of categories to exclude if the article matches any of them>],
    hasAllOfLabelIds: [<list of labels to include if the article matches all of them>],
    hasAnyOfLabelIds:  [<list of labels to include if the article matches any of them>],
    notHasAnyOfLabelIds: [<list of labels to exclude if the article matches any of them>],
}

Returns: None

Example filters object parameter:
1
2
3
{
    notHasAnyOfLabelIds: [premiumLabelId]
}
Important
You can call this method before the SDK is loaded. To affect your homepage, this must be called before the SDK is loaded.
Note
Excluded content is not visible in the Help Center, and is not indexed by search engines, but is still visible by users arriving using a direct URL.
As an example, you might want to filter the content visible to users depending on their status. The following is a simplistic example on how to achieve this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var premiumLabelId = '843487b1-e98b-4d0d-ba93-666c4339c23e';
var freeLabelId = '143487b1-e44b-4444-ba93-666c4339c234';

/* This might do an HTTPS request to your server assuming your Help Center is under the same domain. You can check this using an auth cookie. */
checkServiceForUserStatus()
    .then(function (userType) {
        if (userType === 'free') {
            // if the user is free, exclude all articles that have the "premium" label.
            Answers.setContentFilters({
                notHasAnyOfLabelIds: [premiumLabelId]
            });
        } else {
            // And vice versa
            Answers.setContentFilters({
                notHasAnyOfLabelIds: [freeLabelId]
            });
        }
    });

setCustomFieldsConfiguration(dependency_list:list of trees of custom fields and their dependencies)

Set custom fields to appear on the Contact page, as well as any field dependencies. The dependencies enable you to define which custom fields appear on the Contact page depending on the values selected in other custom fields on this page.

If you do not call this method, all custom fields appear on the Contact page without any dependencies. If you call this method, only the specified fields appear on the page.

The input is a list of structures, each one defining a field and optionally its dependencies. To have a field appear in all cases, not as a dependency, it must be at the top level in one of these structures. To have it appear as a dependency, it must be within a dependentFields sublevel.

Dependencies can be cascaded; in other words, you can configure field-B to appear only if a certain value is selected for field-A and for field-C to appear only if a certain value is selected for field-B.
Note
Each custom field MUST NOT appear more than once. In other words, each field must a) not appear, b) be a top level field, or c) be a dependent field of exactly one other field.
Structure:

{
Display the following field on the Contact form
    id: custom field name (string)          For example, field-A
    required: Boolean                          Overrides mandatory setting defined for field-A
    dependentFields: {
The list of other fields to display on the page depending on the value selected for field-A
        <value>: [{
            id: custom field name (string)   For example, field-B
            required: Boolean                   Overrides mandatory setting defined for field-B
            dependentFields: { ... }
        }, ...],
        ...
    }
}

For example, if <value> is 5, then field-B appears on the page only if 5 if selected for the value in field-A. If the value is changed to something other than 5, the dependent fields are rehidden. Values in hidden fields are not submitted with the contact form.

If you run this before the page is loaded, it will take effect when the page is loaded.

For the list of form fields, see Customizing Your Help Center's Contact Page. To find custom field names, see Finding a Custom Field Name.

Returns: None

In the following example, the custom field OS Type appears on the page. When the user selects Windows as a value for this field, the field Windows Version appears. When the user selects XP as a value for the Windows Version field, the field Patch Level appears. None of the fields are mandatory fields.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Answers.setCustomFieldsConfiguration([
  {
    id: 'os-type',
    required: false,
    dependentFields: {
      Windows: [
        {
          id: 'windows-version',
          required: false,
          dependentFields: {
            XP: [
              {
                id: 'patch-level',
                required: false,
              }
            ]
          }
        }
      ]
    }
  }
]);

setShowCCField(showField:Boolean)

Set whether to display a button Add Cc on the Contact page. The user can click the button to display a field in which they can enter up to ten email addresses.

Returns: None

For example:
1
Answers.setShowCCField(true);

Data, Enumerations, and Structures

currentUser

Get the User object of the current user. For example:
1
2
3
4
5
Answers.onPageLoad(function (event, data) {
 if (Answers.currentUser !== undefined) {
  console.log('Logged into HC with user email: ' + Answers.currentUser.email);
 }
});

currentPage

Get the integer value of the current page type, a PageType value. See PageType Enumeration.

currentLanguage

Get the current language of the Helpcenter.
You can find all the supported languages and their codes here .
1
2
3
4
5
Answers.onPageLoad(function (event, data) {
 if(Answers.currentLanguage === 'en') {
  console.log('HC is in english');
 }
});

PageType Enumeration

The following page types are available:
Number
Description
0
Home page
10
Contact page
20
Article page
21
Known issue page
22
Feature request page
30
Top level category page listing categories
31
Category or subcategory page listing articles
32
Category page listing subcategories
50
Search results page
100
Error page
1000
Your user profile page
1100
Ticket page

ContactPageData Structure

When sending or receiving the contents of the form on the Contact page, the structure is as follows. "?" indicates an optional field.

To find custom field names, see Finding a Custom Field Name. Custom field values may be: string, number, Boolean, array, or Date.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 fullname?: string;    // User's full name (optional)
 email?: string;     // User's email address (optional)
 title: string;     // Contact form Subject field
 description: string;   // Contact form block text field
 customFields: [     // Custom fields. The array is empty
            // if there are no custom fields.
  {
   'field-name-1': 'val1',
    'field-name-2': 'val2', ...
  }
 ];
   attachments?: [     // Attachments (optional)
  {name:'name of attachment 1', url:'URL to attachment 1'},
  {name:'name of attachment 2', url:'URL to attachment 2'}, ...
 ];
};
IN THIS ARTICLE