Installation

Learn how to install and set up the Apta SDK in your project using simple HTML script tags.

Installation

This guide will help you install and set up the Apta SDK in your project using HTML script tags.

Prerequisites

Before you begin, ensure you have:

  • A modern web browser
  • Your Partner Key from the Apta platform

Installation

The Apta SDK is designed to work with simple HTML script tags. No package managers or build tools required.

Basic HTML Setup

Add the Apta SDK script to your HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website with Apta</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <!-- Your page content -->
  <div id="chat-container" style="width: 100%; height: 500px;"></div>

  <!-- Include Apta SDK -->
  <script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
  <script>
    // Initialize Apta
    const chat = new Apta({
      partnerKey: 'your-partner-key',
      container: '#chat-container',
      mode: 'default',
      theme: 'light'
    });

    // Listen for events
    chat.on('app:ready', () => {
      console.log('✅ Apta crypto assistant is ready!');
    });
  </script>
</body>
</html>

Display Modes

Default Mode (Inline)

Embed the chat directly into a container on your page:

<div id="my-chat" style="width: 100%; height: 400px; border: 1px solid #ddd;"></div>

<script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
<script>
  const inlineChat = new Apta({
    partnerKey: 'your-partner-key',
    container: '#my-chat',
    mode: 'default'
  });
</script>

Display chat in a floating popup window:

<script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
<script>
  const popupChat = new Apta({
    partnerKey: 'your-partner-key',
    mode: 'popup',
    popupOptions: {
      width: '400px',
      height: '600px',
      position: 'bottom-right'
    }
  });
</script>

Drawer Mode

Slide-in chat panel from the side:

<script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
<script>
  const drawerChat = new Apta({
    partnerKey: 'your-partner-key',
    mode: 'drawer',
    drawerOptions: {
      width: '350px',
      position: 'right'
    }
  });

  // Control drawer manually
  function openChat() {
    drawerChat.open();
  }

  function closeChat() {
    drawerChat.close();
  }
</script>

Full Mode

Take over the entire screen:

<script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
<script>
  const fullChat = new Apta({
    partnerKey: 'your-partner-key',
    mode: 'full',
    theme: 'dark'
  });
</script>

Configuration Options

Required Parameters

  • partnerKey - Your unique partner key

Optional Parameters

  • container - CSS selector for inline mode (required for default mode)
  • mode - Display mode: 'default', 'popup', 'drawer', or 'full'
  • theme - Theme: 'light', 'dark', or 'system'
  • popupOptions - Configuration for popup mode
  • drawerOptions - Configuration for drawer mode

Event Handling

<script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
<script>
  const chat = new Apta({
    partnerKey: 'your-partner-key',
    mode: 'popup'
  });

  // Core events
  chat.on('app:ready', () => {
    console.log('Apta crypto assistant is ready!');
  });

  chat.on('message:sent', (data) => {
    console.log('Message sent:', data);
  chat.on('app:error', (error) => {
    console.error('Application error:', error);
  });

  chat.on('message:sent', (data) => {
    console.log('Message sent:', data);
  });

  chat.on('message:received', (data) => {
    console.log('Message received:', data);
  });

  // Mode-specific events
  chat.on('popup:open', () => {
    console.log('Popup opened');
  });

  chat.on('popup:close', () => {
    console.log('Popup closed');
  });
</script>

Verification

To verify that the SDK is working correctly:

<!DOCTYPE html>
<html>
<head>
  <title>Apta Test</title>
</head>
<body>
  <h1>Testing Apta SDK</h1>
  
  <script src="https://sdk.aptachat.ai/apta-sdk.js"></script>
  <script>
    const chat = new Apta({
      partnerKey: 'your-partner-key',
      mode: 'popup'
    });

    chat.on('app:ready', () => {
      console.log('✅ Apta SDK is working!');
      alert('Crypto assistant is ready!');
    });
  </script>
</body>
</html>

Next Steps

Now that you have the SDK installed, you can:

Troubleshooting

Common Issues

Apta is not defined

Error: Apta is not defined

Make sure the apta-sdk.js script is loaded before your initialization code.

Container not found error

Error: Container element not found

Ensure the container element exists in the DOM before initializing the SDK for default mode.

Invalid credentials error

Error: Partner Key is required for Apta initialization

Check that you've provided a valid partnerKey credential.

Invalid credentials error

Error: Partner ID is required for Apta initialization

Check that you've provided valid partnerId, partnerSecret, and appId credentials.