Yhangry SDK

React SDK for embedding the Yhangry private chef service widget into your holiday rental website.

📦 Installation

npm install @yhangry/sdk

🚀 Getting Started

1. Wrap your application in YhangryProvider

In your main app entry point (e.g., src/index.tsx), wrap your app in the YhangryProvider and provide your clientId:

import { YhangryProvider } from '@yhangry/sdk';
import App from './App';

const Root = () => (
  <YhangryProvider clientId="your_client_id">
    <App />
  </YhangryProvider>
);

export default Root;

2. Render the Widget component

Place the widget anywhere in your component tree:

import { Widget } from '@yhangry/sdk';

function BookingPage() {
  return <Widget />;
}

⚙️ Configuration

You can obtain your clientId from the Yhangry Developers Portal.

🔧 Widget Props

The widget will use the default configuration from your developer dashboard. You can override this behavior by passing a config object.

<Widget
  config={{
    theme: 'light',
    color_hex: '#000000',
    copy_title: 'Book a Private Chef',
    copy_subtitle: 'Delicious meals in your holiday rental'
  }}
/>

| Prop | Type | Description | | --------------- | --------------------- | ------------------------------------------- | | id | string | Yhangry Widget ID | | theme | "light" | "dark" | Theme style for the widget | | color_hex | string | Primary color (hex format, e.g. #FF0000) | | copy_title | string | Custom title displayed in the widget | | copy_subtitle | string | Custom subtitle displayed below the title |

💬 Need Help?

Visit developers.yhangry.com or reach out to us at [email protected].