Website Embedding

Last updated: November 29, 2025

Website Embedding

Add the SimpleChat widget to any website with our simple embed code. This guide covers various platforms and advanced configurations.

Getting Your Embed Code
  1. Go to Bot Studio
  2. Click Get Code in the top bar
  3. Copy the embed code

Your code looks like:

<script src="https://bot_xxx.w.simplechat.bot/widget.js"></script>
Platform-Specific InstructionsHTML/Static Websites

Add before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your content -->

  <!-- SimpleChat Widget -->
  <script src="https://bot_xxx.w.simplechat.bot/widget.js"></script>
</body>
</html>
WordPress

Option 1: Theme Editor

  1. Go to Appearance > Theme Editor
  2. Select footer.php
  3. Add code before </body>
  4. Save

Option 2: Plugin (Recommended)

  1. Install "WPCode" or "Insert Headers and Footers"
  2. Go to plugin settings
  3. Add code to "Footer" section
  4. Save
Shopify
  1. Go to Online Store > Themes
  2. Actions > Edit Code
  3. Open theme.liquid
  4. Add code before </body>
  5. Save
Wix
  1. Go to Settings
  2. Click Custom Code
  3. Add Custom Code
  4. Paste your embed code
  5. Set placement: Body - End
  6. Apply to: All Pages
  7. Save
Squarespace
  1. Settings > Advanced
  2. Click Code Injection
  3. Paste in Footer section
  4. Save
Webflow
  1. Project Settings > Custom Code
  2. Add to Footer Code section
  3. Publish site
Next.js/React

Using Script component:

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://bot_xxx.w.simplechat.bot/widget.js"
        strategy="lazyOnload"
      />
    </>
  )
}

Using useEffect:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
    script.async = true;
    document.body.appendChild(script);

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

  return <YourApp />;
}
Vue.js

In your main App.vue or index.html:

<script src="https://bot_xxx.w.simplechat.bot/widget.js"></script>

Or dynamically:

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
    document.body.appendChild(script);
  }
}
</script>
Google Tag Manager
  1. Go to Tags > New
  2. Choose Custom HTML
  3. Paste your embed code
  4. Set trigger: All Pages - Page View
  5. Submit and Publish
Advanced ConfigurationDelayed Loading

Load widget after page is ready:

<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      var script = document.createElement('script');
      script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
      document.body.appendChild(script);
    }, 2000); // 2 second delay
  });
</script>
Conditional Loading

Show widget only on certain pages:

<script>
  if (window.location.pathname.includes('/contact')) {
    var script = document.createElement('script');
    script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
    document.body.appendChild(script);
  }
</script>
User Authentication Context

Pass user info to widget:

<script>
  window.SimpleChatConfig = {
    userName: 'John Doe',
    userEmail: 'john@example.com'
  };
</script>
<script src="https://bot_xxx.w.simplechat.bot/widget.js"></script>
Verifying Installation

After adding the code:

  1. Clear cache - Browser and any CDN cache
  2. Visit your website - In incognito mode preferably
  3. Look for the widget - Bottom right corner
  4. Test functionality - Send a test message
TroubleshootingWidget Not Appearing

Check these:

  • Code is before </body> tag
  • No JavaScript errors (F12 > Console)
  • Bot is active (not paused/deleted)
  • Browser cache cleared

Common Issues:

  • Content Security Policy blocking script
  • Ad blocker interfering
  • Theme/plugin conflicts
Widget Appears But Doesn't Work

Check:

  • Internet connection
  • Telegram group configured
  • Bot subscription active
Multiple Widgets Appearing

Cause: Code added multiple times

Fix: Remove duplicate embed codes

Performance OptimizationLazy Loading

Use lazy loading to not affect page speed:

<script>
  window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
    script.async = true;
    document.body.appendChild(script);
  });
</script>
Intersection Observer

Load when user scrolls to bottom:

<script>
  if ('IntersectionObserver' in window) {
    const footer = document.querySelector('footer');
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        var script = document.createElement('script');
        script.src = 'https://bot_xxx.w.simplechat.bot/widget.js';
        document.body.appendChild(script);
        observer.disconnect();
      }
    });
    observer.observe(footer);
  }
</script>
Security
  • Widget loads over HTTPS
  • No sensitive data exposed
  • Cross-origin security handled
  • Safe to use on any domain
Next Steps