Namespace object for styling API. This section contains information about styling nanorep widgets and components
1. Add script to your page:
<script src="https://<AccountName>.nanorep.co/web/include.js?sdk=styles"></script>
2. Use one of methods described above to manipulate styles:
<div id="styles-example" style="margin-bottom: 10px;"></div>
<button onclick="nanorep.sdk.styles.set('widgetPrimaryColor', '#f00');">set red as primary color</button>
<button onclick="alert(nanorep.sdk.styles.get('widgetPrimaryColor'));">get primary color value</button>
new nanorep.sdk.Sharing({}, document.getElementById('styles-example'));
set(variableName, value) : void
set(options) : void
Set css variables
variableName: String |
CSS variable name. Check specific section for full list of variables |
value: String |
Value of variable |
options: Object |
Plain key-value object with variableName-value |
<div id="set-example" style="margin-bottom: 10px;"></div>
<button onclick="nanorep.sdk.styles.set('widgetPrimaryColor', getRandomColor());">set random color as two params</button>
<button onclick="nanorep.sdk.styles.set({ widgetPrimaryColor: getRandomColor() });">set random color as options object</button>
new nanorep.sdk.Sharing({}, document.getElementById('set-example'));
get(variableName) : string
Returns current value of specified CSS variable
variableName: String |
CSS variable name. Check specific section for full list of variables |
<button onclick="alert(nanorep.sdk.styles.get('widgetPrimaryColor'));">get primary color value</button>
addCustomStyles(cssCode) : void
Add CSS code which will bre processed by SDK
cssCode: String |
CSS code to be added to SDK |
<div id="addCustomStyles-example" style="margin-bottom: 10px;"></div>
<button onclick="nanorep.sdk.styles.addCustomStyles('ANSWER_HEADER { background:' + getRandomColor() + ' }')">add custom css styles to answer-header</button>
new nanorep.sdk.AnswerList({ answers: [{
title: 'Demo answer',
summary: 'Example content <ul><li>Item 1</li><li>Item 2</li></ul>',
noFeedback: true
}]}, document.getElementById('addCustomStyles-example'));
disable(options) : void
Allows to partially or completely disable built-in styles of the Widget/SDK.
options: Object |
Plain object containing removeAll, useNormalize ... |
options.removeAll: Boolean |
removes all styles of the Widget/SDK from the page (default: true) |
options.useNormalize: Boolean |
enable or disable article content typography normalization styles by remove specific html attribute (default: true) |
options.useStyleScope: Boolean |
same as useNormalize, but remove css code instead of removing attribute (default: true) |
Using useNormalize and useStyleScope is useful only in the case when widget and SDK are using on the page at the same time
<div id="addCustomStyles-disable" style="margin-bottom: 10px;"></div>
<button onclick="nanorep.sdk.styles.disable({ removeAll: true, useNormalize: false, useStyleScope: false })">removeAll</button>
<button onclick="nanorep.sdk.styles.disable({ removeAll: false, useNormalize: false, useStyleScope: true })">remove scoped</button>
new nanorep.sdk.AnswerList({ answers: [{
title: 'Demo answer',
summary: 'Example content <ul><li>Item 1</li><li>Item 2</li></ul>',
noFeedback: true
}]}, document.getElementById('addCustomStyles-disable'));
nanorep.sdk.styles.addCustomStyles('ANSWER_HEADER { background:' + getRandomColor() + ' }')
/* shared css variables which will be used across the components */
:root {
--mainFontFamily: inherit;
--widgetBackgroundColor: #eaeaea;
--widgetPrimaryColor: #0aa0ff;
--widgetTitleBackground: #0aa0ff;
--widgetTitleColor: #fff;
--widgetTitleFontSize: 18px;
--widgetTitleFont: inherit;
--queryFieldBackground: #fff;
--queryFieldBorderColor: #e2e2e2;
--queryFieldShadowColor: rgba(0, 0, 0, 0.07);
--queryFieldPlaceholderColor: #9b9b9b;
--queryFieldTextColor: #3b3b3b;
--queryFieldActiveSuggestionBackground: #eee;
--answerBackgroundColor: #fff;
--answerTitleColor: #4a4a4a;
--answerTitleActiveColor: #0aa0ff;
--answerTitleFontSize: 16px;
--answerTitleFont: inherit;
--answerBodyColor: #6c6c6c;
--answerBodyFont: inherit;
--answerBodyFontSize: 14px;
--answerBodyFontLineHeight: 20px;
--answerBodyLinkColor: #0aa0ff;
--contactFormErrorColor: #f00;
--contactFormCancelColor: #cdcdcd;
--contactFormSubmitColor: #f7c545;
--autolinkBackgroundColor: #0aa0ff;
--autolinkProgressColor: #25c4ff;
--autolinkHoverColor: #66d3ff;
--autolinkCancelColor: #0aa0ff;
--autolinkTextColor: #fff;
--feedbackDialogTitleFontSize: 18px;
--feedbackDialogTitleLineHeight: 21px;
--feedbackThumbsLikeActive: #27d68d;
--feedbackThumbsDislikeActive: #f56e62;
--feedbackThumbsStroke: #4a4a4a;
--feedbackThumbsStrokeHover: #0aa0ff;
--feedbackThumbsStrokeActive: #fff;
--widgetSideOpenerColor: #ffba00;
--widgetSideOverlayColor: #000;
--widgetSideOverlayOpacity: 0.5;
--scrollbarHandleColor: #ccc;
--scrollbarBgColor: #eaeaea;
--shadowBorderColor: #dfdfdf;
--convBotBackground: #e6e6e6;
--convBotTextColor: #4a4a4a;
--convAgentBackground: #ff9801;
--convAgentColor: #fff;
--convUserBackground: #0d4ff7;
--convUserTextColor: #fff;
--convMessageMargin: 15px;
--convMessagePadding: 13px 25px;
--convBubbleRadius: 43px;
--convDateBackground: #e7f4ff;
--convDateColor: #9b9b9b;
--convSystemBackground: #aaa;
--convSystemColor: #fff;
}
{
"QUERY_FIELD_CONTAINER": ".core-search__query-field",
"QUERY_FIELD_INPUT": ".query-field__input",
"QUERY_FIELD_RESET": ".query-field__button--reset",
"QUERY_FIELD_PLACEHOLDER": ".query-field__placeholder",
"QUERY_FIELD_SUGGESTIONS": ".query-field__suggestions",
"QUERY_FIELD_SUGGESTION": ".query-field__suggestion",
"NO_RESULTS_MESSAGE": ".no-results__message",
"ANSWER_LIST": ".answer-list",
"ANSWER_LIST_ANSWER": ".answer-list__answer",
"ANSWER_HEADER": ".answer-list__opener",
"ANSWER_HEADER_TITLE": ".answer-header__title",
"ANSWER_HEADER_TEXT_PARENT": ".answer-header__title-text",
"ANSWER_HEADER_TEXT": ".answer-header__title-text-node",
"ANSWER_BODY": ".answer-body",
"ANSWER_FOOTER": ".answer-list__footer",
"ANSWER_PAGER": ".answer-content__pagination",
"ANSWER_PAGER_PREV": ".answer-content__pager--prev",
"ANSWER_PAGER_NUM": ".answer-content__pager--num",
"ANSWER_PAGER_NEXT": ".answer-content__pager--next",
"ANSWER_PAGER_ACTIVE": ".answer-content__pager--active",
"ATTACHMENT_LINK": ".answer-attachments__link",
"AUTOLINK": ".auto-link__title",
"AUTOLINK_ABORT": ".auto-link__abort",
"CONTACT_FORM": ".contact-form",
"CONTACT_FORM_LABEL": ".contact-form__caption",
"CONTACT_FORM_CANCEL": ".contact-form-buttons__button--cancel",
"CONTACT_FORM_SUBMIT": ".contact-form-buttons__button--submit",
"CONTACT_FORM_STATUS": ".contact-form__status",
"CONTACT_FORM_VALIDATION_ERROR": ".contact-form__error",
"CONTACT_FORM_INLINE": ".answer-content__inline-form",
"LINKED_ARTICLE_BACK": ".core-search__back-link",
"LINK_TO_ANSWER": "a[nanoreplinkid]",
"CHANNELING_BUTTON": ".channeling-bar__button",
"SEARCH_RESULTS_CONTAINER": ".core-search__answer-list",
"FAQ_LISTS_CONTAINER": ".core-search__faq",
"FEEDBACK_SURVEY": ".feedback-survey",
"FEEDBACK_SURVEY_TITLE": ".feedback-survey__title",
"FEEDBACK_SURVEY_THANKS": ".feedback-survey__thanks",
"FEEDBACK_SURVEY_TEXTAREA": ".feedback-dialog__area",
"FEEDBACK_SURVEY_SUBMIT": ".feedback-dialog__button[type=\"submit\"]",
"FEEDBACK_SURVEY_YES": ".feedback-survey__button--yes",
"FEEDBACK_SURVEY_NO": ".feedback-survey__button--no",
"FEEDBACK_THUMBS_DIALOG": ".feedback-dialog",
"FEEDBACK_THUMBS_DIALOG_RADIO": ".feedback-dialog__radio",
"FEEDBACK_THUMBS_DIALOG_LABEL": ".feedback-dialog__label",
"FEEDBACK_THUMBS_DIALOG_SUBMIT": ".feedback-dialog__button[type=\"submit\"]",
"FEEDBACK_THUMBS_DIALOG_CANCEL": ".feedback-dialog__button[type=\"button\"]",
"FEEDBACK_THUMBS_LIKE": ".feedback-thumbs__button--like",
"FEEDBACK_THUMBS_DISLIKE": ".feedback-thumbs__button--dislike",
"PHONE_LINK": ".phone-dialog__link",
"PHONE_TEXT": ".phone-dialog__content",
"PHONE_BUTTON": ".phone-dialog__button",
"SCROLLABLE": ".scrollable",
"SHARING_OPENER": ".sharing__opener",
"SHARING_DROP": ".sharing__drop",
"SHARING_BUTTON_CLIPBOARD": ".sharing__item--clipboard",
"SHARING_BUTTON_EMAIL": ".sharing__item--email",
"SHARING_BUTTON_FACEBOOK": ".sharing__item--facebook",
"SHARING_BUTTON_TWITTER": ".sharing__item--twitter",
"TOOLTIP": ".tooltip",
"TRANSLATION_SWITCHER": ".translation-switcher__checkbox",
"TRANSLATION_SWITCHER_ACTIVE": ".translation-switcher__checkbox--active",
"WIDGET_TITLE": ".widget-side__caption, .widget-floating__title, .widget-mobile__header, .widget-embedded__header",
"WIDGET_CLOSE": ".widget-floating__button--close",
"WIDGET_EXPAND": ".widget-floating__button--increase, .widget-floating__button--decrease",
"WIDGET_COLLAPSE": ".widget-floating__button--collapse",
"WIDGET_FLOATING": "#nanorep-fw",
"WIDGET_EMBEDDED": "#nanorep-ew",
"ROOT": ".__content"
}