Available on: Enterprise plan (optional add-on)
Overview
Guidde enables you to pass knowledge to your users in-app to onboard, educate, and drive adoption. Guidde tagging and videos are codeless, no engineering resources are required. However, we need engineers to install the Guidde snippet and initialize Guidde inside your software.
Our agent is the only technical piece of the initial Guidde installation. Once the agent is properly installed anyone can use Guidde.
The agent tracks a user's whereabouts inside your app and delivers the right video knowledge at the right time based on that information. Additional customization may be done later to optimize and expand the use of Guidde, for example adding optional branding or custom attributes for tracking specific events.
Guidde Agent
The installation of the Guidde agent is made up of two pieces, the snippet and the initialization:
The snippet is a short Javascript function that adds the Guidde.js file to the window.
The initialization identifies the user and account metadata.
Both pieces of the installation must be present on all pages of your website, if you have a single-page application you only need to initialize once per session. Multi-page apps may need to initialize on every page, not just the login page, to initialize Guidde if there's a hard refresh on a page after login.
📌 Only initialize Guidde without a user ID if you are deliberately trying to track anonymous users.
Typically Guidde is initialized after a user is identified.
Guidde Snippet
The snippet code block loads Guidde as a library that will make our functions available at the window-level. The script also passes through the application key.
The API (application) key is included in the snippet provided in Application Settings. API key maps the data the agent collects to your app in your Guidde subscription.
The Guidde snippet should be pasted in the <head> section:
<script>
(function(k){
const u="https://"+k+".sdk.app.guidde.co/"
window.guidde={_apiKey:k,u,init:(p)=>{window.guidde._i=(p||{})}}
const s=document.createElement('script')
const h=document.querySelector('head')
if(h){s.src=u+"guidde.js";h.appendChild(s)}})
('PASTE_API_KEY_HERE')
</script>
Initializing Guidde
The Guidde agent must be initialized to track usage and delivery of videos.
The initialization is where you customize the metadata that you provide Guidde.
The initialization must run on every window reload.
Metadata may be added after the initial installation and will update to the user and account details in Guidde.
To start and initialize the Guidde agent, perform the following call in code:
<script>
guidde.init()
</script>
or
<script>
guidde.init({ ...user_info_here... })
</script>
or
<script>
window.guidde.init({ ...user_info_here... })
</script>
Below you may find a sample of the initialization code block. Your team must determine the appropriate values to pass as the user and account ID and additional metadata.
var initOptions = {
// recommended (optional) user properties
"userId": "1234567890", // unique
"userEmail": "[email protected]",
"userName": "John Doe",
// recommended (optional) account properties
"accountId": "987654321", // unique
"accountName": "Acme Corp",
// additional suggestions, you can add any additional key-values here,
// as long as it's not one of the above reserved names.
"userRole": "Admin",
"vesrion": "2.0",
"languages": ["Spanish"],
"accountIsPaying": "true",
"accountType": "OEM",
"accountPlan": "Basic"
}
guidde.init(initOptions)
📌 JSON.stringify(initOptions).length cannot exceed 512 bytes
Properties Restrictions
The property name can only contain letters, digits or underscore '_'
The property name first character must be a letter
The property name is up to 20 characters long
The property value type is restricted to string or array of strings
Console Output
The console output generated by the SDK can be controlled using the following parameter:
guidde.init({debug=false|true})When debug is set to false console output for the SDK is silenced.
Required CSP Directives
This section outlines the minimum required directives to allow Guidde full functionality and compatibility with your CSP (Content Security Policy):
script-src
https://*.sdk.app.guidde.co;
img-src
https://*.sdk.app.guidde.co;
frame-src
https://*.sdk.app.guidde.co;
connect-src
https://*.sdk.app.guidde.co;
📌 You can replace all occurrences of *.sdk.app.guidde.co above with your 'API_KEY'.sdk.app.guidde.co to be compatible with strict CSP directives.