solinify-salesgenie-sdk

v0.1.17

Published

a month ago

An embeddable AI-powered customer engagement and interactive product walkthrough SDK. With SalesGenie, you can dynamically guide users through your application using virtual pointers, page highlighting, voice/audio interfaces, and an AI chat assistant.

0High
0Medium
0Low

rinzan

Solinify SalesGenie SDK (`solinify-salesgenie-sdk`)

🌐 Architecture

SalesGenie operates as a centralized, multi-tenant platform service. Clients do not need to deploy or manage their own backend. Instead, all embedded SDK widgets connect directly to our central hosted SalesGenie backend API, using their respective client API keys to load custom branding and walkthrough rules.

🚀 Key Features

AI Chat Assistant: Embedded chat window that communicates with your SalesGenie backend to answer customer questions dynamically.
Interactive Product Walkthroughs: Run guided tours on your web app with step-by-step element focusing, custom overlays, and smooth scrolling.
Automatic DOM Scanning: The SDK scans your page structure at runtime to understand where buttons, forms, and sections are, feeding them to the AI engine for context-aware guiding.
Voice-Activated & Speech Support: Features integrated text-to-speech and microphone capture with dynamic wave voice avatars.

📦 Installation

Install the package via npm:

npm install solinify-salesgenie-sdk

Make sure your project has the required peer dependencies:

npm install react react-dom

🔌 Getting Started

To add the SalesGenie chatbot and interactive tour widgets to your website, initialize the SDK at the root level of your application (e.g., in main.jsx, App.tsx, or index.js):

import { SalesGenieManager } from 'solinify-salesgenie-sdk';
import 'solinify-salesgenie-sdk/chat-ui.css'; // Import styling files

SalesGenieManager.init({
  apiKey: "sg_your_unique_api_key",              // Retrieve from your SalesGenie Admin panel
  apiBaseUrl: "https://salesgenie.solinify.tech/api/v1", // Hosted backend API
  position: "bottom-right",                     // Options: "bottom-right" | "bottom-left"
  speechRate: 1.0                               // Speed rate of voice guidance
});

[!NOTE] Hosted URL Configurations:
SDK apiBaseUrl: Must point to the full endpoint https://salesgenie.solinify.tech/api/v1.
CLI --base-url: Point to the base domain https://salesgenie.solinify.tech (the scanner automatically appends api suffixes internally).
Admin Dashboard: Hosted at https://salesgenie.solinify.tech/.

🛠️ CLI static code-scanning & push

Instead of running scanning routines client-side on every load, you can scan your codebase locally using AST analysis (ts-morph) and push the generated walkthrough DSL + sections directly to the remote SalesGenie backend.

1. Scan and Push Walkthrough Tours & Layout Sections

This command analyzes your React components, extracts high-fidelity guides, detects page layouts (e.g. #hero, #features), and uploads them to the kb_configs table in the backend:

npx salesgenie scan \
  --src ./src \
  --push \
  --api-key YOUR_API_KEY \
  --base-url YOUR_BACKEND_URL

Options:
- --src <dir>: Source directory containing React/Next.js components to scan (default: ./src).
- --push: Push the walkthrough DSL and page sections directly to the remote backend database.
- --api-key <key>: Your SalesGenie tenant API Key.
- --base-url <url>: Backend base URL (e.g., https://salesgenie.solinify.tech).

2. Index Page Elements for Query-Driven Highlighting

To index detailed interactive elements (like buttons, links, inputs) so the AI agent can point them out dynamically based on user questions, run:

npx salesgenie index-elements \
  --base-url YOUR_BACKEND_URL \
  --api-key YOUR_API_KEY \
  --pages /,/services,/contact,/about

Options:
- --base-url <url>: Backend base URL (Required).
- --api-key <key>: The tenant API key (Required).
- --pages <paths>: Comma-separated paths of pages to index (e.g., /,/services).

🛠️ API Reference

`SalesGenieManager.init(config)` Options

⚙️ How it Works Under the Hood

1. Element Discovery (DOM Scanning)

Once initialized, the SDK instantiates a DOMScanner which scans the active page DOM for layout sections (section, main, header, footer, or elements with data-section or id), CTAs (buttons/links), and grids/card containers.

The scanner calculates unique, robust CSS selectors (e.g. #signup-form or main > section:nth-of-type(2)) and matches them with semantic labels.
A MutationObserver and window routing listeners (popstate, hashchange) monitor the DOM and automatically re-scan when single-page applications dynamically switch pages or routes.

2. Element Upload & Synced Knowledge Base

On your website's first user message or thread load:

The SDK uploads the array of scanned page sections to the backend via POST /conversations/start.
The backend saves this schema as the website's active Knowledge Base context.
When the user chats with the AI (e.g., "Show me where pricing is"), the backend semantic engine matches the query to the cached selector and returns it to the client.
The SDK then automatically scrolls the page to the target element and highlights it with a spotlight pointer overlay.

📊 Event Hooks & Custom Integrations

The SDK exposes hooks for custom analytics or event tracking.

// Define custom analytics callback
window.AIWalkthroughEventHook = async (eventName, payload) => {
  console.log(`[Event Tracked] ${eventName}`, payload);
  // Send data to Google Analytics, Mixpanel, etc.
};

Supported Events:

page_viewed — Triggered when routing changes.
walkthrough_started — Fired when a step tour starts.
step_viewed — Triggered when a new walkthrough step tooltip appears.
step_completed — Fired when a step is completed or actioned.
walkthrough_completed — Fired when the active tour ends.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Solinify SalesGenie SDK (solinify-salesgenie-sdk)