Wix Answers Help Center

SDK

Wix Answers SDK Overview

Wix Answers provides several features for running your own code directly within the Wix Answers framework. The code that you run enables you to add or hide elements, change the size, position or color of elements, and so forth. Backoffice SDK: Code run to support agent activities that runs when agents are managing Wix Answer using the Wix Answers App. Help Center SDK: Code run to change the public experience of your Wix Answers Help Center (for users and guests). Widget Client SDK: Code run on the web pages that host a Wix Answers widget to customize the widget. Mobile SDK for iOS: Enable your iOS users to access the Wix Answers widget from inside your application. Mobile SDK for Android: Enable your Android users to access the Wix Answers widget from inside your application. Mobile SDK for React Native: Enable your mobile users to access the Wix Answers widget from inside your React Native application.

Help Center SDK

ImportantImproperly 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 > 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.ImportantExcept where noted, methods must be called only after the SDK is loaded.NoteIf you have specific integration needs not met using the existing SDK, contact us at help@wixanswers.com with your request.MethodsanswersSdk.addListener(eventType:EventType, listener:function)Add an event listener to a Help Center event.Returns: NoneThe event types are as follows:EventDescriptionanswersSdk.events.contactFieldsChangedTriggered when the contact form (default fields or custom fields) changes.answersSdk.events.pageLoadTriggered when the user navigates to a page.For example, to add a listener that runs when the page loads: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:answersSdk.addListener(answersSdk.events.contactFieldsChanged, function (ticketFields) { console.info('Fields changed', ticketFields); }); answersSdk.getCurrentLanguage()Get the currently selected language of the Help Center.Returns: StringFor example: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 objectanswersSdk.getVisiblePageData()Get the data of the current visible page. The data structure depends on the page type.Returns: ObjectFor example:console.log('Page data', answersSdk.getVisiblePageData());answersSdk.getVisiblePageType()Get the type of the current page.Returns: PageTypeFor example:if (answersSdk.getVisiblePageType() === answersSdk.pages.article) { alert('You are inside an article'); }answersSdk.login()Redirect the user to the login page.Returns: NoneanswersSdk.onLoad(listener:function)Run a callback function after the Help Center is loaded.Returns: NoneFor example: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: NoneFor example: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'); } });TipUse 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: NoneExample filters object parameter:{ notHasAnyOfLabelIds: [premiumLabelId] }See Limit Article Scope Dynamically, below, for an example.ImportantYou can call this method before the SDK is loaded. To affect your homepage, this must be called before the SDK is loaded.NoteExcluded 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: NoneExample field object:{ fullname: "Bob Bobson", email: "bob@bobcorp.com", title: "Upgrade Request", description: "some text here", customFields: {} // object containing custom fields }NoteAll fields are optional. Only fields included in the parameters are prefilled.PageType EnumerationThe following page types are available:TypeDescriptionanswersSdk.pages.userProfileanswersSdk.pages.ticketanswersSdk.pages.articleanswersSdk.pages.submitTicketContact pageanswersSdk.pages.categoryanswersSdk.pages.searchResultsanswersSdk.pages.homePageExamplesHere are some examples of customization that can be applied using the SDK.Add a Banner to the Home Pagefunction 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 Articlesvar 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 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 DynamicallyYou might want to filter the content visible to users depending on their status. The following is a simplistic example on how to achieve this.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 UsersIn combination with SSO, you might want to keep your users always logged in to Wix Answers.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(); } });

Backoffice SDK

