Younme SDK Demo

🧪 Test the SDK

Load Your Agent

Customize Colors

Click a preset or choose custom colors:

Default Purple

Red Orange

Green

Blue

Orange

Pink

Primary:

Secondary:

Control Widget

📚 SDK Reference

Query Parameters

Parameter	Type	Description
`hide_button`	boolean	Set to `true` to hide the floating button (headless mode)
`primary_color`	hex	Button primary color (without #). Example: `ff6b6b`
`secondary_color`	hex	Button secondary color for gradient (without #). Example: `ee5a24`
`button_bottom`	CSS unit	Button distance from bottom. Widget positions above button. Example: `20px`, `5%`, `2rem`
`button_right`	CSS unit	Button distance from right. Widget aligns with button. Example: `20px`, `5%`, `2rem`
`initial_focus`	boolean	Auto-focus message input when chat opens

JavaScript API

Method	Description
`YounmeChat.open()`	Open the chat widget
`YounmeChat.close()`	Close the chat widget
`YounmeChat.toggle()`	Toggle chat open/closed
`YounmeChat.isOpen()`	Returns `true` if chat is open
`YounmeChat.showButton()`	Show the floating button
`YounmeChat.hideButton()`	Hide the floating button
`YounmeChat.ready(callback)`	Execute callback when SDK is loaded

Note: All methods are safe to call before SDK loads. Operations are queued and executed when ready.

💻 Integration Examples

Basic Integration (Non-Programmatic)

Add one script tag to your website:

With Custom Colors

<script src="https://younme.ai/sdk/YOUR_TOKEN.js?primary_color=ff6b6b&secondary_color=ee5a24" async></script>

Custom Position

Position the button (and widget) anywhere on the screen:

<script src="https://younme.ai/sdk/YOUR_TOKEN.js?button_bottom=50px&button_right=50px" async></script>

Headless Mode (Programmatic)

Hide the default button and control via JavaScript:

<!-- Load SDK without button -->
<script src="https://younme.ai/sdk/YOUR_TOKEN.js?hide_button=true" async></script>

<!-- Your custom button -->
<button onclick="YounmeChat.open()">Chat with us</button>

<!-- Or use ready callback -->
<script>
YounmeChat.ready(function() {
    // SDK is ready
    document.getElementById('my-btn').onclick = function() {
        YounmeChat.open();
    };
});
</script>

React/Vue/Angular Integration

<!-- In your HTML -->
<script src="https://younme.ai/sdk/YOUR_TOKEN.js?hide_button=true" async></script>

<!-- In your component -->
function ChatButton() {
    const handleClick = () => {
        window.YounmeChat.open(); // Safe to call anytime
    };
    
    return <button onClick={handleClick}>Support Chat</button>;
}

All Options Combined

<script src="https://younme.ai/sdk/YOUR_TOKEN.js?hide_button=true&primary_color=00a8ff&secondary_color=0097e6&button_bottom=30px&button_right=30px&initial_focus=true" async></script>

<script>
YounmeChat.ready(function() {
    console.log('SDK ready');
    
    // Conditionally show default button
    if (user.needsSupport) {
        YounmeChat.showButton();
    }
});
</script>