Guides

The options listed below pertain directly to guide behavior, styling, and presentation. Many of the options affect both building block guides and classic guides, while others only affect one or the other.

Available Options

Option	Description	Default	Type
`disableGlobalCSS`	If `true`, this will prevent the agent from downloading your application's global css file as well as the default classic guide css.	`false`	boolean
`disableGuidePseudoStyles`	Building block guides use an inline style tag for various pseudo styles (e.g. hover, carets, animations). These can be turned off using this flag for application's with more restrictive CSP settings but will require custom effort to reach style parity.	`false`	boolean
`disablePrefetch`	Content of badge and target element activated guides will be prefetched on load to improve guide display time unless set to `true`.	`false`	boolean
`enableDesignerKeyboardShortcut`	If `true`, the agent will listen for `alt+shift+8` on the keyboard and try to launch the designer (). The keyboard shortcut requires the guide launch modal of Engage to be open in another tab showing the shortcut.	`false`	boolean
`enableGuideTimeout`	If `true`, after trying to display a guide step, a `guideTimeout` event will be sent if the step does not show within the allotted time.	`false`	boolean
`guideSeenTimeoutLength`	How long to wait in milliseconds before sending a `guideTimeout` event if enabled.	`10000`	number
`guideValidation`	If `true`, guides will be verified against their saved content hash before display to ensure validity of guide content.	`false`	boolean
`guides.attachPoint`	By default, guides will be attached at the end of the `<body>`, `attachPoint` can be used to designate a different place to attach guides to in the DOM. This can be a CSS selector or a function.	`undefined`	string or function
`guides.delay`	Guides will be loaded, but not displayed. Call `pendo.startGuides()` to display guides when you choose to do so (this options has been moved from `delayGuides`).	`false`	boolean
`guides.disabled`	Completely disables guides (this option has been moved from `disableGuides`).	`false`	boolean
`guides.globalScripts`	An array of functions that can be run for all or a subset of guide steps (without requiring custom code blocks to be enabled). For more information read here.	`undefined`	object[]
`guides.timeout`	How long to wait for guides to load in milliseconds (this option has been moved from `guideTimeout`). By default guides will not timeout.	`undefined`	number
`guides.tooltip.arrowSize`	The tooltip arrow size (in pixels). This only affects classic guides.	`15`	number
`preventCodeInjection`	If `true`, custom code blocks in building block guides will not be allowed to run. Also, classic guides will not be shown at all.	`false`	boolean

Example

pendo.initialize({
    visitor: {
        id: "PUT_VISITOR_ID_HERE",
        name: "John Doe",
        email: "user@acme.com",
        role: "Viewer"
    },
    account: {
        id: "PUT_ACCOUNT_ID_HERE",
        name: "Acme Co"
    },
    disableGlobalCSS: false,
    disableGuidePseudoStyles: false,
    disablePrefetch: false,
    enableDesignerKeyboardShortcut: false,
    enableGuideTimeout: false,
    guideSeenTimeoutLength: 10000,
    guideValidation: false,
    guides: {
        attachPoint: '#guide-location', // or () => { return global.smallGuides ? $('#location-1') : $('location-2'); }
        delay: false,
        disabled: false,
        globalScripts: [],
        timeout: 30000,
        tooltip: {
            arrowSize: 15
        },
        preventCodeInjection: false
    }
});

Guides

Available Options​

Example​

Available Options

Example