SilentChat

Widget Installation

The SilentChat widget is a lightweight JavaScript snippet that adds a live-chat bubble to your website. Installation takes less than five minutes and does not require a build step.

Choose the guide that matches your platform:

Plain HTML

Log in to the SilentChat dashboard and go to Chat Systems → Widgets.

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

The snippet loads the widget asynchronously so it does not block page rendering.

WordPress

The easiest way is our free plugin (WordPress 6.3 or later, PHP 7.4 or later):

  1. Download the plugin as a ZIP and upload it under Plugins → Add New Plugin → Upload Plugin. Activate it.
  2. Enter your widget key (it starts with pk_) under Settings → SilentChat and save.
  3. Done. If you like, hide the chat on individual pages or load it only on click.

Download the plugin (ZIP) ↓

Without the plugin, use a header/footer plugin:

  1. In your WordPress admin, install a header/footer plugin such as WPCode (formerly “Insert Headers and Footers”) and open its header & footer settings.
  2. Paste the snippet into the footer section.
<!-- SilentChat Widget -->
<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>
  1. Save. The widget will appear on all pages.

Pasting the snippet directly into your theme’s footer.php works too, but the change is lost on the next theme update unless you use a child theme.

Shopify

  1. In your Shopify admin, go to Online Store → Themes and click Actions → Edit Code.
  2. Open theme.liquid and locate the closing </body> tag.
  3. Paste the snippet just before </body> and click Save.
<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>
  1. The widget will appear on all pages of your Shopify store, including the checkout (if your plan supports custom scripts).

React

For React applications, use the sc() API to initialise the widget after the component mounts.

import { useEffect } from 'react';


function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.silentchat.de/silentchat.min.js';
    script.setAttribute('data-widget-key', 'YOUR_KEY');
    script.setAttribute('data-api-url', 'https://api.silentchat.de');
    script.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
    script.async = true;
    document.body.appendChild(script);


    return () => {
      document.body.removeChild(script);
    };
  }, []);


  return <>{/* your app content */}</>;
}

Add <ChatWidget/> to your root layout or App component.

Vue

The approach for Vue is the same as React: add the base snippet to your HTML file and initialise from a component.

<script setup>
import { onMounted, onUnmounted } from 'vue';


let scriptEl = null;


onMounted(() => {
  scriptEl = document.createElement('script');
  scriptEl.src = 'https://cdn.silentchat.de/silentchat.min.js';
  scriptEl.setAttribute('data-widget-key', 'YOUR_KEY');
  scriptEl.setAttribute('data-api-url', 'https://api.silentchat.de');
  scriptEl.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
  scriptEl.async = true;
  document.body.appendChild(scriptEl);
});


onUnmounted(() => {
  if (scriptEl) {
    document.body.removeChild(scriptEl);
  }
});
</script>

Google Tag Manager

  1. In GTM, create a new tag and choose Custom HTML as the tag type.
  2. Paste the full installation snippet (including the init call) into the HTML field.
  3. Set the trigger to All Pages (or a specific page trigger if needed).
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.silentchat.de/silentchat.min.js';
    s.setAttribute('data-widget-key', 'YOUR_KEY');
    s.setAttribute('data-api-url', 'https://api.silentchat.de');
    s.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
    s.async = true;
    document.body.appendChild(s);
  })();
</script>
  1. Save and publish the container.

GTM injects scripts asynchronously. The widget will load correctly but may appear slightly later than with a direct HTML installation.

Verifying the Installation

  • Open your website in a browser — the SilentChat bubble should appear in the corner of the page.
  • Send a test message. It should appear in your SilentChat dashboard under Conversations.
  • Open the browser developer console and confirm there are no errors from silentchat.

If the widget does not appear, check that your domain is listed under Settings → Widgets → Allowed Domains.

Voice messages: permission on your website

Voice messages need the visitor’s microphone. If your website sends a Permissions-Policy header that does not allow the microphone, the browser never even asks the visitor — the record button appears but does nothing. The browser console then shows "Permissions policy violation: microphone is not allowed in this document". Allow the microphone for your own page:

Permissions-Policy: microphone=(self)

If your website sends no Permissions-Policy header at all, there is nothing to do: without a header the default is already "own page only", and that is enough. This setting affects voice messages only — without it the widget works fully, just without recording.

To see what your page currently sends:

curl -sI https://ihre-domain.de | grep -i permissions-policy

If the widget runs inside an iframe, the surrounding document must additionally delegate the permission to the frame:

<iframe src="..." allow="microphone"></iframe>
Widget Installation | SilentChat