ImportantImproperly applying customizations with the backoffice SDK can impact the Wix Answers App experience.The Backoffice SDK enables you to add JavaScript code to customize the Wix Answers App, which is used by agents and administrators. You manage this SDK by adding JavaScript to the Custom JS pane on the Backoffice Custom Code page (https://<tenant_subdomain>.wixanswers.com/app/settings/custom-code).You can test the code in your browser console before entering it on the Backoffice Custom Code page.The following are some examples of what you can do using the SDK.NoteIf you have specific integration needs not met using the existing SDK, contact us at help@wixanswers.com with your request.MethodsaddListener(eventType:EventType, listener:function)Add a listener for an event. Different payload are sent for different events.Returns: NoneThe event types are as follows:TypeDescriptionPayloadeventTypes.appLoadedApp LoadedNoneeventTypes.ticketLoadedTicket page loaded{ticket: Ticket object, timeline: Ticket timeline object}eventTypes.ticketWillLoadTicket page is about to be loaded{ticket: Ticket object, timeline: Ticket timeline object}eventTypes.ticketInfoSectionAddedAn info section was added to a ticket??eventTypes.ticketRelationAddedArticle relation added to a ticket{ticket: Ticket, articleIds: [list of article GUIDs]}eventTypes.ticketRepliedAgent replied to a ticket (not internal note){ticket: Ticket, replyContent: string}eventTypes.ticketCustomFieldsUpdatedTicket's custom field value added or modified{ticket: Ticket, customFields: Map of {<field-name>: <value>}}value format varies according to field type.eventTypes.multipleTicketsRepliedAgent replied in bulk to multiple tickets (not internal notes){tickets: [list of ticket objects], replyContent: string}eventTypes.multipleTicketsRelationAddedArticle relation added in bulk to multiple tickets{tickets: [list of ticket objects], articleIds: [list of article GUIDs]}addTicketInfoSection(title:string, HTML:string, isOpen:Boolean)Add information section to the right sidebar when viewing a ticket. Set the third parameter to true to configure that the new section is open by default.Returns: NoneforceSavedRepliesSearchLocale(locale:two-letter locale string)Configure that saved replies are searched only in the specified locale.Returns: NonegetCurrentAgentGet list current agent.Returns: Agent objectinsertHtmlToReplyArea(HTML:string)Append HTML to the reply area without sending the reply.Returns: Nonenotify({content: string})Pop up a UI notification on the bottom right of the screen.Returns: Nonesdk.notify( {'content': 'Something wonderful happened!'} )setTicketPageCustomFieldsFilter(filters:object)Filter custom fields available to select in the custom fields picker. The input is an object, as follows: {    return {        customerFields: [<list of customer custom fields to include>],        companyFields: [<list of company custom fields to include>],        ticketFields: [<list of ticket custom fields to include >]    } }If a parameter is not included, then all fields of that type appear in the custom fields picker. If the parameter is included but it is empty, then no fields of that type appear in the custom fields picker. Returns: NoneanswersBackofficeSdk.setTicketPageCustomFieldsFilter(() => { return { customerFields: ['fn1'], companyFields: ['fn2'], ticketFields: ['fn3'] }; }); setTicketRelatedArticlesFilter(filters:object)Filter articles available to select in the related articles picker.The input is an object, as follows:{    categoryIds: [<list of categories to include if the article matches any of them>],    excludeCategoryIds: [<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: NoneExamplesAdding a Custom Section in the User Information SidebarTo create a custom section in the user's information side bar inside a ticket page, add two methods: answersBackofficeSdk.addListeneranswersBackofficeSdk.addTicketInfoSectionThe first method enables Wix Answers to listen to the "ticket page loaded" event and receive the ticket's data. The second enables Wix Answers to add custom sections to the side bar.Here is an example of a snippet that queries some service, checks if the user that opened the ticket is a "premium" user or not, and adds a custom section to the ticket page side bar.function isPremiumUserByEmail(email, cb) { var isPremium = Math.random() > 0.5; //dummy check, replace this with an AJAX call to an external service, or any other meaningful action cb(isPremium); } function addPremiumUserSidebarItem(isPremium) { answersBackofficeSdk.addTicketInfoSection('Custom Data', '<p>Premium: ' + isPremium + '</p>'); } answersBackofficeSdk.addListener(answersBackofficeSdk.eventTypes.ticketLoaded, function (ticketData) { console.info(ticketData); isPremiumUserByEmail(ticketData.user.email, function (isPremium) { addPremiumUserSidebarItem(isPremium); }); });Test this script by adding it in the developers console and then navigating to a ticket page. To add this to your site, enter the script in the Custom JS pane on the Backoffice Custom Code page.When the script is active, your sidebar includes the following:Hide Widgets from the Settings MenuAdd the function answersBackofficeSdk.setHiddenWidgetIds to make widgets accessible only using a direct link. This is useful if you want to prevent accidental changes to your widget's settings.answersBackofficeSdk.setHiddenWidgetIds([ 'a601657c-d618-be0f-a943-e6181512073f', 'b342347a-1528-4fed-2323-234234ababa2' ]);

Widget Client SDK

ImportantImproperly applying customizations with the widget client SDK can impact the Wix Answers widget experience.The Widget Client SDK enables you to add JavaScript code to customize a Wix Answers widget that appears on your page (see Installing a Widget on Your Website), including the widget icon, tooltip, and badge, general screen appearance, user authentication, and chat. You use this SDK by adding JavaScript on the page on which the widget appears, after the widget is loaded: add the relevant JavaScript to the callback function sent as a parameter to AnswersWidget.onLoaded.You can test the code in your browser console before entering it on your page.The SDK enables you to access various events, such as chat started or ended, and receive the relevant info to add custom functionality.NoteIf you have specific integration needs not met using the existing SDK, contact us at help@wixanswers.com with your request.Methods By SubjectMethodDescriptionPage InteractionAnswersWidget.onLoadedExecute a callback when the widget is loaded.This is the only method available before the widget is loaded. Add all of your other code to the listener configured for this function.AnswersWidget.showDisplay the widget.AnswersWidget.hideHide the widget.AnswersWidget.setOffsetSet the location of the widget on the page, relative to the widget's initial X and Y position.AnswersWidget.onDragEndExecute a callback function immediately after the user finishes dragging the widget.AnswersWidget.openOpen the widget screen.AnswersWidget.onWidgetOpenedExecute a callback when the widget screen is opened.AnswersWidget.closeClose the widget screen.AnswersWidget.onWidgetClosedExecute a callback when the widget screen is closed.AnswersWidget.destroyDestroy the widget.Icon and Tooltip ConfigAnswersWidget.setLauncherIconSvgSet the launcher icon to the passed SVG content string.AnswersWidget.setTooltipConfigSet the contents and delay of the widget tooltip that appears when the page with the widget is first loaded.AnswersWidget.onTooltipClosedExecute a callback when the tooltip is closed.AnswersWidget.setUnreadMessageConfigConfigure the tooltip background, and whether to show the tooltip even when there are no unread messages.Widget ConfigAnswersWidget.addHtmlToHomePageHeaderAdd HTML to the end of header of the widget home page.AnswersWidget.addHtmlToKbHeaderAdd HTML to the end of header of every category, article list, and article pages.AnswersWidget.featuredArticlesSearchDisplay only the featured articles that match a search term.AnswersWidget.setLabelsSet the labels that are automatically added to all new tickets, chats, and callbacks.AnswersWidget.ejectFromElementByIdEject the widget view from a DOM element, by ID.AnswersWidget.injectToElementByIdInject the widget view into a DOM element.AnswersWidget.setCustomFieldsSet custom fields for a chat, ticket, or callback.AnswersWidget.setOverrideTextsOverride texts in the widget.Authentication and Initial ContentsAnswersWidget.addAuthenticationFnAdd an authentication function (make this an authenticated widget).AnswersWidget.fillContactFormPrefill the email contact form with contents.AnswersWidget.identifyUserSet the user's email address, for chat, email, or callbacks.AnswersWidget.goToArticleOpen an article in the widget screen.AnswersWidget.goToCategoryOpen a category in the widget screen.AnswersWidget.goToCallbackOpen the callback contact form in the widget screen.AnswersWidget.goToChatOpen the chat contact form in the widget screen.AnswersWidget.goToContactOpen the email contact form in the widget screen.Chat ConfigAnswersWidget.hasActiveChatConversationGet whether the user started a chat that was not finished and closed.AnswersWidget.onChatMessageReceivedExecute a callback when a chat message is received.AnswersWidget.onChatMessageSentExecute a callback when a chat message is sent.AnswersWidget.onChatStartedExecute a callback when a chat starts.AnswersWidget.sendChatMessageAdd a "bot message" to a chat.Methods ReferenceAnswersWidget.addHtmlToHomePageHeader(HTML:string)Add HTML to the end of header of the widget home page.Returns: NoneFor example, the following shows a home page with an embedded SVG file.AnswersWidget.addHtmlToHomePageHeader(html);AnswersWidget.addHtmlToKbHeader(HTML:string)Add HTML to the end of header of every category, article list, and article pages.Returns: NoneFor example, the following shows a page with a custom header.AnswersWidget.addHtmlToKbHeader(html);AnswersWidget.addAuthenticationFn(authFn:function)Add an authentication function. The function is called with no arguments and must return a Promise that resolves to a token string.To learn about authenticated widgets see here.Returns: NoneAnswersWidget.addAuthenticationFn(authenticationFunction);AnswersWidget.close()Close the widget screen.Returns: NoneAnswersWidget.close()AnswersWidget.destroy()Destroy the widget.Returns: NoneAnswersWidget.destroy()AnswersWidget.ejectFromElementById(DOM-ID:string)Eject the widget view from a DOM element, by ID.Returns: NoneAnswersWidget.ejectFromElementById(DOM_ELEMENT_ID)AnswersWidget.featuredArticlesSearch(searchTerm:string)Display only the featured articles that match the search term. You configure featured articles in the Wix Answers app when configuring the widget. This method enables you to display relevant articles only, based on the page topic (for example).Returns: NoneAnswersWidget.featuredArticlesSearch(searchTerm) // For example AnswersWidget.featuredArticlesSearch("electronics")AnswersWidget.fillContactForm({subject: subject:string, description: description:string})Prepopulate the email contact form with a subject and/or description. Also see AnswersWidget.goToContact.Returns: NoneAnswersWidget.fillContactForm({subject: subject, description: description}) // For example AnswersWidget.fillContactForm({subject: 'This is the subject', description: 'This is description'})AnswersWidget.goToArticle(article:GUID)Open an article in the widget screen.Returns: NoneAnswersWidget.goToArticle(ARTICLE_ID)AnswersWidget.goToCallback()Open the callback contact form in the widget screen.Returns: NoneAnswersWidget.goToCallback()AnswersWidget.goToCategory(category:GUID)Open a category in the widget screen.Returns: NoneAnswersWidget.goToCategory(CATEGORY_ID)AnswersWidget.goToChat()Open the chat contact form in the widget screen.Returns: NoneAnswersWidget.goToChat()AnswersWidget.goToContact()Open the email contact form in the widget screen. Also see AnswersWidget.fillContactForm.Returns: NoneAnswersWidget.goToContact()AnswersWidget.hasActiveChatConversation()Get whether the user started a chat that was not finished and closed. A return of false indicates that no chat was started, or any chats have been closed.Returns: Promise that resolves to a Booleanvar result = await AnswersWidget.hasActiveChatConversation(); // or AnswersWidget.hasActiveChatConversation().then(function(result){ // do something with result })AnswersWidget.hide()Hide the widget.Returns: NoneAnswersWidget.hide()AnswersWidget.identifyUser({name: username:string, email: email-address:string})Set the user's email address, for chat, email, or callbacks.Returns: NoneAnswersWidget.identifyUser({email: 'iknowyouremail@gmail.com'});AnswersWidget.injectToElementById(DOM-ID:string)Inject the widget view into a DOM element. The DOM element must be empty.Returns: NoneAnswersWidget.injectToElementById(DOM_ELEMENT_ID)AnswersWidget.onChatMessageReceived(listener:function)Execute a callback when a chat message is received.Returns: NoneAnswersWidget.onChatMessageReceived(callback);The callback is called with the following parameters:{ messageId: <GUID>, ticketId: <GUID>, agentMessageIdx: <integer>, // The number message from the agent agentId: <GUID> }AnswersWidget.onChatMessageSent(listener:function)Execute a callback when a chat message is sent.Returns: NoneAnswersWidget.onChatMessageSent(callback);The callback is called with the following parameters:{ messageId: <GUID>, ticketId: <GUID>, userMessageIdx: <integer>, // The number message from the user isFile: <Boolean> // Whether the message is a file }AnswersWidget.onChatStarted(listener:function)Execute a callback when a chat starts.Returns: NoneAnswersWidget.onChatStarted(callback);The callback is called with the following parameters:{ ticketId: <GUID> }AnswersWidget.onDragEnd(listener:function)Execute a callback function immediately after the user finishes dragging the widget.Returns: NoneAnswersWidget.onDragEnd(callback)The callback is called with the following parameters:{ x: <integer>, // Target X offset from its initial location, in pixels y: <integer> // Target Y offset from its initial location, in pixels }AnswersWidget.onLoaded(listener:function)Execute a callback when the widget is loaded.This is the only method available before the widget is loaded. Add all of your other code to the listener configured for this function.Returns: Nonewindow.AnswersWidget.onLoaded(function() { window.AnswersWidget.goToArticle('1324-13425-13542-1r4526'); } );AnswersWidget.onTooltipClosed(listener:function)Execute a callback when the tooltip is closed.Returns: NoneAnswersWidget.onTooltipClosed(callback);AnswersWidget.onWidgetClosed(listener:function)Execute a callback when the widget screen is closed.Returns: NoneAnswersWidget.onWidgetClosed(callback);AnswersWidget.onWidgetOpened(listener:function)Execute a callback when the widget screen is opened.Returns: NoneAnswersWidget.onWidgetOpened(callback);AnswersWidget.open()Open the widget screen.Returns: NoneAnswersWidget.open()AnswersWidget.sendChatMessage({content: message:string})Add a "bot message" to a chat.Returns: NoneAnswersWidget.sendChatMessage({content: 'Your message goes here'});AnswersWidget.setCustomFields({field-name:string : value:*, ...})Set custom fields for a chat, ticket, or callback. * The value types depend on the custom field.Returns: NoneAnswersWidget.setCustomFields({firstFieldName: 'first field value', secondFieldName: 'second field value'});AnswersWidget.setLabels([label:GUID, ...])Set the labels that are automatically added to all new tickets, chats, and callbacks.Returns: NoneAnswersWidget.setLabels(["bd948e62-a3fd-4cf0-87f3-ee6a0ae7f3fa","e932c0a3-6e9b-43cf-b3a9-0ae790f6ee6a"])AnswersWidget.setLauncherIconSvg(SVG:string)Set the launcher icon to the passed SVG content string.Returns: NoneAnswersWidget.setLauncherIconSvg(svg)AnswersWidget.setOffset(X-pos:integer,Y-pos:integer)Set the location of the widget on the page, relative to the widget's initial X and Y position. X and Y can be positive or negative.Returns: NoneAnswersWidget.setOffset(300,500)AnswersWidget.setOverrideTexts({text-field-name:string : value:string, ...})Override texts in the widget.You can find the text field names in the Help Center at Settings > New Widgets; select the Help row; select the Advanced tab; in Language Text Settings, select Edit (or navigate to https://<tenant_subdomain>.wixanswers.com/app/settings/widgets/{GUID}/advanced/{locale}/texts).The input structure is a map of field names to values.Returns: NoneAnswersWidget.setOverrideTexts({ "widget-v3.widget-launcher.icon-message": "Hi!", "widget-v3.widget-home.contact-button.contact-title": "Contact Us!" })AnswersWidget.setTooltipConfig(tooltip-text:string, delay-in-seconds:integer)Set the contents and delay of the widget tooltip that appears when the page with the widget is first loaded. The default delay is 0.Returns: NoneAnswersWidget.setTooltipConfig(tt_content,2)AnswersWidget.setUnreadMessageConfig(background-color:string,show-on-no-unread:Boolean)A badge with the unread message count may appear when the user closes the widget when there is an active chat in progress. Use this to configure the tooltip background, and whether to show the tooltip even when there are no unread messages (the default is false}.Returns: NoneAnswersWidget.setUnreadMessageConfig("#ffffff",true)The default background color is #389eec.For example, the closed widget appears as follows if there are no unread messages, and the second argument is set to true.The closed widget appears as follows if there are two unread messages.AnswersWidget.show()Display the widget.Returns: NoneAnswersWidget.show()

Wix Answers Mobile SDK for iOS

The Wix Answers iOS SDK enables your users to access the Wix Answers widget from inside your application. Your users will have access to all of the existing widget features: Live chat KB articles Contact form Request callback and more!Setup Download the library in one of the following ways: Cocoapods - Add pod 'WixAnswersSDK' to your Podfile. Manual download Download the SDK and unzip it. In XCode, drag the unzipped directory to the root of your project. Select project settings and select your app's target. In Frameworks, Libraries and Embedded Content, select Embed Without Signing for the WidgetSDK.framework. Currently, the Wix Answers widget SDK does not officially support anonymous users. Ensure that you enable SSO Authentication in the Advanced tab in the widget settings (at the bottom). To set up your connection to Wix Answers, call the configure method. configure accepts the following arguments: Account name Widget ID An authentication callback - The Wix Answers widget will call this callback to receive a secure token. You must implement this callback to call your server to perform the authentication. See this article for details. The callback will receive an object with a setUserToken that accepts a string. Once you acquire a token for the current user, use that method to set it in the SDK. To find your account name and widget ID, open the Widget configuration page and edit a specific widget in the Wix Answers back office. Copy the information from the URL, for example: https://[ACCOUNT_NAME].wixanswers.com/app/settings/widgets/[WIDGET_ID]/content/enTo call the configure method, add the following code in your application delegate file:Swiftimport WidgetSDK func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { Widget.configure(withAccountName: "myAccountName", widgetId: "myWidgetId", authenticationCallback: userAuthenticationCallback) }Objective C#import "WidgetSDK/Widget.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [Widget configureWithAccountName:@"myAccountName" widgetId:@"myWidgetId" authenticationCallback: ^(AuthResultCallback callback) { [Auth authUser:callback]; }]; }4. You can now open the Widget using:SwiftWidget.open()Objective C[Widget open];Push NotificationsTo receive new chat messages as push notifications: Configure your application to support push notifications, according to Apple's APNS documentation. Export your APNS certificate: open the keychain application on your Mac. Select login at the top left and then My Certificates at the bottom left. Export both the Apple Push Services certificate and the private key to two different files. Run openssl pkcs12 -in [FILENAME].p12 -out [FILENAME].pem -nodes for both the certificate and the private key. Send the results to mobilesdk@wixanswers.com along with your tenant name. Request push notification permissions from the user:Swiftfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge]){ (granted, error) in DispatchQueue.main.async(execute:UIApplication.shared.registerForRemoteNotifications) } }Objective C#import <UserNotifications/UserNotifications.h> - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { UNUserNotificationCenter *notificationCenter = [UNUserNotificationCenter currentNotificationCenter]; [notificationCenter requestAuthorizationWithOptions:(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge) completionHandler:^(BOOL granted, NSError * _Nullable error) { dispatch_async(dispatch_get_main_queue(), ^{ [application registerForRemoteNotifications]; }); }]; }6. Register the device token with Wix Answers.Swiftfunc application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { Widget.setDeviceToken(deviceToken) }Objective C- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [Widget setDeviceToken:deviceToken]; }

