Gam3s Assistant Widget

How to Install, Import, and Use

1. Execute the following command in the CLI:

   npm i gam3s-assistant-widget

2. Create a .env file in the project's root directory and add the environment variable:

   VITE_GAM3S_ASSISTANT_APP_URL=https://ai.gam3s.gg

3. Import the widget component in your project:

   import { Widget } from "gam3s-assistant-widget";

4. Use the widget in your application:

   <Widget url={import.meta.env.VITE_GAM3S_ASSISTANT_APP_URL} />

   <Widget url="https://ai.gam3s.gg" />

🎨 How to Customize

WidgetProps Interface Documentation

The WidgetProps interface defines the configurable properties for the Widget component. These properties allow developers to customize the appearance and behavior of the widget's iframe and toggle button.

📌 Interface Definition

interface WidgetProps {
  url: string;
  iframeHeight?: string;
  iframeWidth?: string;
  iframeBottomDistance?: string;
  iframeRightDistance?: string;
  buttonHeight?: string;
  buttonWidth?: string;
  buttonBottomDistance?: string;
  buttonRightDistance?: string;
}

📌 Property Descriptions

1. url (required)

• Type: string
• Description: Specifies the base URL to be loaded inside the iframe.
• Example:

  <Widget url="https://ai.gam3s.gg" />

2. iframeHeight (optional)

• Type: string
• Default Value: "600px"
• Description: Sets the height of the iframe in non-mobile views.
• Example:

  <Widget iframeHeight="500px" />

3. iframeWidth (optional)

• Type: string
• Default Value: "400px"
• Description: Sets the width of the iframe in non-mobile views.
• Example:

  <Widget iframeWidth="450px" />

4. iframeBottomDistance (optional)

• Type: string
• Default Value: "88px"
• Description: Determines the distance of the iframe from the bottom of the screen.
• Example:

  <Widget iframeBottomDistance="100px" />

5. iframeRightDistance (optional)

• Type: string
• Default Value: "16px"
• Description: Defines how far the iframe is from the right side of the screen.
• Example:

  <Widget iframeRightDistance="20px" />

6. buttonHeight (optional)

• Type: string
• Default Value: "60px"
• Description: Sets the height of the toggle button that opens the widget.
• Example:

  <Widget buttonHeight="55px" />

7. buttonWidth (optional)

• Type: string
• Default Value: "60px"
• Description: Sets the width of the toggle button.
• Example:

  <Widget buttonWidth="55px" />

8. buttonBottomDistance (optional)

• Type: string
• Default Value: "16px"
• Description: Determines the distance of the toggle button from the bottom of the screen.
• Example:

  <Widget buttonBottomDistance="25px" />

9. buttonRightDistance (optional)

• Type: string
• Default Value: "16px"
• Description: Defines how far the toggle button is from the right side of the screen.
• Example:

  <Widget buttonRightDistance="30px" />

📌 Component Usage Example

import { Widget } from "gam3s-assistant-widget";

const App = () => {
  return (
    <div>
      <Widget
        url="https://ai.gam3s.gg"
        iframeHeight="600px"
        iframeWidth="400px"
        iframeBottomDistance="88px"
        iframeRightDistance="16px"
        buttonHeight="60px"
        buttonWidth="60px"
        buttonBottomDistance="16px"
        buttonRightDistance="16px"
      />
    </div>
  );
};

export default App;