Help Center SDK

Old Help Center
This article applies to the old Help Center (before Nov 2020). For the new 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 and select Custom Scripts; or navigate to https://<tenant_subdomain>.wixanswers.com/app/settings/helpcenter/advanced/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.
Important
Except where noted, methods must be called only after the SDK is loaded.
Note
If you have specific integration needs not met using the existing SDK, contact us at help@wixanswers.com with your request.

Methods

answersSdk.addListener(eventType:EventType, listener:function)

Add an event listener to a Help Center event.

Returns: None

The event types are as follows:
Event
Description
answersSdk.events.contactFieldsChanged
Triggered when the contact form (default fields or custom fields) changes.
answersSdk.events.pageLoad
Triggered when the user navigates to a page.
For example, to add a listener that runs when the page loads:
1
2
3
4
5
answersSdk.addListener(answersSdk.events.pageLoad, function (data) {
    if (data.pageType === answersSdk.pages.homePage) {
       console.log('Home page has loaded!');   
    };
});
To add a listener that runs when the contact form (default fields or custom fields) changes:
1
2
3
answersSdk.addListener(answersSdk.events.contactFieldsChanged, function (ticketFields) {
 console.info('Fields changed', ticketFields);
});

answersSdk.getCurrentLanguage()

Get the currently selected language of the Help Center.

Returns: String
For example:
1
2
3
if (answersSdk.getCurrentLanguage() === 'fr') {
  alert('You are viewing this page in French!');   
}

answersSdk.getCurrentUser()

Get the logged in user object, or null if the user is not logged in.

Returns: User object

answersSdk.getVisiblePageData()

Get the data of the current visible page. The data structure depends on the page type.

Returns: Object
For example:
1
console.log('Page data', answersSdk.getVisiblePageData());

answersSdk.getVisiblePageType()

Get the type of the current page.

Returns: PageType
For example:
1
2
3
if (answersSdk.getVisiblePageType() === answersSdk.pages.article) {
  alert('You are inside an article');
}

answersSdk.login()

Redirect the user to the login page.

Returns: None

answersSdk.onLoad(listener:function)

Run a callback function after the Help Center is loaded.

Returns: None

For example:
1
2
3
4
5
answersSdk.onLoad(function () {
  // Answers has loaded! we can assume all dom
  // elements are visible now
  alert('Answers is fully loaded!');  
});

answersSdk.onUserLoaded(listener:function)

Run a callback function after the user has loaded. If there is a user session, the callback function is passed the User object. Otherwise, the function is called with no parameters.

Returns: None

For example:
1
2
3
4
5
6
7
8
answersSdk.onUserLoaded(function (user) {
  // Current user is now available.
  if (user) {
    console.info('A user is logged in!', user);   
  } else {
    console.info('This is an anonymous visit');
  }
});
Tip
Use this combined with setContentFilters to control content based on attributes of the logged in user.

answersSdk.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]
}
See Limit Article Scope Dynamically, below, for an example.
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.

answersSdk.setTicketFields(fields:object)

Pre-fill contact forms with data. This applies to both the contact page and the contact form that appears in the article page.

Returns: None

Example field object:
1
2
3
4
5
6
7
{
    fullname: "Bob Bobson",
    email: "bob@bobcorp.com",
    title: "Upgrade Request",
    description: "some text here",
    customFields: {} // object containing custom fields
}
Note
All fields are optional. Only fields included in the parameters are prefilled.

PageType Enumeration

The following page types are available:
Type
Description
answersSdk.pages.userProfile

answersSdk.pages.ticket

answersSdk.pages.article

answersSdk.pages.submitTicket
Contact page
answersSdk.pages.category

answersSdk.pages.searchResults

answersSdk.pages.homePage

Examples

Here are some examples of customization that can be applied using the SDK.

Add a Banner to the Home Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addBanner() {
 var bannerHtml = '<marquee><h3>Welcome to our Help Center</h3><p>We hope you enjoy it!</p></marquee>';
 document.querySelector('hero').insertAdjacentHTML('afterend', bannerHtml);
}

answersSdk.onLoad(function () {
    // Listen to the page event to ensure that if the user navigates back to the home page it will render the banner again.
 answersSdk.addListener(answersSdk.events.pageLoad, function (data) {

  if (data.pageType === answersSdk.pages.homePage) {
   addBanner();
  }
 });
});

Show Alert on Specific Articles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var specialArticleIds = [
 '1ad262da-d909-11e7-9296-cec278b6b50a',
 '1ad26578-d909-11e7-9296-cec278b6b50a',
 '1ad268de-d909-11e7-9296-cec278b6b50a',
 '1ad26a28-d909-11e7-9296-cec278b6b50a'
];

answersSdk.onLoad(function () {
 answersSdk.addListener(answersSdk.events.pageLoad, function (eventData) {

  if (eventData.pageType === answersSdk.pages.article) {
   var isSpecialArticle = specialArticleIds.indexOf(answersSdk.getVisiblePageItemId()) !== -1;
   if (isSpecialArticle) {
    alert('Hi there! You just found one of our special articles');
   }
  }
 });
});

Hide Components on Specific Articles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function hideComponents() {
    $('.search-box').hide(); // hides search
    $('.breadcrumbs').hide(); // hides breadcrumbs
}

answersSdk.onLoad(function () {
  var articleIds = [
   '1ad262da-d909-11e7-9296-cec278b6b50a',
   '1ad26578-d909-11e7-9296-cec278b6b50b',
   '1ad268de-d909-11e7-9296-cec278b6b50c',
   '1ad26a28-d909-11e7-9296-cec278b6b50d'
  ];

 answersSdk.addListener(answersSdk.events.pageLoad, function (eventData) {

  if (eventData.pageType === answersSdk.pages.article) {
   var shouldHideComponents = articleIds.indexOf(answersSdk.getVisiblePageItemId()) !== -1;
   if (shouldHideComponents) {
    hideComponents();
   }
  }
 });
});

Limit Article Scope Dynamically

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
19
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.
            answersSdk.setContentFilters({
                notHasAnyOfLabelIds: [premiumLabelId]
            });
        } else {
            // And vice versa
            answersSdk.setContentFilters({
                notHasAnyOfLabelIds: [freeLabelId]
            });
        }
    });

Auto Log In Users

In combination with SSO, you might want to keep your users always logged in to Wix Answers.
1
2
3
4
5
6
answersSdk.onLoad(function () {
    if (!answersSdk.getCurrentAgent()) {
      // You might want to check if the user is logged in by querying a client-side cookie or calling an API.
      answersSdk.login();   
    }
});
IN THIS ARTICLE