Wix Answers Mobile SDK for Android

The Wix Answers Android SDK enables your users to access the Wix Answers widget from inside your application. Your users will have access to all of the existing widget features: Live chat KB articles Contact form Request callback and more!Setup Download the SDK's AAR file from here. Select File > New Module. In the new window, select Import .JAR/.AAR Package and select the AAR file that you downloaded. Ensure that ':wixanswers-sdk' is added in your project level settings.gradle file. In your project level build.gradle file, add the following line in the dependencies block: classpath 'com.google.gms:google-services:4.3.3' Add the following permissions to your AndroidManifest.xml, if they do not already exist: <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.VIBRATE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> Create a Firebase project to handle push notifications (if you don't already have one): Open http://firebase.google.com and create a new project. After you set up your project, create a new Android Application and follow the steps of the wizard. Select Project Settings (top left corner, next to Project Overview). In the Cloud Messaging tab, copy the Server Key field value and send it to mobilesdk@wixanswers.com together with your tenant name. In your app level build.gradle file, in the dependencies block, add the following packages: implementation 'com.google.firebase:firebase-messaging:17.+' implementation project(path: ':wixanswers-sdk') In the same file, add the following line to the end. If it already exists in your build.gradle file, move it to the end (outside the dependencies block): apply plugin: 'com.google.gms.google-services' Sync your project with the Gradle files.Usage In your application class, import the WidgetSDK package: import com.wixanswers.widgetsdk.*; Call the init method in the onCreate method of your application class to set up your connection to Wix Answers. The init method accepts four arguments: The Application instance - this Account name Widget ID An authentication callback - The Wix Answers Android widget will call this callback to receive a secure token. You must implement this callback to call your server to perform the authentication. See this article for details. The callback will receive an object with a setUserToken that accepts a string. Once you acquire a token for the current user, use that method to set it in the SDK. To find your account name and widget ID, open the Widget configuration page and edit a specific widget in the Wix Answers back office. Copy the information from the URL, for example: https://[ACCOUNT_NAME].wixanswers.com/app/settings/widgets/[WIDGET_ID]/content/enTo call the init method, add the following code in your application delegate file:WidgetSDK.init(this, "myAccountName", "myWidgetID", new WidgetSDK.OnWidgetUserTokenRequest() { @Override public void onRequest(final WidgetSDK.OnWidgetUserTokenResponse tokenResponse) { // Authenticator is an example class that Authenticates the current use and retrieves a token new Authenticator(new Authenticator.AsyncResponse() { @Override public void processFinish(String token) { tokenResponse.setUserToken(token); } }).execute(); } });3. Now that the user is authenticated, you can call WidgetSDK.openWidget() to open the Wix Answers Chat interface in a separate Android Activity.Opening Chat From a Push NotificationTo open Chat Activity when a user selects a chat push notification, use the following code (in your onResume Lifecycle method or any place you see fit):if (WidgetSDK.wasAppOpenedFromNotification()) { WidgetSDK.openWidget(); }Listening for New MessagesTo run an action whenever a new chat message arrives (showing a toast or a badge), use the onNewMessage method:WidgetSDK.onNewMessage(new WidgetSDK.OnWidgetNewMessage() { @Override public void onNewMessage(String content) { Log.i("APP", "Received a new chat message:" + content); // TODO: show a Toast // TODO: show a badge } });Running an Action When the SDK Init Phase CompletesTo run an action when the SDK is fully initialized, run the following:WidgetSDK.onInitCompleteRequest(new WidgetSDK.OnInitCompleteRequest() { @Override public void onRequest() { Log.i("SDK", "Init complete!"); } });NoteConfigure the onInitComplete callback before calling WidgetSDK.init.

Wix Answers Mobile SDK for Native App

Wix Answers SDK for Native app enables your users to access the Wix Answers widget from inside your application. Your users will have access to all of the existing widget features: Live chat KB articles Contact form Request callback and more!Getting Started$ npm install react-native-wixanswers-sdk --save$ cd ios && pod installSee the corresponding documentation for additional configuration and options: iOS AndroidNoteThis module does not support Expo.Usageimport WixanswersSdk from 'react-native-wixanswers-sdk'; WixanswersSdk.configure('TENANT_NAME', 'WIDGET_ID', async (setToken) => { const token = await MY_USER_AUTHENTICATION_FUNCTION(); // <-- implement this function to authenticate via your own server setToken(token); }); // after the SDK is configured WixanswersSdk.openWidget();