routeon-sdk

v1.0.4

Published

a month ago

SDK for RouteOn interactive walkthrough guides

0High
0Medium
0Low

anshu32

routeon sdk walkthrough onboarding

RastaDikhao SDK Integration Guide

[!TIP] Client-Facing Documentation: If you are a client looking to integrate the RouteOn walkthrough tours into your own product, please refer to the Client Integration Guide for public SDK usage instructions.

Welcome to the RastaDikhao SDK integration guide. This SDK allows developers to easily overlay interactive product tours, walkthroughs, and guides on top of their web applications.

1. Overview

The RastaDikhao SDK runs as a singleton instance on your client application. It monitors route changes, fetches published flows targeted to the current environment and end-user, and injects interactive tooltips and overlays to guide users step-by-step through your application interface.

2. Installation

You can integrate the SDK either via an NPM module or by loading it directly via a CDN/Script tag.

Option A: ES Modules / NPM

If you install the package locally (e.g. from your internal package registry or relative path):

npm install routeon-sdk

Then import it in your codebase:

import RastaDikhao from 'routeon-sdk';

Option B: Browser CDN / Script Tag

Include the SDK bundle directly in your HTML <head> or before the closing </body> tag:

<script src="https://cdn.yourdomain.com/rastadikhao-sdk.min.js"></script>
<script>
  // Exposed globally as window.RastaDikhao
  const RastaDikhao = window.RastaDikhao;
</script>

3. Initialization

To start running walkthrough flows, initialize the SDK early in your application's lifecycle (e.g., at the root component or entry script).

RastaDikhao.init({
  apiKey: "your-tenant-api-key",       // Required: Your unique organization API key
  environment: "production",           // Optional: "production" or "development" (default: "production")
  debug: false                         // Optional: Set to true for verbose console logging (default: false)
});

Configuration Options Reference

4. Managing User State & Segmentation

To personalize user experiences, targeted product tours require knowing who the current user is and what their characteristics are. The SDK provides standard APIs to handle user state.

Identifying a User (`identify`)

Call RastaDikhao.identify() when a user signs in, loads your application, or updates their profile. This method:

Stores the user's ID persistently in localStorage under rd_end_user_id.
Syncs the user's ID and custom attributes (traits) to the RastaDikhao backend database.
Automatically triggers and filters published walkthrough flows matched specifically to this user's profile and segment.

Method Signature

RastaDikhao.identify(endUserId, traits);

Parameters

endUserId (string) - Required. A unique identifier for the user (e.g., database ID, UUID, or email).
traits (Object) - Optional. A key-value map representing the user's state, role, subscription, or other custom traits.

Example Usage

// On user login or profile load
RastaDikhao.identify("user_987654", {
  role: "admin",
  plan: "premium",
  signUpDate: "2026-07-16",
  companyName: "Acme Corp"
});

[!NOTE] Identifying a user is highly recommended. If you do not call identify, flows will be fetched anonymously, and any targeted/segmented experiences configured on the dashboard will not be resolved for the user.

User Traits & Custom Attributes

Any key-value properties passed in the traits object are sent to the backend. You can use these values on the RastaDikhao flow builder platform to create segments and target walkthroughs. For example:

Roles: Show developer walkthroughs to role: "developer" and configuration walkthroughs to role: "admin".
Billing Tiers: Target upsell walkthroughs to plan: "free".
Feature Flags: Show tours for new features only to users who have access: newFeatureBeta: true.

Logging Out (`logout`)

When the user logs out of your application, you must clear the SDK's user state to prevent subsequent users on the same machine from seeing incorrect walkthroughs.

RastaDikhao.logout();

Calling logout() will:

Clear the active tour and cleanup all injected DOM overlays and tooltips.
Remove rd_end_user_id from the browser's localStorage.
Reset the internal flows cache.

5. Complete Code Examples

Vanilla JavaScript Integration

Below is an example of initializing the SDK and managing user state in a standard multi-page or dynamic web application.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App Integration</title>
  <!-- Load SDK -->
  <script src="./path/to/sdk/index.js" type="module"></script>
</head>
<body>
  <h1>Welcome to the Dashboard</h1>
  <button id="my-profile-btn">Settings</button>

  <script type="module">
    import RastaDikhao from './path/to/sdk/index.js';

    // 1. Initialize the SDK
    RastaDikhao.init({
      apiKey: "pub_pk_9381023a8bc928f",
      environment: "production",
      debug: true
    });

    // 2. Identify the logged-in user with their state
    const currentUser = {
      id: "usr_102030",
      role: "editor",
      pricingTier: "enterprise"
    };

    RastaDikhao.identify(currentUser.id, {
      role: currentUser.role,
      plan: currentUser.pricingTier
    });

    // 3. Handle Logout Action
    document.getElementById('logout-btn')?.addEventListener('click', () => {
      // Clear app state...
      
      // Clear SDK user state
      RastaDikhao.logout();
    });
  </script>
</body>
</html>

React / Single Page App (SPA) Integration

In modern component-based frameworks, we recommend initializing the SDK at the root level and triggering identify inside your authentication state provider or a root-level hook.

import React, { useEffect } from 'react';
import RastaDikhao from 'routeon-sdk';
import { useAuth } from './hooks/useAuth';

export function App() {
  const { user, isAuthenticated } = useAuth();

  // 1. Initialize RastaDikhao SDK once on mount
  useEffect(() => {
    RastaDikhao.init({
      apiKey: "pub_pk_9381023a8bc928f",
      environment: "production",
      debug: false
    });

    return () => {
      // Optional: clean up SDK resources if App unmounts
      RastaDikhao.destroy();
    };
  }, []);

  // 2. Sync auth state / user state with the SDK
  useEffect(() => {
    if (isAuthenticated && user) {
      RastaDikhao.identify(user.id, {
        role: user.role,
        tier: user.subscriptionTier,
        createdAt: user.createdAt
      });
    } else {
      RastaDikhao.logout();
    }
  }, [user, isAuthenticated]);

  return (
    <div className="app-container">
      {/* Your application components */}
    </div>
  );
}

6. Advanced API & Lifecycle

Event Listeners

If the SDK cannot find a target DOM selector (e.g. if the element is hidden behind a feature flag or still loading), it fires a custom window event. You can listen to this event to trigger fallback actions or log telemetry.

window.addEventListener("rastadikhao:target_not_found", (event) => {
  const { flowId, stepIndex, selector } = event.detail;
  console.warn(`Tour step failed. Element not found: ${selector} in flow ${flowId}`);
});

Destroying the SDK Instance

If you need to completely disable the SDK, unbind all routing observers, remove DOM elements, and restore browser globals (e.g. in micro-frontend environments or test suites), call the destroy method:

RastaDikhao.destroy();