Widget Embed (ES Module)
The Synaplan chat widget is a modern ES module. Add it to any website with a single script tag:
<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...).
Full Example
A complete embed with custom branding and settings:
<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 you today?',
messageLimit: 50,
maxFileSize: 10,
allowFileUpload: false,
lazy: true
})
</script>Programmatic Control
Hide the default button and trigger the chat from your own UI:
<button id="my-chat-btn">Chat with us</button>
<script type="module">
import SynaplanWidget from 'https://web.synaplan.com/widget.js'
SynaplanWidget.init({
widgetId: 'wdg_...',
hideButton: true
})
document.getElementById('my-chat-btn')
.addEventListener('click', () => SynaplanWidget.open())
</script>Features
- ES Module: Modern import with automatic code-splitting
- Lazy Loading: Vue and chat UI load only on first interaction
- Auto API Detection: No manual URL configuration needed
- Remote Config: Dashboard changes apply without re-deploying embed code
- File Upload: Support for PDFs, Word docs, images (when enabled)
- Responsive: Works on desktop, tablet, and mobile
- Theming: Light/dark themes with auto-detection