Skip to main content

Installation

A lightweight TypeScript SDK for adding Deway's AI-powered customer success platform to your web app.

Alternative Installation Method

If you're using Google Tag Manager, check out the GTM Installation Guide for a code-free setup.

Quick Install with AI Assistant​

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

Install and integrate the Deway Web SDK (@deway-ai/web-sdk) into my project.

PACKAGE INFO:
- Name: @deway-ai/web-sdk
- Purpose: Lightweight TypeScript SDK that adds AI-powered customer success intelligence
- 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/@deway-ai/web-sdk/dist/loader.umd.js"></script>
4. Initialize early in the app lifecycle (use appropriate lifecycle hook for the framework):
   - Import: import Deway from '@deway-ai/web-sdk'
   - Call Deway.init() with the appKey:
     Deway.init({ appKey: 'your-deway-app-key' })
5. Identify users after authentication:
   if (user?.id) Deway.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 Deway Web SDK integration accordingly.

Installation​

Install the Deway Web SDK using your preferred package manager:

npm install @deway-ai/web-sdk

Or using pnpm:

pnpm add @deway-ai/web-sdk

Or using yarn:

yarn add @deway-ai/web-sdk

Quick Start​

Basic Integration​

import Deway from '@deway-ai/web-sdk';

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

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

HTML/JavaScript Integration​

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

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

Configuration​

interface DewayConfig {
    appKey: string;           // Required: Your Deway API key
    apiEndpoint?: string;     // Optional: Custom API endpoint (default: "https://service.deway.ai/")
    wsEndpoint?: string;      // Optional: WebSocket endpoint (default: "wss://chat-socket.deway.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​

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

Core Methods​

Deway.init(config)​

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

Deway.identify(userId)​

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

Deway.showBubble(config?)​

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

Deway.hideBubble()​

Hide the AI chat bubble.

Deway.isBubbleVisible()​

Check if the bubble is currently visible.

Deway.destroy()​

Clean up SDK resources and stop all tracking.

Framework Examples​

React​

import {useEffect} from 'react';
import Deway from '@deway-ai/web-sdk';

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

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

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

Vue​

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

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

Angular​

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

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

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+

Alternative Installation Methods​

Google Tag Manager​

If you're using Google Tag Manager, you can install Deway without modifying your application code. See the GTM Installation Guide.

Next Steps​