Quick Start

1. Get your embed code

After creating your account and setting up your chatbot, copy this code from your dashboard:

<script>
(function() {
  var chatbuddy = document.createElement('div');
  chatbuddy.id = 'chatbuddy-widget';
  document.body.appendChild(chatbuddy);
  
  var script = document.createElement('script');
  script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
  script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
  script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
  document.head.appendChild(script);
})();
</script>

2. Add to your website

Paste the code just before the closing </body> tag on every page where you want the chat widget to appear.

Popular Platforms

Choose your platform to see specific implementation instructions:

HTML / Static Websites

For basic HTML websites, GitHub Pages, Netlify, Vercel, and other static site generators

Simply paste the embed code before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <h1>Your content here</h1>
  
  <!-- NedChat Widget -->
  <script>
  (function() {
    var chatbuddy = document.createElement('div');
    chatbuddy.id = 'chatbuddy-widget';
    document.body.appendChild(chatbuddy);
    
    var script = document.createElement('script');
    script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
    script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
    script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
    document.head.appendChild(script);
  })();
  </script>
</body>
</html>

React

Integration with React applications (Create React App, Next.js, Vite, etc.)

Add the widget using useEffect hook in your main App component:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Create widget container
    const chatbuddy = document.createElement('div');
    chatbuddy.id = 'chatbuddy-widget';
    document.body.appendChild(chatbuddy);
    
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
    script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
    script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
    document.head.appendChild(script);
    
    // Cleanup function
    return () => {
      const existingWidget = document.getElementById('chatbuddy-widget');
      if (existingWidget) {
        existingWidget.remove();
      }
      const existingScript = document.querySelector('script[data-chatbot-id]');
      if (existingScript) {
        existingScript.remove();
      }
    };
  }, []);

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

export default App;

WordPress

The most popular way to add NedChat to WordPress sites

Method 1: Theme Footer (Recommended)

Add to your theme's footer.php file before </body>:

<script>
(function() {
  var chatbuddy = document.createElement('div');
  chatbuddy.id = 'chatbuddy-widget';
  document.body.appendChild(chatbuddy);
  
  var script = document.createElement('script');
  script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
  script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
  script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
  document.head.appendChild(script);
})();
</script>

Method 2: Functions.php

Add to your theme's functions.php file:

function add_nedchat_widget() {
    ?>
    <script>
    (function() {
      var chatbuddy = document.createElement('div');
      chatbuddy.id = 'chatbuddy-widget';
      document.body.appendChild(chatbuddy);
      
      var script = document.createElement('script');
      script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
      script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
      script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
      document.head.appendChild(script);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'add_nedchat_widget');

Shopify

Add NedChat to your Shopify store for customer support

Steps:

Go to your Shopify admin → Online Store → Themes
Click "Actions" → "Edit code" on your current theme
Open theme.liquid file
Scroll to the bottom and paste the embed code before </body>
Save the file

<script>
(function() {
  var chatbuddy = document.createElement('div');
  chatbuddy.id = 'chatbuddy-widget';
  document.body.appendChild(chatbuddy);
  
  var script = document.createElement('script');
  script.src = 'https://your-nedchat-domain.com/static/js/widget_src/wi-org.js';
  script.setAttribute('data-chatbot-id', 'YOUR_CHATBOT_ID');
  script.setAttribute('data-api-url', 'https://your-nedchat-domain.com/api/chat');
  document.head.appendChild(script);
})();
</script>
</body>
</html>

Widget Parameters

Parameter	Required	Description
`data-chatbot-id`	Yes	Your unique chatbot ID from the dashboard
`data-api-url`	Yes	The API endpoint URL for your chatbot
`data-debug`	No	Enable debug mode for development (shows console logs and debug info)

Customization

All styling and behavior options can be configured in your NedChat dashboard under Settings → Appearance:

Visual Customization

• Theme colors and branding
• Widget position and size
• Custom company logo
• Font family and sizing
• Button animations

Behavior Settings

• Welcome message
• Language selection (13+ languages)
• Conversation history
• Auto-open settings
• Sound notifications

Troubleshooting

Widget not appearing?

• Check that the script is placed before the closing </body> tag
• Verify your chatbot ID is correct in your dashboard
• Ensure JavaScript is enabled in your browser
• Check browser console for any errors (press F12)

Messages not sending?

• Check your internet connection
• Verify the API URL is correct
• Ensure your chatbot is not disabled in settings
• Check if you've reached your plan's message limit

Need Help?

Get Support

Our team is here to help you get your chatbot up and running smoothly.

Contact Support Get Started Free

Documentation