Installation Guide

1Sign Up & Setup

First, create your account and configure your chatbot settings:

1. Visit our signup page and create your account
2. Go to the setup page to configure your chatbot
3. Choose your industry (Real Estate or Generic B2B)
4. Customize your welcome message, colors, and fonts
5. Copy your personalized script from the setup page

2Basic HTML Integration

Add the chatbot to any HTML webpage by including this script tag before the closing </body> tag:

<!-- Basic chatbot integration -->
<script
    src="https://smartvchat.replit.app/chatbot.js"
    data-tenant-id="your email id"
></script>

3WordPress Integration

For WordPress sites, you have multiple options:

Option A: Theme Files (Recommended)

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

<?php
// Add this before wp_footer() in your theme's footer.php
?>
<script
    src="https://smartvchat.replit.app/chatbot.js"
    data-tenant-id="your email id"
></script>
<?php wp_footer(); ?>

Option B: Plugin or Widget

Use a plugin like "Insert Headers and Footers" or add a custom HTML widget to your footer with the simple script tag.

Option C: Functions.php

Add this code to your theme's functions.php file:

function add_smartchat_script() {
    ?>
    <script
        src="https://smartvchat.replit.app/chatbot.js"
        data-tenant-id="your email id"
    ></script>
    <?php
}
add_action('wp_footer', 'add_smartchat_script');

4React/Next.js Integration

For React applications, add the script dynamically:

// In your main component or _app.js (Next.js)
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://smartvchat.replit.app/chatbot.js';
    script.setAttribute('data-tenant-id', 'your email id');
    script.async = true;
    document.body.appendChild(script);

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

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

5Vue.js Integration

For Vue.js applications:

// In your main Vue component
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://smartvchat.replit.app/chatbot.js';
    script.setAttribute('data-tenant-id', 'your email id');
    script.async = true;
    document.body.appendChild(script);
  },
  beforeDestroy() {
    // Clean up if needed
    const scripts = document.querySelectorAll('script[src*="smartvchat"]');
    scripts.forEach(script => script.remove());
  }
}

6Shopify Integration

For Shopify stores:

1. Go to your Shopify admin panel
2. Navigate to Online Store → Themes
3. Click "Actions" → "Edit code"
4. Open theme.liquid
5. Add the script before </body>:

<script
    src="https://smartvchat.replit.app/chatbot.js"
    data-tenant-id="your email id"
></script>
</body>

7Testing Your Installation

After installation, verify everything works correctly:

• ✅ Chatbot launcher appears in bottom-right corner
• ✅ Clicking the launcher opens the chat window
• ✅ Welcome message displays correctly
• ✅ Colors and fonts match your configuration
• ✅ You can send and receive messages
• ✅ Works on both desktop and mobile

8Troubleshooting

Common issues and solutions:

Chatbot doesn't appear

• Check that the script is loading (inspect Network tab in browser dev tools)
• Ensure your tenant ID (email address) is correct
• Verify you haven't exceeded your message limit

Chatbot appears but doesn't respond

• Check browser console for errors
• Verify your domain is registered correctly
• Contact support if the issue persists

Styling conflicts

• The chatbot uses high z-index values (9998-9999)
• Check for CSS conflicts in your site's stylesheets
• Use browser dev tools to inspect element styles