Embed widget on your website

Standard Integration (HTML)

Add the following code before the closing </body> tag:

<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="pk_YOUR_WIDGET_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>

Replace pk_YOUR_WIDGET_KEY with the widget key of your widget (found under Settings → Widgets → Snippet).

Single-Page Applications (React, Vue, Angular)

The script can also be placed in the <head> — it initializes automatically as soon as the DOM is ready.

React Example:

// In your App.js or Layout component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.silentchat.de/silentchat.min.js';
  script.setAttribute('data-widget-key', 'pk_YOUR_WIDGET_KEY');
  script.setAttribute('data-api-url', 'https://api.silentchat.de');
  script.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
  script.async = true;
  document.head.appendChild(script);
  return () => document.head.removeChild(script);
}, []);

Multiple Widgets on One Page

If you need multiple widgets on the same page, use different public keys. Each script loads its own widget instance.

Content Security Policy (CSP)

If you use a strict CSP, add the following entries:

• script-src: 'self' cdn.silentchat.de
• connect-src: 'self' api.silentchat.de wss://ws.silentchat.de

Troubleshooting

Widget not loading:

• Check the browser console for errors (F12 → Console)
• Disable ad blockers and test again
• Check CSP headers

Widget appears, but messages are not sent:

• Check if the domain is verified
• Check the browser console for network errors (F12 → Network)