Installing the Guidde agent

Developer's guide to installing the Guidde agent

Overview

Guidde enables you to pass knowledge to your users in-app to onboard, educate, and drive adoption. Guidde tagging and video playbooks 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.

Typically Guidde is initialized after a user is identified. Only initialize Guidde without a user ID if you are deliberately trying to track anonymous users.

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 application key is included in the snippet provided in your App Settings. The application 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 deliver video playbooks. 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 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": "john.doe@acme.com",
    "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)

Note: JSON.stringify(initOptions).length cannot exceed 512 bytes

Properties Restrictions

  1. The property name can only contain letters, digits or underscore '_'

  2. The property name first character must be a letter

  3. The property name is up to 20 characters long

  4. The property value type is restricted to string or array of strings

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;

Note: 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.

PreviousEmbedding into NotionNextCustomize Guidde Inside

Last updated