paymob-chatbot

v1.0.4

Published

12 days ago

Embed the Paymob AI assistant into any website with a single script tag. The SDK renders a floating chat button in the bottom-right corner of your page and opens a fully-featured AI chat popup powered by Paymob.

0High
0Medium
0Low

ahmed_elbanna

paymob chatbot paymob-chatbot

Paymob Chatbot SDK

Installation

CDN (recommended)

Add the script tag before the closing </body> tag of your HTML page:

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/paymob-chatbot@latest/main.js"></script>

npm

npm install paymob-chatbot

import { Chatbot } from 'paymob-chatbot';

Quick Start

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Store</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>

  <!-- Your page content -->

  <script src="https://cdn.jsdelivr.net/npm/paymob-chatbot@latest/main.js"></script>
  <script>
    const chat = new window.PaymobChatbot({
      auth: {
        token: 'your_auth_token',
        platform: 'dashboard',
        region: 'egypt',
        user_type: 'merchant',
      },
    });
  </script>
</body>
</html>

A floating chat button will appear in the bottom-right corner. Clicking it opens the Paymob AI assistant. The chatbot will display a loading screen until the auth handshake completes automatically.

Configuration Options

| Option | Type | Required | Default | Description | |---|---|---|---|---| | auth | object | ✅ Yes | — | Authentication object. Must contain exactly token, platform, region, and user_type — all strings. See The auth Object for details. | | showToggle | boolean | No | true | Show or hide the floating chat button. Set to false to control the popup entirely via open() / close(). |

The auth Object

The auth parameter is required and must be a plain object containing exactly these four string keys:

| Key | Type | Description | |---|---|---| | token | string | Your merchant authentication token issued by Paymob. | | platform | string | The platform the SDK is running on. Allowed values: "dashboard", "merchant-app", "sales-app". | | region | string | The merchant's region. Allowed values: "egypt", "uae", "oman", "ksa", "glb". | | user_type | string | The type of user initiating the session. Allowed values: "merchant", "sales". |

auth: {
  token: 'your_auth_token',
  platform: 'dashboard',
  region: 'egypt', // 'egypt' | 'uae' | 'oman' | 'ksa' | 'glb'
  user_type: 'merchant',
}

All four keys are required. If any key is missing, has the wrong type, is an empty string, or if the object contains extra keys, the SDK will not render and will log a descriptive error to the browser console instead.

Validation errors

The SDK validates the auth object at construction time. Open your browser's developer console to see the exact issue:

[PaymobChatbot] auth.token is required but missing.
[PaymobChatbot] auth.platform must be a string, got number.
[PaymobChatbot] auth.region must not be an empty string.
[PaymobChatbot] auth contains unexpected key "userId". Allowed keys: token, platform, region, user_type.

API Reference

`new PaymobChatbot(options)`

Creates and mounts the chat widget on the page. The widget is appended to <body> automatically.

const chat = new window.PaymobChatbot({
  auth: {
    token: 'your_auth_token',
    platform: 'dashboard',
    region: 'egypt',
    user_type: 'merchant',
  },
});

`chat.open()`

Opens the chat popup programmatically.

chat.open();

`chat.close()`

Closes the chat popup programmatically.

chat.close();

`chat.destroy()`

Completely removes the widget (button + popup) from the DOM and cleans up all injected styles. Useful for single-page applications when navigating away.

chat.destroy();

Usage Examples

Default — floating button + popup

const chat = new window.PaymobChatbot({
  auth: {
    token: 'your_auth_token',
    platform: 'dashboard',
    region: 'egypt',
    user_type: 'merchant',
  },
});

Hide the toggle button — programmatic control only

Use this when you want to trigger the chat from your own button or UI element.

<button id="open-chat">Talk to Paymob AI</button>

<script src="https://cdn.jsdelivr.net/npm/paymob-chatbot@latest/main.js"></script>
<script>
  const chat = new window.PaymobChatbot({
    auth: {
      token: 'your_auth_token',
      platform: 'dashboard',
      region: 'egypt',
      user_type: 'merchant',
    },
    showToggle: false,  // hides the default floating button
  });

  document.getElementById('open-chat').addEventListener('click', () => {
    chat.open();
  });
</script>

Open the chat automatically on page load

const chat = new window.PaymobChatbot({
  auth: {
    token: 'your_auth_token',
    platform: 'dashboard',
    region: 'egypt',
    user_type: 'merchant',
  },
});

// Open after a short delay
setTimeout(() => {
  chat.open();
}, 3000);

React / Next.js integration

import { useEffect, useRef } from 'react';
import { Chatbot } from 'paymob-chatbot';

export function ChatWidget({ authToken }) {
  const chatRef = useRef(null);

  useEffect(() => {
    chatRef.current = new Chatbot({
      auth: {
        token: authToken,
        platform: 'dashboard',
        region: 'egypt',
        user_type: 'merchant',
      },
    });

    // Cleanup on unmount
    return () => {
      chatRef.current?.destroy();
    };
  }, []);

  return null;
}

Vue.js integration

import { Chatbot } from 'paymob-chatbot';

export default {
  props: ['authToken'],
  mounted() {
    this.chat = new Chatbot({
      auth: {
        token: this.authToken,
        platform: 'dashboard',
        region: 'egypt',
        user_type: 'merchant',
      },
    });
  },
  beforeUnmount() {
    this.chat?.destroy();
  },
};

Browser Support

| Browser | Minimum Version | |---|---| | Chrome | 80+ | | Firefox | 75+ | | Safari | 13+ | | Edge | 80+ |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme