Widget API Reference | Synaplan API Documentation

🎮 Interactive Controls

Click these buttons to test the API methods:

📚 Complete API Reference

Method	Description	Example
`getInput()`	Returns the input DOM element	`var input = SynaplanWidget.getInput();`
`getButton()`	Returns the submit button element	`var btn = SynaplanWidget.getButton();`
`getUploadButton()`	Returns the upload/attachment button	`var upload = SynaplanWidget.getUploadButton();`
`setText(text)`	Set input text instantly	`SynaplanWidget.setText('Hello!');`
`getText()`	Get current input text	`var text = SynaplanWidget.getText();`
`typeText(text, speed)`	Animate typing effect (speed in ms, auto-stops previous)	`SynaplanWidget.typeText('Hello!', 100);`
`stopTyping()`	Stop any ongoing typing animation	`SynaplanWidget.stopTyping();`
`clear()`	Clear the input field (also stops typing)	`SynaplanWidget.clear();`
`focus()`	Focus the input field	`SynaplanWidget.focus();`
`open()`	Open the chat overlay	`SynaplanWidget.open();`
`close()`	Close the chat overlay	`SynaplanWidget.close();`
`isOpen()`	Check if overlay is open	`if (SynaplanWidget.isOpen()) {...}`
`styleInput(css)`	Apply custom CSS to input	`SynaplanWidget.styleInput({color: 'red'});`
`styleButton(css)`	Apply custom CSS to button	`SynaplanWidget.styleButton({background: 'green'});`
`styleContainer(css)`	Apply custom CSS to container	`SynaplanWidget.styleContainer({padding: '20px'});`

💡 Example 1: Type Animation

// Animate text typing into the input
SynaplanWidget.typeText('How can I help you today?', 80);

💡 Example 2: Cycle Through Suggestions

// Show different suggestions every few seconds
const suggestions = [
    'What is AI?',
    'How does machine learning work?',
    'Explain neural networks',
    'What are transformers?'
];

let currentIndex = 0;
setInterval(() => {
    // typeText automatically clears previous animations
    // No need to manually call stopTyping()
    SynaplanWidget.typeText(suggestions[currentIndex], 60);
    currentIndex = (currentIndex + 1) % suggestions.length;
}, 5000);

💡 Note: typeText() automatically stops any previous typing animation before starting a new one. This prevents text corruption from overlapping animations.

💡 Example 3: Custom Styling

// Apply custom styles dynamically
SynaplanWidget.styleInput({
    fontSize: '24px',
    color: '#061c3e',
    fontWeight: 'bold',
    borderColor: 'rgba(0,229,255,0.5)'
});

SynaplanWidget.styleButton({
    background: 'linear-gradient(45deg, #00E5FF, #00FF9D)',
    transform: 'scale(1.1)'
});

💡 Example 4: Direct DOM Access

// Get elements for advanced manipulation
const input = SynaplanWidget.getInput();
const uploadBtn = SynaplanWidget.getUploadButton();

// Add event listeners
input.addEventListener('keyup', (e) => {
    console.log('User typed:', e.target.value);
});

uploadBtn.addEventListener('click', () => {
    console.log('Upload clicked!');
});

// Animate with any library (GSAP, anime.js, etc.)
input.style.transition = 'all 0.5s ease';
input.style.transform = 'scale(1.05)';

💡 Example 5: Multiple Widgets

// If you have multiple widgets, access by widget ID
SynaplanInlineWidget[1].setText('Widget 1');
SynaplanInlineWidget[2].setText('Widget 2');
SynaplanInlineWidget[3].setText('Widget 3');

// Or use the shorthand for the first widget
SynaplanWidget.setText('Hello!');

Widget JavaScript API