Skip to main content

Chatbot Widget

Integrate Ordify AI agents into your website or application using the Ordify Chat Widget. This production-ready React component enables seamless AI chat functionality with zero configuration required.

Overview​

The Ordify Chat Widget is a React component that connects your custom Ordify agents to any web application. It provides a polished, responsive chat interface and requires no CSS imports or complex setup. Use it in a React app (npm) or on WordPress and other sites via a single script tag — no build step required.

Key features​

  • Zero configuration: Drop-in widget with no CSS imports or additional setup
  • React or script-tag: Use from npm in a React app, or load via script tag on WordPress and static sites
  • Multiple modes: Floating and embedded chat interfaces
  • Professional UI: Polished, responsive chat interface
  • Real-time AI: Direct integration with your Ordify agents
  • TypeScript support: Full type safety and IntelliSense
  • Customizable: Colors, themes, and styling options
  • Context aware: Send hidden user context to AI for personalized responses
  • Welcome screen: Display quick action questions before the session starts

Prerequisites​

  1. API Key: Available in your Ordify dashboard (Settings → API)
  2. Agent ID: Found in your agent configuration panel

Quick start​

Step 1: Install the library​

npm install ordify-chat-widget

Step 2: Add to your React app​

import { OrdifyChat } from 'ordify-chat-widget'

function App() {
  return (
    <OrdifyChat
      agentId="your-agent-id"
      apiKey="your-api-key"
      apiBaseUrl="https://r.ordify.ai"
      chatName="AI Assistant"
      buttonText="?"
      initialContext="user_id: demo_user, page: /home"
    />
  )
}

No CSS imports, no additional setup. All necessary styles are included automatically.

Chat modes​

Floating chat​

A floating button in the bottom-right corner. Perfect for sites that want chat support without taking up page space.

<OrdifyChat
  agentId="your-agent-id"
  apiKey="your-api-key"
  apiBaseUrl="https://r.ordify.ai"
  mode="floating"
  position="bottom-right"
  buttonText="AI Chat"
/>

Embedded chat​

A full-page chat interface embedded directly in your content. Ideal for dedicated support pages.

<OrdifyChat
  agentId="your-agent-id"
  apiKey="your-api-key"
  apiBaseUrl="https://r.ordify.ai"
  mode="embedded"
  height="500px"
  chatName="Support Assistant"
/>

Configuration options​

Required props​

  • agentId (string): Your Ordify agent ID
  • apiKey (string): Your API key

Optional props​

OptionTypeDefaultDescription
apiBaseUrlstring"https://r.ordify.ai"API endpoint URL
chatNamestring"Chat Assistant"Title text in chat header
buttonTextstring"AI Chat"Text on floating button
modestring"floating""floating" or "embedded"
positionstring"bottom-right"Floating button position
primaryColorstring—Custom primary color for welcome screen
agentImagestring—URL to agent avatar image
onSessionCreatedfunction—Callback when a new session is created
initialMessagestring—Message to auto-send when the widget loads
initialContextstring—Hidden context sent to AI (user ID, page info)
quickQuestionsstring[]—Quick action buttons in welcome screen
welcomeMessagestring"Hi there 👋 How can we help?"Greeting shown in welcome screen
welcomeImagestring—Image displayed in welcome screen
themestring"auto""light", "dark", or "auto"

WordPress integration​

Add the chat widget to WordPress or any site without React by loading the standalone script from a CDN.

Option 1: Theme (e.g. Twenty Twenty-Five)​

Add to your theme's functions.php:

if ( ! function_exists( 'your_theme_ordify_chat_widget' ) ) :
  function your_theme_ordify_chat_widget() {
    if ( is_admin() ) { return; }
    $config = array(
      'agentId'        => 'your-agent-id',
      'apiKey'         => 'your-api-key',
      'apiBaseUrl'     => 'https://r.ordify.ai',
      'mode'           => 'floating',
      'position'       => 'bottom-right',
      'buttonText'     => 'Chat',
      'chatName'       => 'Assistant',
      'primaryColor'   => '#f3b43b',
      'welcomeMessage' => 'Hi, how can we help?',
      'quickQuestions' => array(
        'Where is your location?',
        'How do I schedule an appointment?',
      ),
    );
    $script_url = 'https://unpkg.com/ordify-chat-widget/dist/ordify-chat-widget.standalone.js';
    ?>
    <script src="<?php echo esc_url( $script_url ); ?>"></script>
    <script>OrdifyChatWidget.mount(null, <?php echo wp_json_encode( $config ); ?>);</script>
    <?php
  }
endif;
add_action( 'wp_footer', 'your_theme_ordify_chat_widget', 99 );

Use a pinned version in the script URL (e.g. @1.0.42) so updates are intentional. Check npm for the latest version.

Option 2: Plugin (Insert Headers and Footers, WPCode, etc.)​

<script src="https://unpkg.com/ordify-chat-widget@1.0.42/dist/ordify-chat-widget.standalone.js"></script>
<script>
  OrdifyChatWidget.mount(null, {
    agentId: "your-agent-id",
    apiKey: "your-api-key",
    apiBaseUrl: "https://r.ordify.ai",
    mode: "floating",
    position: "bottom-right",
    buttonText: "Chat",
    chatName: "Assistant",
    theme: "light",
    primaryColor: "#f3b43b",
    welcomeMessage: "Hi, how can we help?",
    quickQuestions: [
      "Do you take Insurance?",
      "How much do hearing aids cost?",
      "Where is your location?",
      "How do I schedule an appointment?"
    ]
  });
</script>

Option 3: Data attributes (one script tag)​

<script
  src="https://unpkg.com/ordify-chat-widget@1.0.42/dist/ordify-chat-widget.standalone.js"
  data-ordify-widget
  data-ordify-agent-id="your-agent-id"
  data-ordify-api-key="your-api-key"
  data-ordify-api-base-url="https://r.ordify.ai"
  data-ordify-theme="light"
  data-ordify-button-text="Chat"
  data-ordify-chat-name="Assistant"
  data-ordify-quick-questions='["Do you take Insurance?","How much do hearing aids cost?"]'
></script>

Session management​

Track session IDs for analytics:

import { useState } from 'react'
import { OrdifyChat } from 'ordify-chat-widget'

export function ChatWithSessionTracking() {
  const [sessionId, setSessionId] = useState<string | null>(null)

  return (
    <OrdifyChat
      agentId="your-agent-id"
      apiKey="your-api-key"
      apiBaseUrl="https://r.ordify.ai"
      mode="floating"
      onSessionCreated={(id) => {
        setSessionId(id)
        console.log('New session created:', id)
      }}
    />
  )
}

Hidden context​

Send user information to your AI agent without displaying it to users:

<OrdifyChat
  agentId="your-agent-id"
  apiKey="your-api-key"
  apiBaseUrl="https://r.ordify.ai"
  mode="floating"
  initialContext={`user_id: ${user?.id}, email: ${user?.email}, page: ${router.pathname}`}
/>

Use this to pass user ID, current page URL, subscription tier, or any analytics data. Users only see the normal chat interface — the context is never displayed.

Resources​