Widget Embed (ES Module)
Add the widget to your website with a single ES module import:
<script type="module">
import SynaplanWidget from 'https://web.synaplan.com/widget.js'
SynaplanWidget.init({
widgetId: 'YOUR_WIDGET_ID',
primaryColor: '#007bff'
})
</script>Replace YOUR_WIDGET_ID with the widget ID from your Synaplan dashboard (e.g. wdg_095ab...).
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
widgetId | string | required | Widget ID from dashboard |
position | string | 'bottom-right' | bottom-right, bottom-left, top-right, top-left |
primaryColor | string | '#007bff' | Primary brand color (hex) |
iconColor | string | '#ffffff' | Button icon color |
buttonIcon | string | 'chat' | chat, headset, help, robot, message, support |
buttonIconUrl | string | — | Custom icon URL (overrides buttonIcon) |
defaultTheme | string | 'light' | light or dark |
detectTheme | boolean | false | Auto-detect host page theme |
autoOpen | boolean | false | Open chat on page load |
autoMessage | string | 'Hello! How can I help you today?' | Greeting message |
widgetTitle | string | 'Chat Support' | Chat header title |
messageLimit | number | 50 | Max messages per session |
allowFileUpload | boolean | false | Enable file uploads |
fileUploadLimit | number | 3 | Max files per message |
maxFileSize | number | 10 | Max file size (MB) |
lazy | boolean | true | Lazy-load UI on first click |
fullscreenMode | boolean | false | Start in fullscreen |
allowFullscreen | boolean | false | Allow fullscreen toggle |
hideButton | boolean | false | Hide button (API control only) |
apiUrl | string | auto | Override API URL |
externalUserId | string | — | External user ID |
privacyPolicyUrl | string | — | Privacy policy link |
allowedDomains | string[] | [] | Restrict to specific domains |
JavaScript API Methods
| Method | Description |
|---|---|
SynaplanWidget.init(config) | Initialize the widget with configuration |
SynaplanWidget.open() | Open the chat panel |
SynaplanWidget.close() | Close the chat panel |
SynaplanWidget.startNewChat() | Start a new conversation |
SynaplanWidget.destroy() | Remove the widget from the page |
Example: Full Configuration
<script type="module">
import SynaplanWidget from 'https://web.synaplan.com/widget.js'
SynaplanWidget.init({
widgetId: 'wdg_095ab093966991158f9957f42ae8b4f2',
position: 'bottom-right',
primaryColor: '#13224e',
iconColor: '#ffffff',
defaultTheme: 'light',
autoOpen: false,
autoMessage: 'Hi! How can I help?',
messageLimit: 50,
allowFileUpload: true,
fileUploadLimit: 3,
maxFileSize: 10,
lazy: true
})
</script>Example: Programmatic Control
<script type="module">
import SynaplanWidget from 'https://web.synaplan.com/widget.js'
SynaplanWidget.init({
widgetId: 'wdg_...',
hideButton: true
})
// Open chat via your own button
document.getElementById('my-chat-btn')
.addEventListener('click', () => SynaplanWidget.open())
</script>