Pendo integration guide

modules/ROOT/pages/common/nav.adoc

@@ -152,7 +152,8 @@ include::generated/typedoc/CustomSideNav.adoc[]
 *** link:{{navprefix}}/prefetch[Prefetch static resources]
 *** link:{{navprefix}}/prerender[Prerender components]
 ** link:{{navprefix}}/security-settings[Security settings]
-*** link:{{navprefix}}/external-tool-script-integration[Integrate external tools and scripts]
+** link:{{navprefix}}/external-tool-script-integration[Integrate external tools and scripts]
+*** link:{{navprefix}}/pendo-integration[Pendo integration with embed]
 ** Other embedding methods
 *** link:{{navprefix}}/embed-without-sdk[Embed without SDK]
 *** link:{{navprefix}}/custom-viz-rest-api[Create a custom visualization]

modules/ROOT/pages/pendo-integration.adoc

@@ -0,0 +1,167 @@
+= Integrate Pendo with ThoughtSpot Embed
+:toc: true
+:toclevels: 2
+
+:page-title: Pendo integration guide
+:page-pageid: pendo-integration
+:page-description: This document describes how to intregate Pendo in your embed experience.
+
+To launch Pendo guides and analytics within your ThoughtSpot embed, you must integrate Pendo with your embed environment. This integration typically requires adding a custom JavaScript to enable product tours, feature announcements, and usage tracking within the embedded experience.
+
+By default, the third-party tool integration feature is disabled on ThoughtSpot instances. To enable this feature, contact ThoughtSpot Support.
+
+== Before you begin
+Pendo integration with ThoughtSpot embed requires the following:
+
+* Access to Pendo +
+If you do not have a Pendo account, link:https://app.pendo.io/register[sign up for a trial, window=_blank] Pendo account.
+* Admin access to your ThoughtSpot instance. If your instance has Orgs, ensure that you are in the *All Orgs* context.
+* Approval from ThoughtSpot Support for Pendo integration.
+* A publicly accessible domain to host your integration script.
+
+[IMPORTANT]
+====
+ThoughtSpot strongly recommends that you review the security guidelines of your organization and assess the potential security risks associated with the injection of custom scripts and third-party tools. Malicious scripts introduce XSS risks and can compromise user data and application integrity. Therefore, both ThoughtSpot Support and the customer must explicitly enable and approve the integration to ensure that only vetted and trusted script URLs are allowed in the embed app.
+====
+
+== Step 1: Sign in to your Pendo Account
+
+Sign in to your Pendo account.
+
+For integration with ThoughtSpot embed, you'll need to use a custom script. Identify the information you want to capture, define visitors and accounts, and segment data. This information will be used as metadata in the Pendo install script. For more information, refer to the link:https://support.pendo.io/hc/en-us/articles/21326198721563-Choose-IDs-and-metadata[Pendo Documentation, window=_blank].
+
+== Step 2: Create an integration script
+
+To integrate Pendo with ThoughtSpot embed, you need a custom JavaScript that is designed to install and initialize the Pendo agent within your embed environment. You can either create your own integration script or use the xref:pendo-integration.adoc#_sample_javascript_for_pendo_integration[sample JavaScript] provided by ThoughtSpot.
+
+The script typically includes the following components:
+
+* A JavaScript function that includes the initialize method required to retrieve, activate, and load the Pendo agent, `pendo.js`.
+* The Pendo client key that is unique to each customer account. It maps the metadata to your Pendo subscription.
+* Pendo visitor configuration that identifies the user (visitor).
+* Pendo account configuration that identifies the account (organization or user group) to which the user belongs
+
+The client key and configuration metadata for Pendo visitor and account must be passed to the script via the xref:pendo-integration.adoc#_step_6_define_custom_variables_in_the_visual_embed_sdk[customVariablesForThirdPartyTools object in the Visual Embed SDK] to identify users and accounts for tracking, segmentation, and personalized experiences within Pendo.
+
+For more information about the Pendo configuration metadata, script creation and its components, refer to the following articles in the Pendo documentation:
+
+* link:https://support.pendo.io/hc/en-us/articles/360046272771-Developer-s-guide-to-implementing-Pendo-using-the-install-script[Developer's guide to implementing Pendo using the install script, window=_blank]
+* link:https://support.pendo.io/hc/en-us/articles/21362607464987-Components-of-the-install-script#01H6S2EXET8C9FGSHP08XZAE4F[Components of the install script, window=_blank]
+* link:https://support.pendo.io/hc/en-us/articles/21326198721563-Choose-IDs-and-metadata[Pendo configuration metadata, window=_blank]
+
+=== Sample JavaScript for Pendo integration
+To assist you with the Pendo integration process, ThoughtSpot provides a sample JavaScript, `pendoIntegrationScript.js` for app integration. You can access this sample JavaScript in the link:https://github.com/thoughtspot/developer-examples/blob/524ef13121fcae4756a951648e3e6dc4bb29aa26/visual-embed/pendo-integration/pendoIntegrationScript.js[ThoughtSpot Developer examples, window=_blank] GitHub repository.
+
+The `pendoIntegrationScript.js` script is designed to perform the following actions:
+
+* Access custom variables defined in the SDK. It waits for the Visual Embed SDK to initialize and load.
+* Wait for the user to authenticate successfully and receive information such as user ID, name, email, groups, and account details from the Visual Embed SDK.
+* Initialize Pendo with the metadata and key, so that Pendo can track the user and their actions within the embedded app.
+
+////
+* Update Pendo on navigation +
+Whenever the user navigates to a new page or context within the embedded ThoughtSpot app, the script updates Pendo with the new context information.
+
+It also listens for navigation events within the embedded ThoughtSpot app to capture the current page or context.
+////
+
+== Step 3: Host the script on a public site
+
+When your integration script is ready, host it on a publicly accessible domain, such as AWS S3, Azure Blob, or a trusted CDN.
+
+Note the hosting domain URL. You will need to send this URL to ThoughtSpot Support and add it to the CSP allowlist on your ThoughtSpot instance.
+
+[NOTE]
+====
+If you anticipate frequent updates to the script, choose a hosting service that allows content overrides without changing the URL. If you use the same hosting URL, you don't need to request approval from Support each time the script is modified.
+====
+
+== Step 4: Contact ThoughtSpot Support to enable integration
+
+Create a ThoughtSpot Support request to enable Pendo integration with your ThoughtSpot Embed.
+In your support request:
+
+* Specify the exact domain that will host your script in the embedding environment. Send the full URL path, including the `.js` extension.
+* Send the script that you want to integrate.
+
+Wait for ThoughtSpot Support to validate and approve your request. This step will ensure that only scripts from the trusted and vetted domains are allowed to run scripts in your embed environment.
+
+== Step 5: Add the Script source to the CSP Allowlist
+
+After ThoughtSpot enables the integration for your instance:
+
+. Log in to your ThoughtSpot instance as an administrator.
+. Go to **Develop** > **Security Settings**.
+. Make sure that you are in the *All Orgs* context.
+. Check whether the *CSP script-src domains* setting is visible on the *Security Settings* page.
+. Add the domain that hosts your script to the **CSP script-src** allowlist.
+
+== Step 6: Define custom variables in the Visual Embed SDK
+
+Define the required variables in `init ()` configuration of your embed code. To pass the variables to your script, use the link:https://developers.thoughtspot.com/docs/Interface_EmbedConfig#_customvariablesforthirdpartytools[customVariablesForThirdPartyTools] object in the Visual Embed SDK.
+
+Add the following variables in the `init()` configuration:
+
+* `pendoClientKey`
+* `pendoVisitorConfig`
+* `pendoAccountConfig`
+
+[source,JavaScript]
+----
+init({
+    //...embedConfig,
+    customVariablesForThirdPartyTools: {
+        {
+            pendoKey: 'your-key',
+            pendoVisitorConfig: {
+                id: 'user-id',
+                name: 'user-name'
+            },
+            pendoAccountConfig: {
+                id: 'account-id',
+                name: 'account-name'
+            }
+        }
+    }
+}
+});
+----
+
+Note that these variables include private information such as credentials or keys.
+
+Your Pendo integration script will include the following code to access these variables via the `window.tsEmbed` object and initialize the Pendo agent in your ThoughtSpot embed environment.
+
+[source,JavaScript]
+----
+const pendoKey = window.tsEmbed.pendoKey;
+const pendoVisitorConfig = window.tsEmbed.pendoVisitorConfig; // Make sure to pass at least the id and name in the customVariablesForThirdPartyTools
+const pendoAccountConfig = window.tsEmbed.pendoAccountConfig; // Make sure to pass at least the id and name in the customVariablesForThirdPartyTools
+----
+
+When the SDK initializes and the authentication is completed successfully, your hosted JavaScript will run seamlessly in your ThoughtSpot embed environment.
+
+== Step 7: Validate and test Pendo integration
+To validate and test Pendo integration in your embed:
+
+. Log in to your embedded ThoughtSpot application as an end user.
+. If have implemented a check using `pendo.validateEnvironment()` in your integration script, verify the logs in the console to confirm if the script is executed successfully and initializes as expected. +
+For more information about `pendo.validateEnvironment()`, see the "Verify the installation" section in the link:https://support.pendo.io/hc/en-us/articles/360046272771-Developer-s-guide-to-implementing-Pendo-using-the-install-script[Pendo Documentation, window=_blank] or the link:https://github.com/thoughtspot/developer-examples/blob/524ef13121fcae4756a951648e3e6dc4bb29aa26/visual-embed/pendo-integration/pendoIntegrationScript.js#L108[sample script provided by ThoughtSpot, window=_blank].
+. Access Pendo and create a Pendo tour or guide using the Pendo dashboard and verify whether the guides appear inside the embedded ThoughtSpot instance.
+
+== Troubleshooting
+
+If the script is not loading:
+
+* Check the browser console for CSP or network errors.
+* Check the CSP allowlist in ThoughtSpot to ensure the domain hosting URL is allowed.
+
+If the variables are not available:
+
+* Check if the SDK is initialized and the variables are passed in the `customVariablesForThirdPartyTools` object in the `init()` function in the SDK.
+* Check whether your script has access to `window.tsEmbed` after the embed has initialized.
+
+== Additional resources
+
+*  link:https://github.com/thoughtspot/developer-examples/blob/524ef13121fcae4756a951648e3e6dc4bb29aa26/visual-embed/pendo-integration/pendoIntegrationScript.js[ThoughtSpot Developer examples GitHub repository, window=_blank]
+* link:https://www.pendo.io/resources/getting-started-with-pendo/[Pendo Getting Started Guide]
+* link:https://support.pendo.io/hc/en-us/articles/360046272771-Developer-s-guide-to-implementing-Pendo-using-the-install-script[Pendo Documentation, window=_blank]