@gosendflow/react-ai-agent

The official React component for seamlessly integrating the GoSendFlow AI Agent chatbot widget into your web applications (built with React, Next.js, Gatsby, etc.).

🚀 Installation

Install the component package using npm or yarn:

npm install @gosendflow/react-ai-agent
# or
yarn add @gosendflow/react-ai-agent

💡 Quick Usage

Simply import the Agent component and place it anywhere in your application's layout. For best results, place it at the root of your application (e.g., in App.js or layout.js in Next.js).

The widget will be loaded and initialized automatically.

// Example: Your Root Component (App.js, Layout.js, etc.)

import Agent from '@gosendflow/react-ai-agent';

function App() {
  return (
    <div className="app-container">
      {/* Your main application content goes here */}
      
      {/* The GoSendFlow AI Agent component */}
      <Agent 
        agentKey="YOUR_UNIQUE_AGENT_KEY_FROM_DASHBOARD" 
        themeName="modern"
      />
    </div>
  );
}

⚙️ Component Props

The Agent component accepts the following props:

| Prop | Type | Required | Default | Description | | :--- | :--- | :--- | :--- | :--- | | agentKey | string | YES | N/A | The unique ID key that links the widget to your specific GoSendFlow account and AI model. (Obtain this from the GoSendFlow dashboard.) | | themeName | string | No | 'default' | Defines the visual style of the widget. Use options like "modern", "clean", or "dark" to change the appearance. The list of valid themes is managed by the GoSendFlow service. | | primaryColor | string | No | N/A | Customizes the widget's main color (e.g., chat button, action links). Must be a valid CSS color string (e.g., a hex code like #4F46E5). | | secondaryColor | string | No | N/A | Customizes secondary UI elements, often used for background accents or secondary buttons. Must be a valid CSS color string. | | agentIcon | string | No | N/A | The icon displayed on the chat button. This property accepts two formats: 1. A raw SVG content string (e.g., <svg...></svg>). The component will automatically Base64 encode it. 2. A direct URL to an external image file (PNG, JPG, or SVG). | | CRMId | string | No | N/A | You can pass the customer ID in this this field if you would like to match the chat dialog by your own customer ID or Customer Relationship Management Id. GoSendFlow will keep a record of the CRMId along with the chat content for your record according to our data and privacy policy.| | baseUrl | string | No | https://gosendflow.com | (Advanced/Development) Overrides the domain where the core widget script (agent.js) is loaded from. Useful for testing against staging environments or local servers (e.g., http://localhost:3000). |

🛠️ Testing and Customization

To customize your GoSendFlow AI agent to match your theme, you can provide the theme option such as "modern", "clean", "dark", or "classic". More theme options may become available and will be announced here.

You can also provide the agentIcon to use on the main chat bar, along with primaryColor and secondaryColor for branding. You generally should not change the baseUrl as it is intended for advanced users who need to point the widget to a custom environment.

Here is an example of usage:

// Raw SVG for a chat bubble icon (the component will automatically Base64 encode this string)
const defaultIcon = '<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';

<Agent 
  agentKey="my-production-key" 
  themeName="dark" 
  primaryColor="#6366F1" // Indigo-500
  secondaryColor={undefined}  
  CRMId={'guest'}
  agentIcon={defaultIcon} 
/>

🤝 Support and Contributions

• Bugs/Issues: Please report any bugs or unexpected behavior using the GitHub Issues tracker.
• Support: For account-specific issues or general product inquiries, please visit the GoSendFlow support center at https://www.gosendflow.com/support.

📄 License

This package is licensed under the MIT License. See the LICENSE file for details.

Copyright (c) GoSendFlow Team