Getting Started

You can now customize the look and feel of Support.com Cloud JavaScript SDK to reflect your brand experience across Self-Support Guided Paths and Support Articles. In three easy steps, you can now define the color themes, font family, text and icons in accordance with your branding guidelines.

A basic understanding of HTML and CSS is required. The following three simple steps will get you up and running:

  1. Download Support.com Cloud SDK template CSS file from http://developer.support.com/static/css/template-theme.css
  2. Modify the CSS selectors to reflect your brand
    1. The template CSS file consists of CSS selectors where each line defines one property of a HTML element
    2. For example, the CSS selectors in the line ‘#search-bar-container #search-bar .search-field’ can be used to control the font type and color theme of the search bar
    3. You can remove the CSS selectors for which you want to retain the default theme and keep only the modified ones
    4. Do remember to save the file once you have completed your changes.
  3. Upload the CSS file in Support.com Cloud
    1. If you have trouble uploading the CSS file, reach out to Support.com Customer Support at https://help.support.com/
    2. After logging into Support.com Cloud, Navigate to Global under the Admin tab
    3. Under Themes Customization, click on “Upload Theme File” and select the file

You are all set now. Refresh your support page to see the changes.

Advanced Options

If you own multiple websites, then you most likely want your customers have different brand experiences across these websites. You can now achieve this using a single Support.com Cloud account and with some basic JavaScript skills.

Follow the steps below for each of your websites:

  1. Download Support.com Cloud SDK template CSS file from http://developer.support.com/static/css/template-theme.css
  2. Modify the CSS selectors to reflect your brand on the website
  3. Upload the modified CSS file to your website
  4. Use the JavaScript API to integrate Support.com Cloud SDK in your website
  5. Specify the URL to the modified CSS file using the JavaScript API setCustomizationOptions()
    1. Example: NexusConnectSDK.setCustomizationOptions({ "themeUrl":"https://yoursite.com/assets/css/your-theme.css" });
    2. For details and troubleshooting, visit http://developer.support.com/nexusconnectsdkjavascript.html


You are all set. Do not forget to repeat these steps for each website.