Skip to main content

Installation

A lightweight TypeScript SDK for adding an AI-powered user engagement engine by Rise AI to your web app.

Quick Install with AI Assistant​

Copy and paste this prompt to your AI coding assistant (Claude, Copilot, etc.) to get Rise AI set up with best practices:

Install and integrate the Rise AI Web SDK (@getrise-ai/web-sdk) into my project.

PACKAGE INFO:
- Name: @getrise-ai/web-sdk
- Purpose: Lightweight TypeScript SDK that adds an AI-powered user engagement engine
- Supports: React, Next.js, Vue, Nuxt, Angular, and vanilla JS
- Includes full TypeScript definitions

TASKS:
1. Detect my framework and package manager (npm, pnpm, or yarn) from lock files
2. Install the SDK using the detected package manager
3. For vanilla JS/HTML projects: Use the CDN script instead:
   <script src="https://unpkg.com/@getrise-ai/web-sdk/dist/loader.umd.js"></script>
4. Initialize early in the app lifecycle (use appropriate lifecycle hook for the framework):
   - Import: import Rise from '@getrise-ai/web-sdk'
   - Call Rise.init() with the appKey:
     Rise.init({ appKey: 'your-rise-app-key' })
5. Identify users after authentication:
   if (user?.id) Rise.identify(user.id);

IMPLEMENTATION NOTES:
- Follow my existing project structure and code style conventions
- Use appropriate lifecycle hooks: React (useEffect), Vue (onMounted), Angular (ngOnInit)

Please analyze my project structure, detect the framework and package manager, and implement the Rise AI Web SDK integration accordingly.

Installation​

Install the Rise AI Web SDK using your preferred package manager:

npm install @getrise-ai/web-sdk

Or using pnpm:

pnpm add @getrise-ai/web-sdk

Or using yarn:

yarn add @getrise-ai/web-sdk

Quick Start​

Basic Integration​

import Rise from '@getrise-ai/web-sdk';

// Initialize the SDK
Rise.init({
    appKey: 'your-app-key'
});

// Identify a user
Rise.identify('user-123');

HTML/JavaScript Integration​

<script src="https://unpkg.com/@getrise-ai/web-sdk/dist/loader.umd.js"></script>
<script>
    Rise.init({
        appKey: 'your-app-key'
    });

    Rise.identify('user-123');
</script>

Configuration​

interface RiseConfig {
    appKey: string;           // Required: Your Rise AI API key
    apiEndpoint?: string;     // Optional: Custom API endpoint (default: "https://service.getrise.ai/")
    wsEndpoint?: string;      // Optional: WebSocket endpoint (default: "wss://chat-socket.getrise.ai")
    isDevelopment?: boolean;  // Optional: Enable development mode (default: false)
    autoShowBubble?: boolean; // Optional: Auto-show chat bubble (default: false)
    bubbleConfig?: BubbleConfig; // Optional: Bubble appearance configuration
}

Example with Custom Configuration​

Rise.init({
    appKey: 'your-app-key',
    apiEndpoint: 'https://your-custom-endpoint.com/',
    isDevelopment: true,
    autoShowBubble: true
});

Core Methods​

Rise.init(config)​

Initialize the SDK with configuration options. Must be called before using other methods.

Rise.identify(userId)​

Associate a user ID with the current session for personalized experiences.

Rise.showBubble(config?)​

Show the AI chat bubble. Optional configuration for appearance customization.

Rise.hideBubble()​

Hide the AI chat bubble.

Rise.isBubbleVisible()​

Check if the bubble is currently visible.

Rise.destroy()​

Clean up SDK resources and stop all tracking.

Framework Examples​

React​

import {useEffect} from 'react';
import Rise from '@getrise-ai/web-sdk';

function App() {
    useEffect(() => {
        Rise.init({
            appKey: process.env.REACT_APP_RISE_APP_KEY
        });

        // Identify user when available
        if (user?.id) {
            Rise.identify(user.id);
        }
    }, [user?.id]);

    return <div>Your App</div>;
}

Vue​

<script setup>
  import {onMounted} from 'vue';
  import Rise from '@getrise-ai/web-sdk';

  onMounted(() => {
    Rise.init({
      appKey: import.meta.env.VITE_RISE_APP_KEY
    });
  });
</script>

Angular​

import {Component, OnInit} from '@angular/core';
import Rise from '@getrise-ai/web-sdk';

@Component({
    selector: 'app-root',
    template: '<div>Your App</div>'
})
export class AppComponent implements OnInit {
    ngOnInit() {
        Rise.init({
            appKey: environment.riseAppKey
        });
    }
}

Features​

  • AI Chat Bubble: Interactive chat interface for user engagement
  • User Activity Tracking: Automatic collection of user interactions and behavior
  • Semantic DOM Analysis: Intelligent understanding of page structure and content
  • Framework Agnostic: Works with React, Vue, Angular, and vanilla JavaScript
  • TypeScript Support: Full type definitions included
  • Lightweight: Minimal bundle size impact

Browser Support​

  • Chrome 60+
  • Firefox 55+
  • Safari 11+
  • Edge 79+

Next Steps​