react-chilipiper

A React component for integrating Chili Piper scheduling functionality into your application.

Installation

Install the package via npm:

npm install react-chilipiper

Usage

Here's a basic example of how to use the ChiliPiper component in your React application:

Basic Example with Dynamic Data

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ChiliPiper from 'react-chilipiper';

const App: React.FC = () => {
  const [lead, setLead] = useState({ 'New Field': 'initial value' });

  const handleTrigger = (callback: () => void) => {
    document.getElementById('myButton')?.addEventListener('click', callback);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setLead({ 'New Field': e.target.value });
  };

  return (
    <div>
      <input type="text" value={lead['New Field']} onChange={handleInputChange} />
      <button id="myButton">Trigger ChiliPiper</button>
      <ChiliPiper domain="subdomain" router="inbound-router" lead={lead} trigger={handleTrigger} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

domain

• Type: string
• Required: true
• Description: The domain for the Chili Piper form.

router

• Type: string
• Required: true
• Description: The router for the Chili Piper form.

lead

• Type: object
• Required: true
• Description: The lead information to pass to Chili Piper.

trigger

• Type: (callback: () => void) => void
• Required: true
• Description: A function that accepts a callback to be called when the trigger event occurs.

License

ISC