Installation Guide

1Sign Up & Setup

First, create your account and configure your AI tools:

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 scripts from the setup page

2Choose Your AI Service Integration

gvsmartai offers multiple AI-powered tools. Choose the one that best fits your needs:

<script
  src="https://gvsmartai.com/chatbot.js"
  data-tenant-id="your-email"
  data-primary-color="#007BFF"
  data-position="bottom-right"
></script>

<script
  src="https://gvsmartai.com/ai-widgets.js"
  data-tenant-id="your-email"
  data-widgets="content,visuals,analytics,forms"
  data-industry="realestate"
></script>

<script
  src="https://gvsmartai.com/ai-widgets.js"
  data-widgets="content"
  data-industry="realestate"
></script>

<script
  src="https://gvsmartai.com/ai-widgets.js"
  data-widgets="visuals"
  data-industry="realestate"
></script>

<script
  src="https://gvsmartai.com/ai-widgets.js"
  data-widgets="analytics"
  data-industry="realestate"
></script>

3Basic HTML Integration

Add any AI service to your HTML webpage by including the script tag before the closing </body> tag:

<!-- Basic AI tools integration -->
<script
    src="https://gvsmartai.com/ai-widgets.js"
    data-tenant-id="your-email"
    data-widgets="content,visuals,analytics,forms"
    data-industry="realestate"
    data-primary-color="#007BFF"
    data-position="bottom-left"
></script>

4WordPress 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://gvsmartai.com/ai-widgets.js"
    data-tenant-id="your-email"
    data-widgets="content,visuals,analytics,forms"
    data-industry="realestate"
></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 script tag.

Option C: Functions.php

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

function add_gvsmartai_script() {
    ?>
    <script
        src="https://gvsmartai.com/ai-widgets.js"
        data-tenant-id="your-email"
        data-widgets="content,visuals,analytics,forms"
        data-industry="realestate"
    ></script>
    <?php
}
add_action('wp_footer', 'add_gvsmartai_script');

5React/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://gvsmartai.com/ai-widgets.js';
    script.setAttribute('data-tenant-id', 'your-email');
    script.setAttribute('data-widgets', 'content,visuals,analytics,forms');
    script.setAttribute('data-industry', 'realestate');
    script.async = true;
    document.body.appendChild(script);

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

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

6Vue.js Integration

For Vue.js applications:

// In your main Vue component
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://gvsmartai.com/ai-widgets.js';
    script.setAttribute('data-tenant-id', 'your-email');
    script.setAttribute('data-widgets', 'content,visuals,analytics,forms');
    script.setAttribute('data-industry', 'realestate');
    script.async = true;
    document.body.appendChild(script);
  },
  beforeDestroy() {
    // Clean up if needed
    const scripts = document.querySelectorAll('script[src*="gvsmartai"]');
    scripts.forEach(script => script.remove());
  }
}

7Shopify 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://gvsmartai.com/ai-widgets.js"
    data-tenant-id="your-email"
    data-widgets="content,visuals,analytics,forms"
    data-industry="realestate"
></script>
</body>

8URL Parameters for AI Tools

To activate the AI tools on your webpage, you need specific URL parameters:

Example URL:

https://example.com/your-page?gvsmartai_tools=true&key=demo_realestate_2025_sample

Demo API Keys:

• demo_realestate_2025_sample - Unlimited usage for Real Estate
• demo_genericb2b_2025_sample - Unlimited usage for Generic B2B
• Any other key - Limited to 50 uses

9Configuration Options

Customize your AI tools with these data attributes:

10Testing Your Installation

After installation, verify everything works correctly:

For SmartChat Widget:

• ✅ Chatbot launcher appears in specified corner
• ✅ Clicking the launcher opens the chat window
• ✅ Welcome message displays correctly
• ✅ Colors and fonts match your configuration
• ✅ You can send and receive messages

For AI Tools Widget:

• ✅ Widget appears when URL contains required parameters
• ✅ All enabled tools (content, visuals, analytics, forms) are accessible
• ✅ Industry-specific prompts work correctly
• ✅ Generated content displays properly
• ✅ Download functionality works without errors

11Troubleshooting

Common issues and solutions:

Widgets don't appear

• Check that the script is loading (inspect Network tab in browser dev tools)
• Ensure your tenant ID (email address) is correct
• Verify URL parameters are present (?gvsmartai_tools=true&key=your-api-key)
• Check that you haven't exceeded your message limit

Tools appear but don't respond

• Check browser console for errors
• Verify your API key is valid
• Ensure industry type matches your configuration
• Try with demo API key to test functionality

Download issues (virus detection)

• This is a false positive - our generated content is safe
• The issue occurs when browsers misidentify text files
• Try using a different browser or disable real-time protection temporarily
• Contact support if the issue persists

Styling conflicts

• Our widgets use high z-index values (9998-9999)
• Check for CSS conflicts in your site's stylesheets
• Use browser dev tools to inspect element styles
• Override styles with higher specificity if needed