Widget Installation

The SilentChat widget can be added to any website or web application. Below you will find step-by-step instructions for the most common platforms and frameworks.

In every example, replace YOUR_KEY with the public key shown on your widget’s settings page in the dashboard.

HTML (Plain Website)

Add the following snippet just before the closing </body> tag on every page:

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

The async attribute ensures the script does not block page rendering.

WordPress

1. In your WordPress admin panel go to Appearance → Theme File Editor.
2. Open the footer.php file (or your theme’s equivalent).
3. Paste the script snippet just before </body>:

<!-- SilentChat Widget -->
<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  async
></script>

4. Click Update File to save.

Alternatively, you can use a plugin such as Insert Headers and Footers to add the snippet without editing theme files directly.

Shopify

1. In your Shopify admin go to Online Store → Themes.
2. Click Actions → Edit Code.
3. Open theme.liquid.
4. Add the snippet just before the closing </body> tag:

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

5. Click Save.

React

Add the widget in a top-level component (e.g. your root layout or App component) using a useEffect hook:

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.async = true;
    document.body.appendChild(script);

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

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

This ensures the script is loaded once when the component mounts and cleaned up when it unmounts.

Vue

In your root component (e.g. App.vue) add the script in the onMounted lifecycle hook:

<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.async = true;
  document.body.appendChild(scriptEl);
});

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

Google Tag Manager

1. In your GTM workspace, click Tags → New.
2. Choose Custom HTML as the tag type.
3. Paste the following into the HTML field:

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.silentchat.de/silentchat.min.js';
    s.setAttribute('data-widget-key', 'YOUR_KEY');
    s.async = true;
    document.body.appendChild(s);
  })();
</script>

4. Set the trigger to All Pages.
5. Save and Publish the container.

Verifying the Installation

After adding the snippet, open your website in a browser and confirm that:

• The chat bubble appears in the configured position.
• Clicking the bubble opens the chat window.
• A test message sent from the widget appears in your SilentChat dashboard under Conversations.

If the widget does not appear, open the browser console and check for errors. The most common issue is an incorrect widget key.