Hosting SDK
This article explains the steps to host the SDK.
Overview
Gainsight PX is SOC-2 Type-II compliant and takes security measures to protect access to the code or data. If hosting the SDK is still a security requirement for your organization, this document will walk you through the process.
For more information on how to proxy the traffic with your own CNAME, which is not required for hosting, read the Enable PX Tracking with Proxy Server article from the Additional Resources section.
Steps to Host the SDK
The process to host the SDK comprises of the following two steps:
Host the JS Files and CSS
This first step is to host the JS and CSS file, depending on the version you wish to use:
Host Latest SDK Version
To use the most latest SDK version provided by Gainsight, use the below URLs. To use any other/specific version, refer to the Host A Specific SDK Version section instead.
| File | US Path | EU Path | Description | Variables |
|---|---|---|---|---|
| SDK |
https://web-sdk.aptrinsic.com/api/aptrinsic.js https://web-sdk.aptrinsic.com/api/aptrinsic.js?a=AP-UPDATE_KEY-2 |
https://web-sdk-eu.aptrinsic.com/api/aptrinsic.js https://web-sdk-eu.aptrinsic.com/api/aptrinsic.js?a=AP-UPDATE_KEY-2 |
You require the Product KEY if you need to fetch content from Gainsight PX before hosting. | URL (For more information, refer to the screenshot below this table) |
| CSS |
https://web-sdk-eu.aptrinsic.com/style.css https://web-sdk-eu.aptrinsic.com/style.css?a=AP-UPDATE_KEY-2 |
You require the Product KEY if you need to fetch content from Gainsight PX before hosting. |
cssFileEndpoint |
|
| Widget | https://web-sdk.aptrinsic.com/widget/aptrinsic-widget.js | https://web-sdk-eu.aptrinsic.com/widget/aptrinsic-widget.js | Key is not required | widgetFileEndpoint (Refer to the Tag Snippet Example) |
| Badge icons |
The following file paths are branched off the root https://web-sdk.aptrinsic.com /images/badge/types/announce.svg /images/badge/types/bulb.svg /images/badge/types/cap.svg /images/badge/types/exclam.svg /images/badge/types/question.svg /images/badge/types/flag.svg /images/badge/types/guide.svg /images/badge/types/arrow.svg /images/badge/types/badge.svg /images/badge/types/check.svg /images/badge/types/cross.svg /images/badge/types/dash.svg /images/badge/types/feedback.svg /images/badge/types/info.svg /images/badge/types/nps.svg /images/badge/types/star.svg /images/badge/types/tooltip.svg |
|
The following is an example of the snippet while using the most latest SDK version:
<script type="text/javascript">
(function(n,t,a,e,co){var i="aptrinsic";n[i]=n[i]||function() {
(n[i].q=n[i].q||[]).push(arguments)},n[i].p=e;n[i].c=co;
var r=t.createElement("script");r.async=!0,r.src=a+"?a="+e;
var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c)
})
(window,document,"https://your.domain.com/api/aptrinsic.js","AP-ZZZZZZZZ-2");
</script>
Host A Specific SDK Version
If your organization uses SDK versioning and you choose to use a specific SDK version, perform the following steps:
- Use the following URL https://cdnjs-web-sdk.aptrinsic.com/web-sdk/<APP-VERSION>/api/aptrinsic.js
- Replace <APP-VERSION> with the applicable SDK version. Click here to learn more about the version number.
Note: Configuration using a traffic proxy is not supported when you use a specific SDK version. For more information on using a proxy server, refer to the Enable PX Tracking with Proxy Server article.
Here is an example of the snippet while using a specific SDK version:
<script type="text/javascript">
(function(n,t,a,e,co){var i="aptrinsic";n[i]=n[i]||function() {
(n[i].q=n[i].q||[]).push(arguments)},n[i].p=e;n[i].c=co;
var r=t.createElement("script");r.async=!0,r.src=a+"?a="+e;
var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c)
})
(window,document,"https://cdnjs-web-sdk.aptrinsic.com/web-sdk/0.54.0/api/aptrinsic.js","AP-ZZZZZZZZ-2");
</script>
Override the SDK Path
Once the SDK file is hosted, the next step is to overide the SDK path tag and override the Content Endpoint settings.
Note: Gainsight PX SDK will try to fetch relevant assets such as JS/CSS unless you override the cssFileEndpoint and widgetFileEndpoint properties.
To override the path:
- Update the domain with the new host
- Pass the setting to the SDK via cssFileEndpoint , widgetFileEndpoint, and contentProxyDomain.
- Update the product KEY.
The following is an example of the snippet while using the most latest SDK version:
{
"cssFileEndpoint":"https://web-sdk.aptrinsic.com/style.css" ,
"widgetFileEndpoint":"https://web-sdk.aptrinsic.com/widget/aptrinsic-widget.js"
"contentProxyDomain":"https://your.domain.com"
}
The following is an example of the snippet while using a specific SDK version:
{
"cssFileEndpoint":"https://cdnjs-web-sdk.aptrinsic.com/web-sdk/0.54.0/style.css" ,
"widgetFileEndpoint":"https://cdnjs-web-sdk.aptrinsic.com/web-sdk/0.54.0/widget/aptrinsic-widget.js"
"contentProxyDomain":"https://your.domain.com"
}
Subresource Integrity (SRI) for PX SDK
Subresource Integrity (SRI) is a security feature that allows browsers to confirm that fetched resources (like JavaScript files or stylesheets) remain unaltered. It ensures that resources loaded from CDN match the expected version, adding an extra layer of protection against tampering. For more information on SRI, refer to this article.
Implementing SRI
If you want to implement SRI attribute with the PX SDK, use it as follows in your application’s code:
<script type="text/javascript">
(function(n,t,a,e,co){var i="aptrinsic";n[i]=n[i]||function() {
(n[i].q=n[i].q||[]).push(arguments)},n[i].p=e;n[i].c=co;
var r=t.createElement("script");r.async=!0,r.src=a+"?a="+e;
var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c)
})
(window,document,"https://cdnjs-web-sdk.aptrinsic.com/web-sdk/0.XX.0/api/aptrinsic.js","AP-ZZZZZZZZ-2");
integrity="shaXXX-KyZXEAg3QhqLMpG8r+Knujsl5+5hb5eWuaMKqF+16c0BqaYYgB5w3h8c5nOU4zN7"
crossorigin="anonymous"
</script>
Note: Replace shaXXX in the above code with the appropriate SHA value for your organization.
Gainsight PX Guide Editor
These are the files used by the in-app Editor for Gainsight PX admin. These files are not required for runtime tracking or engagement, and therefore not required for hosting.
- Click here to view the list of files
-
./engagement-editor/productSwitcher/px-logo.svg ./engagement-editor/productSwitcher/insided-logo.svg ./engagement-editor/productSwitcher/cs-logo.svg ./engagement-editor/froala.css ./engagement-editor/static/css/productMapperComponents.css ./engagement-editor/static/css/stepsManager.css ./engagement-editor/static/css/index.css ./engagement-editor/static/css/sideBar.css ./engagement-editor/static/css/dynamicDialog.css ./engagement-editor/static/css/stepPicker.css ./engagement-editor/static/js/stepsManager.js ./engagement-editor/static/js/stepPicker.js ./engagement-editor/static/js/sideBar.js ./engagement-editor/static/js/productMapperComponents.js ./engagement-editor/static/js/index.js ./engagement-editor/static/js/dynamicDialog.js ./engagement-editor/static/js/editor.js ./engagement-editor/froala/css/plugins.pkgd.min.css ./engagement-editor/froala/css/plugins/colors.min.css ./engagement-editor/froala/css/froala_editor.pkgd.min.css ./engagement-editor/emoticons.min.js ./engagement-editor/fonts/Roboto/Roboto-Thin.woff ./engagement-editor/fonts/Roboto/Roboto-Regular.woff ./engagement-editor/fonts/Roboto/Roboto-MediumItalic.woff ./engagement-editor/fonts/Roboto/roboto.css ./engagement-editor/fonts/Roboto/Roboto-Light.woff ./engagement-editor/fonts/Roboto/Roboto-Italic.woff ./engagement-editor/fonts/Roboto/Roboto-LightItalic.woff ./engagement-editor/fonts/Roboto/Roboto-Black.woff ./engagement-editor/fonts/Roboto/Roboto-Medium.woff ./engagement-editor/fonts/Roboto/Roboto-Bold.woff ./engagement-editor/fonts/Roboto/Roboto-BoldItalic.woff ./engagement-editor/fonts/Roboto/Roboto-ThinItalic.woff ./engagement-editor/fonts/Roboto/Roboto-BlackItalic.woff ./editor.css ./images/world.png ./images/toggle-on.svg ./images/api-3.svg ./images/selector-title.svg ./images/arrow-down-orange.svg ./images/api-5-big.svg ./images/editor-3.svg ./images/notifications_24px.svg ./images/tag-1.svg ./images/reoder-2.svg ./images/reorder-1.svg ./images/arrow-6.svg ./images/arrow-7.svg ./images/warning.png ./images/edit-mini.svg ./images/reoder-3.svg ./images/module-3.svg ./images/check-mark.svg ./images/v-12.svg ./images/element-selected.svg ./images/edit-3.svg ./images/preview-green.svg ./images/step-5.png ./images/v-10.svg ./images/chevron-back-4.svg ./images/txt-3-big.svg ./images/module-1.svg ./images/reoder-1.svg ./images/arrow-5.svg ./images/arrow-4.svg ./images/tag-gray.svg ./images/v-11.svg ./images/editor-1.svg ./images/tag-3.svg ./images/step-4.png ./images/api-1.svg ./images/edit-2.svg ./images/dialog-6.svg ./images/down-arrow-white.svg ./images/api-5.svg ./images/editor-5.svg ./images/edit-mini-disabled.svg ./images/tooltip-step.svg ./images/reoder-5.svg ./images/play_temp.svg ./images/arrow-1.svg ./images/target-typing.svg ./images/tag-6.svg ./images/step-1.png ./images/tag.svg ./images/edit-5.svg ./images/dialog-1.svg ./images/api-6.svg ./images/step-3.png ./images/v-8.svg ./images/logo-face-3.svg ./images/arrow-3.svg ./images/arrow-2.svg ./images/custom-event-small.svg ./images/guide.svg ./images/tag-5.svg ./images/v-9.svg ./images/step-2.png ./images/step-2.svg ./images/url-4.svg ./images/custom-event-big.svg ./images/add_hover.svg ./images/tag-3-big.svg ./images/dialog-close-bright-1.svg ./images/txt-3.svg ./images/bot-00.svg ./images/check-mark-2.svg ./images/link.svg ./images/tag_selected.svg ./images/toggle-off.svg ./images/preview-3.svg ./images/px-fav-icon.svg ./images/select-1.svg ./images/url-5.svg ./images/selector.svg ./images/step-3.svg ./images/click-4.svg ./images/step-1.svg ./images/bar-icon.png ./images/arrow-19.svg ./images/guide-tooltip.png ./images/check-mark-1.svg ./images/arrow-18.svg ./images/event_selected.svg ./images/alert.png ./images/url-6.svg ./images/click-1.svg ./images/check-5.svg ./images/step-4.svg ./images/unsatisfied.svg ./images/neutral.svg ./images/ui-icons_777777_256x240.png ./images/info-orange.svg ./images/title-4.svg ./images/arrow-dock-down-blue.svg ./images/event.svg ./images/step-5.svg ./images/url-3.svg ./images/event-highlighted.svg ./images/hotspot-step.svg ./images/url-5-big.svg ./images/url-1.svg ./images/select-5.svg ./images/info-green.svg ./images/overlay-3.svg ./images/txt-6.svg ./images/delete-8.svg ./images/event-icon.svg ./images/step-dialog-selected.svg ./images/ui-icons_cc0000_256x240.png ./images/add.svg ./images/arrow-dock-down.svg ./images/close.svg ./images/tagged-highlight-icon.svg ./images/arrow-13.svg ./images/target-2.svg ./images/delete-5.svg ./images/delete-4.svg ./images/url-gray.svg ./images/arrow-12.svg ./images/clone-5.svg ./images/text_match.svg ./images/link-1.svg ./images/aptrinsic-logo-1.svg ./images/satisfied.svg ./images/back.svg ./images/arrow-10.svg ./images/target-1.svg ./images/question-mark/question-mark-smoke.svg ./images/question-mark/question-mark-green.svg ./images/help-gray.svg ./images/tag-highlight.svg ./images/delete-7.svg ./images/arrow-11.svg ./images/ui-icons_777620_256x240.png ./images/link-2.svg ./images/css-3.svg ./images/clone-2.svg ./images/arrow-15.svg ./images/ui-icons_ffffff_256x240.png ./images/delete-3.svg ./images/delete-trash.svg ./images/world-icon.svg ./images/delete-2.svg ./images/step-tooltip.svg ./images/unlinked.svg ./images/step-tooltip-selected.svg ./images/add-2.svg ./images/arrow-14.svg ./images/clone-3.svg ./images/api-3-big.svg ./images/target-element-click.svg ./images/next.svg ./images/arrow-down-green.svg ./images/arrow-16.svg ./images/help-4.svg ./images/success.png ./images/delete-1.svg ./images/guide-dialog.png ./images/txt-5-big.svg ./images/ui-icons_555555_256x240.png ./images/arrow-17.svg ./images/add-1.svg ./images/delete.png ./images/pencil.png ./images/dialog-step.svg ./images/linked.svg ./images/v-4.svg ./images/question-mark.svg ./images/selector_hover.svg ./images/help-4.png ./images/reorder.svg ./images/rule-date.svg ./images/v-5.svg ./images/custom-event-orange.svg ./images/step-dialog.svg ./images/linking-icon.svg ./images/module-disabled.svg ./images/remove-4.svg ./images/v-7.svg ./images/ui-icons_444444_256x240.png ./images/i18n/i18n-green.svg ./images/v-6.svg ./images/selector_edited.svg ./images/url-3-big.svg ./images/v-2.svg ./images/delete-trash-blue.svg ./images/arrow-9.svg ./images/arrow-8.svg ./images/event-1.svg ./images/tag-5-big.svg ./images/goal-1.svg ./images/v-3.svg ./images/feature-3.svg ./images/feature-1.svg ./images/v-1.svg ./images/target-element-hover.svg ./images/title-icon.svg ./images/tooltip-1.svg ./images/event-2.svg ./images/dialog-close.svg ./images/remove-3.svg ./images/badge/types/bulb.svg ./images/badge/types/exclam.svg ./images/badge/types/arrow.svg ./images/badge/types/tooltip.svg ./images/badge/types/guide.svg ./images/badge/types/announce.svg ./images/badge/types/question.svg ./images/badge/types/flag.svg ./images/badge/types/check.svg ./images/badge/types/dash.svg ./images/badge/types/info.svg ./images/badge/types/badge.svg ./images/badge/types/feedback.svg ./images/badge/types/star.svg ./images/badge/types/cap.svg ./images/badge/types/cross.svg ./images/badge/types/nps.svg ./images/badge/badge.svg ./opentip.css ./style.css ./froala/css/2.5.1/colors.min.css ./froala/css/2.5.1/froala_style.min.css ./froala/css/2.5.1/plugins/image.min.css ./froala/css/2.5.1/plugins/emoticons.min.css ./froala/css/2.5.1/plugins/file.min.css ./froala/css/2.5.1/plugins/table.min.css ./froala/css/2.5.1/plugins/video.min.css ./froala/css/2.5.1/froala_editor.pkgd.min.css ./api/product-mapper.min.js ./api/engagement-editor.min.js ./api/aptrinsic-api.min.js ./api/editor.js ./api/guide-editor.min.js ./font/font-awesome/4.4.0/fontawesome-webfont.svg ./font/font-awesome/4.4.0/fontawesome-webfont.woff2 ./font/font-awesome/4.4.0/fontawesome-webfont-ie.eot ./font/font-awesome/4.4.0/fontawesome-webfont.ttf ./font/font-awesome/4.4.0/font-awesome.css ./font/font-awesome/4.4.0/fontawesome-webfont.woff ./font/font-awesome/4.4.0/fontawesome-webfont.eot ./color-picker/color-picker.min.js ./color-picker/color-picker.min.css ./product-mapper/static/css/toolbar.css ./product-mapper/static/css/addMenu.css ./product-mapper/static/css/index.css ./product-mapper/static/css/tree.css ./product-mapper/static/js/mapperDialogs.js ./product-mapper/static/js/tree.js ./product-mapper/static/js/index.js ./product-mapper/static/js/addMenu.js ./product-mapper/static/js/toolbar.js ./opentip-native.min.js
In order to host the above files, you must set the static path using the contentProxyDomain configuration in the SDK as follows:
<script type="text/javascript">
(function(n,t,a,e,co){var i="aptrinsic";n[i]=n[i]||function() {
(n[i].q=n[i].q||[]).push(arguments)},n[i].p=e;n[i].c=co;
var r=t.createElement("script");r.async=!0,r.src=a+"?a="+e;
var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c)
})
(window,document,"https://cdnjs-web-sdk.aptrinsic.com/web-sdk/0.54.0/api/aptrinsic.js","AP-ZZZZZZZZ-2", {
contentProxyDomain: "https://your.domain.com"
});
</script>
Replace your.domain.com with the static path to the hosted files.