Skip to main content

Installation

A lightweight TypeScript SDK that adds Deway's autonomous adoption layer to your web app. One line of code.

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 an autonomous adoption layer
- 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​

  • Autonomous Guidance: Contextual help that adapts to what users are trying to do
  • Automatic Tracking: Captures user interactions without manual event setup
  • Framework Agnostic: Works with React, Vue, Angular, Next.js, Nuxt, 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​