Documentation

Introduction to Graygle.ai

Graygle.ai is a powerful platform for creating and embedding customizable chat bubbles on your website. Designed for businesses, developers, and marketers, it enables seamless customer engagement through AI-powered chat interfaces. This documentation guides you through every step of using Graygle.ai, from setting up your account to deploying and testing chat bubbles.

Key Features

• Create multiple chat apps with unique configurations.
• Customize chat bubble appearance (color, position, shape).
• Embed chat bubbles using a simple script.
• Test and debug configurations with a dedicated testing tool.
• Access API for advanced integrations.

Who This Guide Is For

This manual is for Graygle.ai users, including website owners, developers, and support teams, who want to implement and manage chat bubbles effectively.

Getting Started

1. Register an Account

To use Graygle.ai, you need an account. Follow these steps:

1. Visit graygle.ai/register.php.
2. Enter your full name, phone number, email, and password.
3. Click “Register” to submit the form.
4. Check your email for a verification link. Click it to activate your account.
5. Expected: You’ll be redirected to the login page upon successful verification.

Note: Ensure your email is valid, as verification is required. If you don’t receive the email, check your spam folder or contact support.

POST /graygle/register.php
Content-Type: application/x-www-form-urlencoded

fullname=John+Doe&phone=1234567890&email=john@example.com&password=secure123

Example: Registration form submission.

2. Log In

Access your dashboard:

1. Go to graygle.ai/index.php.
2. Enter your email and password.
3. Click “Log In”.
4. Expected: You’ll land on the dashboard (`my_apps.php`), listing your apps.

Error Handling: If login fails, check for “Invalid email or password” messages. Use the “Forgot Password” link to reset your password.

[Screenshot: Login page showing email/password fields and “Forgot Password” link.]

3. Password Reset

If you forget your password:

1. Click “Forgot Password” on the login page.
2. Enter your email and submit.
3. Check your email for a reset link.
4. Click the link, enter a new password, and confirm.
5. Expected: You can now log in with the new password.

Managing Your Account

1. Profile Settings

Update your account details:

1. From the dashboard, click your profile icon (top-right).
2. Select “Profile Settings”.
3. Update fields like name, phone, or email.
4. Click “Save Changes”.
5. Expected: Confirmation message: “Profile updated successfully.”

2. Security

Enhance account security:

• Change Password: In “Security Settings,” enter current and new passwords.
• Two-Factor Authentication (2FA): Enable 2FA for added protection (if available).

3. Subscription Plans

Graygle.ai offers free and premium plans:

• Free Plan: Limited apps and API calls.
• Premium Plan: Higher limits, priority support. Visit x.ai/grok for pricing.

Creating and Managing Apps

1. Create an App

Apps represent individual chat bubble instances:

1. From `my_apps.php`, click “Create New App”.
2. Enter:
   • App Name: Unique name (e.g., “Customer Support Bot”).
   • Assistant Name: Bot’s display name.
   • Primary Purpose: E.g., “Customer Support” or “Sales”.
   • Description: Brief overview.
3. Click “Create App”.
4. Expected: App appears in your dashboard with a unique `app_id`.

INSERT INTO apps (app_name, assistant_name, primary_purpose, description, user_id)
VALUES ('Support Bot', 'Support Assistant', 'Customer Support', 'Handles customer queries', 1);

Example: SQL for app creation.

2. Edit an App

Modify app details:

1. Click “Edit” next to an app in `my_apps.php`.
2. Update fields and save.
3. Expected: Changes reflect immediately.

3. Delete an App

Remove unused apps:

1. Click “Delete” next to an app.
2. Confirm deletion.
3. Expected: App is removed; associated chat bubbles stop functioning.

Configuring Chat Bubbles

1. Customize Appearance

Tailor your chat bubble’s look and feel:

1. In `my_apps.php`, click “Configure” for an app.
2. Set:
   • Chat Color: Hex code (e.g., `#2196f3`).
   • Position: Bottom-right, bottom-left, etc.
   • Shape: Circle, square, or custom.
   • Auto-Open: Enable to open modal on page load.
3. Click “Save Configuration”.
4. Expected: Changes apply to the bubble when embedded.

INSERT INTO chat_configurations (app_id, chat_color, position, shape)
VALUES (1, '#2196f3', 'bottom-right', 'circle');

2. Fallback Configuration

Define a default config if API fails:

• Enable fallback in app settings.
• Set default color, position, and shape.
• Expected: Bubble uses fallback if `get-chat-config.php` fails.

Embedding Chat Bubbles

Add a chat bubble to your website:

1. In `my_apps.php`, copy the embed script for an app.
2. Paste it into your website’s HTML, typically before ``.
3. Expected: Bubble appears on your site, styled per configuration.

<script src="https://peakafricaconsultants.com/graygle/embed/embed.js?app_id=1"></script>

Note: Replace `app_id=1` with your app’s ID. Ensure the script loads synchronously to avoid initialization issues.

[Screenshot: Embed script location in `my_apps.php`.]

Testing Chat Bubbles

Use `bubble-test.php` to verify your chat bubble:

1. Access the Testing Tool

1. In `my_apps.php`, click “Test Bubble” for an app.
2. URL: `bubble-test.php?app_id=X` (e.g., `app_id=1`).
3. Expected: Page loads with testing interface.

2. Check Bubble Status

Verify bubble presence:

1. Click “Check Bubble Status”.
2. Success: Icon turns green (`fa-check-circle`), alert: “Chat bubble is visible!”.
3. Failure: Icon turns red (`fa-times-circle`), alert: “Chat bubble not found.”.

[Screenshot: `bubble-test.php` with “Check Bubble Status” button.]

3. Test Fallback Config

Force fallback settings:

1. Click “Use Fallback Config”.
2. Expected: Redirects to `embed.js?app_id=X&force_fallback=true`, bubble uses fallback settings.

4. Debug Information

Use the debug panel:

• Debug Info Tab: Shows embed URL, `app_id`, config status, raw JSON, bubble status.
• Debugging Steps Tab: Lists steps like checking console, network, and DOM.

Troubleshooting

Resolve common issues with these steps.

fetch('https://peakafricaconsultants.com/graygle/embed/embed.js?app_id=1')
    .then(res => console.log('Status:', res.status));

API Reference

Graygle.ai provides an API for fetching chat configurations.

GET /api/get-chat-config.php

Retrieve configuration for an app.

• Endpoint: `https://peakafricaconsultants.com/graygle/api/get-chat-config.php`.
• Params: `app_id` (integer, required).
• Headers: `Accept: application/json`.
• Success Response:

  HTTP/ 200 OK
  Content-Type: application/json
  
  {
    "chat_color": "#2196f3",
    "position": "bottom-right",
    "shape": "circle",
    "auto_open": false
  }